配置 sw-precache WebPack 插件以加载服务器呈现的页面作为导航回退路由

Question

请考虑以下场景：

我的

快递服务器为我的单页应用程序的"/"路由动态生成 HTML。

我想在用户离线时重新提供与服务工作者相同的生成 HTML 导航回退。

我在我的 webpack 配置中使用 https://www.npmjs.com/package/sw-precache-webpack-plugin。

如果我通过html-webpack-plugin生成一个索引.html并设置索引.html作为我的navigateFallback文件，那么生成的文件将由服务工作者正确提供服务。

但是，我看不出有什么办法使动态渲染的索引 html（实时服务器为"/"路径返回的内容）被缓存并用作离线 html。

Answer 1

使用dynamicUrlToDependencies服务工作进程预缓存选项来缓存路由 URL 及其依赖项。然后将navigateFallback设置为 '/'，navigateFallbackWhitelist设置为与子链接逻辑匹配的正则表达式。

采用此配置：（将const glob = require('glob')添加到 webpack 配置之上）

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'
    }],
})

Answer 2

应该支持该用例。我有一个使用底层sw-precache库的类似示例，我相信使用 Webpack 包装器时语法应该是等效的。

在这种情况下，/shell是用于从服务器动态生成内容的 URL，构成 App Shell，但听起来您的用例类似，/而不是/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...
}