サーバサイドレンダリングを使用したReact PWAでのアプリケーションシェルのキャッシング

Question

これは、リアクションベースのモバイルWebアプリケーションを使用して、初期ビュー（速度+ SEO理由）のサーバ側レンダリングを利用するとします。 index.htmlファイルはありません。インデックスファイルは動的にサーバー側に構築され、最初の応答で戻されます。

これで、そのアプリケーションにPWA機能を追加したいとします。あなたは資産をキャッシュするためにサービスワーカーをつかまえます。

PWAの中心的なテナントの1つは、オフラインの経験を提供することです。サービスワーカーがユーザーがオフラインであることをユーザーが検出したときに、「オフラインです。ここをクリックして更新してください」という更新ページを表示したいとします。

最初の訪問時にサービスワーカーがキャッシュすることができ、反応するアプリの内部に「シェル」する静的なHTMLファイルである、App Shellの使用に関するgoogleの話題のオンラインサンプルです。このシェルは、「オフライン」ビューを表示することと結びついています。

「シェル」htmlファイルがなく、各ルートが異なるindex.htmlファイルを返す可能性があるサーバー側のレンダリングではどのように機能しますか？

この機能のデモや例はどれも野生ですか？

Answer 1

この機能のデモまたは例はどれも野生ですか？

はい！

dynamicUrlToDepndencies optionをsw-precacheにして、App Shell HTMLのサーバーレンダリングに使用する基本リソースを定義してください。https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demoをご覧ください。

生成するサービスワーカーは、依存するリソースのいずれかが変更されるたびにAppシェルHTMLを更新します。

このモデルでは、サービスワーカーはすべてのナビゲーション要求に対して同じApp Shell HTMLドキュメントを返します。したがって、App Shell HTMLは、実行時に実際のURLに関連付けられた動的コンテンツ標準的なクライアント側のルーティングロジックを使用します。