サービスワーカーのフォールバックが引き継ぐ反応SSR

Question

オンラインモードでは、サービスワーカーapiフォールバックがサーバー側のレンダリングページを引き継ぎます。私が最初に例えば​​ページをロードすると（私はsw-precacheオプションでnavigateFallbackとして/を定義したので）、私はホーム・ページがレンダリングされているソースコードに探して：

は、私は場合にのみ、この動作をしたいIオフラインモードで動作しています。ここで

私が使用するオプションがあります：

{ 
    cacheId: pkg.name, 
    dontCacheBustUrlsMatching: /./, 
    dynamicUrlToDependencies: { 
    '/': [ resolve(__dirname, '../server/views/index.ejs') ] 
    }, 
    navigateFallback: '/', 
    staticFileGlobs: [ 
    `${publicDir}/{bundle,vendor}.*.{js,css,gz}`, 
    `${publicDir}/manifest.json` 
    ], 
    stripPrefix: publicDir, 
    runtimeCaching: [{ 
    urlPattern: /api/, 
    handler: 'networkFirst' 
    }] 
} 

Answer 1

sw-precacheでnavigateFallbackの予想されるユースケースは反対行かずに、直接キャッシュ最初の戦略を使用して提供することができ、静的なHTMLドキュメントを提供することですネットワーク。これにより、ネットワークからの応答が不定期になるのを待たずに、サイト上の任意のURLへのリクエストをほぼ即座に処理できるようになります。これは、ナビゲーション要求を満たすために使用できる汎用HTMLページ（Appシェルと呼ばれる）があり、現在のURLを調べて適切なコンテンツを動的に挿入するためのクライアントサイドロジックを実装する方法を知っていることを前提としています。シングルページアプリスタイルのナビゲーションをサポートするコードをすでにお持ちの場合は、通常これで十分です。

あなたはread more about this architectural patternことができ、そこに（またはサービス労働者をサポートしていないクライアントのための）最初のナビゲーションのためのSSRを使用して反応させ、ベースPWAのfull exampleもありますし、次にSWの仕事がしたらnavigateFallback行動へのアップグレードインストールされます。

このモデルを使用したくない場合は、代わりに各ページのSSRバージョンのネットワークにアクセスし、ネットワークリクエストが失敗したときにキャッシュされたページのみを使用したい場合は、navigateFallbackオプションは正しい選択。ウェブ上のオフラインフォールバックの一部をexamples個見つけることができます。