javascript - 如何使用 Service Worker 处理 index.html 文件的缓存？

Question

我目前正在使用 create-react-app 开发渐进式 Web 应用程序默认服务 worker 。

在发布我们的某个 javascript block 的新版本时，我遇到了破坏缓存的问题。

构建时，输出 javascript 文件使用 contenthash确保当 JS 文件中的内容发生变化时，文件名也会发生变化。在没有服务工作线程的情况下运行时，这会成功破坏缓存。

但是，当使用create-react-app时Service Worker，所有静态 Assets ，包括我的 index.html文件已缓存。这意味着旧的index.html正在向用户提供服务，其中包括 <script>标记到我的旧缓存 javascript 文件，而不是带有更新的 contenthash 的新文件。 .

我已经弹出并修改了 webpack.config.js WorkboxWebpackPlugin排除我的index.html 文件:

 new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim: true,
      exclude: [/\.map$/, /asset-manifest\.json$/, /index.html/],
      importWorkboxFrom: "cdn",
      navigateFallbackBlacklist: [
          // Exclude URLs starting with /_, as they're likely an API call
             new RegExp("^/_"),
          // Exclude URLs containing a dot, as they're likely a resource in
          // public/ and not a SPA route
            new RegExp("/[^/]+\\.[^/]+$")
          ]
        }),

这似乎适本地停止了我的索引文件的缓存，允许它包含更新的 main.[contenthash].js在其脚本标签中。但是，现在我知道我的 PWA 将无法离线工作，因为 index.html 文件不是由 Service Worker 提供的，也不会通过离线连接提供服务。

处理这个问题的最佳方法是什么？完全离线访问不是必需的，但如果有的话会很好，并且我想知道其他开发人员如何处理索引文件的服务工作线程缓存的“破坏”，而不完全删除index.html由服务 worker 缓存？是否有更实用的方法来处理 index.html 中有关带有内容哈希的标签的更改？

谢谢

Answer 1

如果您将 create-react-app 与 cra-template-pwa (npx create-react-app my-app --template cra-template-pwa) 一起使用，那么您可以在预缓存时过滤掉 index.html，然后注册index.html，使其网络优先。

import { NetworkFirst } from 'workbox-strategies'

// precacheAndRoute(self.__WB_MANIFEST)

const toPrecache = self.__WB_MANIFEST.filter(
  (file) => !file.url.includes('index.html'),
)

precacheAndRoute(toPrecache)

registerRoute(
  ({ url }) => url.pathname.includes('index.html'),
  new NetworkFirst(),
)

然后您需要删除将所有导航请求路由到index.html的部分

// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
// const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
// registerRoute(
//   // Return false to exempt requests from being fulfilled by index.html.
//   ({ request, url }) => {
//     // If this isn't a navigation, skip.
//     if (request.mode !== 'navigate') {
//       return false
//     } // If this is a URL that starts with /_, skip.

//     if (url.pathname.startsWith('/_')) {
//       return false
//     } // If this looks like a URL for a resource, because it contains // a file extension, skip.

//     if (url.pathname.match(fileExtensionRegexp)) {
//       return false
//     } // Return true to signal that we want to use the handler.

//     return true
//   },
//   createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html', true),
// )