0

考虑以下场景：

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

当用户离线时，我想重新提供与服务工作者 navigateFallback 相同的生成 HTML。

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

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

但是，我看不出有任何方法可以使动态渲染的索引 html（实时服务器为“/”路径返回的内容）被缓存并用作离线 html。

4

2 回答 2

4

使用dynamicUrlToDependenciesService Worker Precache 的选项来缓存你的路由 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'
    }],
})

于 2017-02-11T23:57:44.123 回答
0

应该支持该用例。我有一个使用底层库的类似示例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...
}
于 2017-01-26T16:23:01.400 回答