sw-toolboxを使用してリソースのキャッシュを管理するプログレッシブ Web アプリケーションがあります。
ログイン ページ (/user/login?returnurl=xxxx) には偽造防止トークンが必要なので、ページ コンテンツのキャッシュ バージョンが返されないように、sw-toolbox ルーターを次のように構成しました。
toolbox.router.any("/user/*", toolbox.networkOnlyCustom);
ここで、このnetworkOnlyCustom
メソッドはnetworkOnly
組み込みメソッドを警告付きで使用して、ユーザーがオフラインの場合にキャッシュされた「申し訳ありませんが、オフラインです」ページを返します (以下を参照)。
toolbox.networkOnlyCustom = function (req, vals, opts) {
return toolbox.networkOnly(req, vals, opts)
.catch(function (error) {
if (req.method === "GET" && req.headers.get("accept").includes("text/html"))
return toolbox.cacheOnly(new Request("/home/offline"), vals, opts);
throw error;
});
};
ただし、「偽造防止 Cookie トークンとフォーム フィールド トークンが一致しません」というエラーが頻繁に表示されます。いつもではありませんが!実際、ユーザーがそのエラーを見て、ブラウザの [戻る] をクリックしてフォームを再度送信すると、問題なくログインできます。
この理由は、ブラウザ (私の場合は Chrome 71) がログインページをキャッシュしているためだと思いました。そこで、ブラウザーが従うことを期待して、次の HTTP 応答ヘッダーを追加しました。
cache-control: no-cache, no-store, no-store, must-revalidate
expires: -1
pragma: no-cache
しかし、これは私の問題を解決していません。どんなアイデアでも大歓迎です!