サービスワーカーでワークボックスとサーバー側でレンダリングされたSPA

Question

私はサーバー側でレンダリングされた反応型アプリケーションを持っており、サービスワーカーキャッシュを追加したいと思います。

アプリでは、ログインして保存した設定を見ることができます。初期ロード時に、サーバーは認証クッキーに基づいて事前レンダリングされたこれらの設定でアプリケーションを提供します。ユーザーがログインしていない場合、サーバーはログインフォームを事前にレンダリングします。

私はホームページのindex.htmlのデフォルトのキャッシュ最初の戦略を使用している場合は、ユーザがログアウトしてページを更新するとき、そして、彼らは彼らはまだログインして、キャッシュされたバージョンが表示されます。

ネットワーク-最初の戦略を使用してindex.htmlはこの問題を部分的に解決しますが、このシナリオでは失敗します。ユーザーはログアウトしたり、設定を変更したり、オフラインにしたり、ページを更新したりします。リフレッシュする前に実際の最新版を見ただけです。

私が考えることのできる解決策の1つは、非GETリクエストが発生するたびにindex.htmlキャッシュを更新することです。ログアウトは、たとえばDELETEリクエストでなければなりません。これはすべてを実際に解決し、フレームワークに含めるのに十分普遍的であるかもしれません。

とにかく、私はワークボックスで非GETリクエストを聴く方法を考え出すことができますが、リスナーでindex.htmlキャッシュを更新するにはどうすればよいですか？

私はワークボックスのソースコードを検査し続けますが、事前に感謝の意を表します。

Answer 1

私は仕事箱の事前キャッシュと一緒に作業し、余分なfetchリスナーでそれを行うために管理：https://github.com/vfeskov/cra-ssr/commit/d269f55e9f9c83cb6a67033499c51f5a778bdb4a

私もそれについての詳細な記事を書いた：https://vfeskov.com/2017/12/29/Create-React-App-with-SSR-and-Service-Worker/

それはここに私のペットのプロジェクトに取り組んでいます：https://beer.vfeskov.com、してみてくださいウェブサイトの最新の状態を常に提供します。

Answer 2

ユーザーがログアウトしたときにキャッシュ記憶域APIを直接キャッシュremoveにキャッシュすることができます。ワークボックス戦略で名前付きキャッシュを使用し、ログインしたユーザーに関連付けられたすべてのデータに対して特定の名前（など）を使用する方法をお勧めします。次に、あなたドンこのアプローチについての素晴らしい事は、あなたがデータのために別のキャッシュ名を使用する場合、特定のユーザー（のような、画像やCSSファイルのキャッシュ）に固有のものではないということということです

// This code can run in the context of your web page: 
if ('caches' in window) { 
    window.caches.delete('user-data'); 
} 

を経由して、それを削除することができますユーザーがログアウトするとキャッシュされたエントリを削除する必要があります。