設定はnavigateFallbackルート

Question

としてサーバーレンダリングされたページをロードするためのSW-プリキャッシュWebPACKのプラグインは、次のシナリオを検討してください：

私の急行サーバが動的に私の単一ページのアプリケーションの「/」ルートのためのHTMLを生成します。

ユーザーがオフラインのときにサービスワーカーnavigateFallbackと同じ生成されたHTMLを再提供したいと思います。

ウェブパックの設定でhttps://www.npmjs.com/package/sw-precache-webpack-pluginを使用しています。

html-webpack-plugin経由でindex.htmlを生成し、navigateFallbackファイルとしてindex.htmlを設定した場合、生成されたファイルはサービスワーカーによって正しく配信されます。

しかし、オンザフライでレンダリングされたインデックスhtml（生きているサーバーが "/"パスに対して返すもの）をキャッシュしてオフラインhtmlとして使用する方法はありません。

Answer 1

このユースケースはサポートする必要があります。私はの基礎となるsw-precacheライブラリを使用しています.Webpackラッパーを使用する場合、構文は同等でなければなりません。この場合

、/shellはApp Shellを構成する、サーバーから動的に生成されたコンテンツに使用するURLですが、ご利用の場合は、/の代わり/shellと、似ているように聞こえます。

{ 
    // Define the dependencies for the server-rendered /shell URL, 
    // so that it's kept up to date. 
    dynamicUrlToDependencies: { 
    '/shell': [ 
     ...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`), 
     ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`), 
     `${SRC_DIR}/views/index.handlebars` 
    ] 
    }, 

    // Brute force server worker routing: 
    // Tell the service worker to use /shell for all navigations. 
    // E.g. A request for /guides/12345 will be fulfilled with /shell 
    navigateFallback: '/shell', 

    // Other config goes here... 
} 

Answer 2

あなたのルートのURLとその依存関係をキャッシュするサービス労働者をプリキャッシュのdynamicUrlToDependenciesオプションを使用します。次に、navigateFallback〜'/'とnavigateFallbackWhitelistをサブリンクロジックに一致する正規表現に設定します。

この構成を取る：（あなたのWebPACKの設定の上にconst glob = require('glob')を追加）

new SWPrecacheWebpackPlugin({ 
 
    cacheId: 'my-project', 
 
    filename: 'offline.js', 
 
    maximumFileSizeToCacheInBytes: 4194304, 
 
    dynamicUrlToDependencies: { 
 
     '/': [ 
 
     ...glob.sync(`[name].js`), 
 
     ...glob.sync(`[name].css`) 
 
     ] 
 
    }, 
 
    navigateFallback: '/', 
 
    navigateFallbackWhitelist: [/^\/page\//], 
 
    staticFileGlobsIgnorePatterns: [/\.map$/], 
 
    minify: false, //set to "true" when going on production 
 
    runtimeCaching: [{ 
 
     urlPattern: /^http:\/\/localhost:2000\/api/, 
 
     // Use network first and cache as a fallback 
 
     handler: 'networkFirst' 
 
    }], 
 
})