これは、リアクションベースのモバイルWebアプリケーションを使用して、初期ビュー(速度+ SEO理由)のサーバ側レンダリングを利用するとします。 index.htmlファイルはありません。インデックスファイルは動的にサーバー側に構築され、最初の応答で戻されます。サーバサイドレンダリングを使用したReact PWAでのアプリケーションシェルのキャッシング
これで、そのアプリケーションにPWA機能を追加したいとします。あなたは資産をキャッシュするためにサービスワーカーをつかまえます。
PWAの中心的なテナントの1つは、オフラインの経験を提供することです。サービスワーカーがユーザーがオフラインであることをユーザーが検出したときに、「オフラインです。ここをクリックして更新してください」という更新ページを表示したいとします。
最初の訪問時にサービスワーカーがキャッシュすることができ、反応するアプリの内部に「シェル」する静的なHTMLファイルである、App Shellの使用に関するgoogleの話題のオンラインサンプルです。このシェルは、「オフライン」ビューを表示することと結びついています。
「シェル」htmlファイルがなく、各ルートが異なるindex.htmlファイルを返す可能性があるサーバー側のレンダリングではどのように機能しますか?
この機能のデモや例はどれも野生ですか?
こんにちはJeff!返信いただきありがとうございます。私はあなたのコードをたくさん読んだので、あなたの意見とフィードバックを得ることは素晴らしいことです! :)私のシナリオでは、私たちはシェルがするものとほぼ同等の 'PageTemplate.js'を持っています - 基本的にサーバサイドを実行し、最初のページマークアップの大きなテンプレート文字列を返します。それは私が 'dynamicUrlToDependencies'に渡したいものですか?これがばかげた質問であれば、私はまだPWAのことをとてもうれしく思っています。あなたの例では、 '/ shell'ルートのためだけにキャッシュするようですね? – Prefix
'/ shell'の内容が' PageTemplate.js'の内容によって一意に決定されれば、それは 'dynamicUrlToDependencies'にリストされます。 'PageTemplate.js'が別の外部リソース(' .hbs'のような)をロードする場合、それもリストします。設定のもう1つの部分は 'navigateFallback: '/ shell'を使用して、キャッシュされた'/shell'ですべてのナビゲーション結果(実際のURLに関係なく)を実行させることです。 –
こんにちはJeff - 「別の外部リソースをロードするかどうか」を詳しく教えてください。ビルドコンパイル中の読み込みや、文字通りブラウザで非同期にロードすることを意味しますか?私の(react/redux/react-router)アプリケーションでは、サーバー上のAPIからデータがフェッチされ、reduxストアが生成され、pageTemplateの内容をユーザーに提供する前にそのストアに送られるさまざまなアクションが生成されます。そのルートの初期レンダリング用のマークアップ。おそらく私は、アプリケーションシェルのために特別にルートを追加し、そのルートのリソースをプリキャッシュするようにSWに指示しますか? – Prefix