0

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

しかし、これは私の問題を解決していません。どんなアイデアでも大歓迎です!

4

0 に答える 0