Workbox服务工作人员在PWA中没有正常工作

Question

我试图用一个服务人员使用Workbox制作一个非常基本的PWA，但是我有一个问题。我正在使用命令行界面来生成服务工作人员，一切正常，完美的亮点，但我不能将我的index.html添加到运行时缓存中。我必须将其添加到全局模式，以便我的网站在离线模式下工作，但当我更新index.html文件时，除非我清除缓存，否则不会更新。我想要和我的js和css一样的东西。当我升级这些文件时，它们会更新。这是我的工作箱配置文件：

module.exports = {
  globDirectory: "./",
  globPatterns: ["**/*.{html,json}"],
  swDest: "./serviceworker.js",
  // Define runtime caching rules.
  runtimeCaching: [
    {
      // Match any request that ends with .png, .jpg, .jpeg or .svg.  urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
      urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
      // Apply a network-first strategy.
      handler: "NetworkFirst",
      options: {
        // Use a custom cache name.
        cacheName: "images",
      },
    },
    {
      urlPattern: /\.(?:js|css)$/,
      handler: "NetworkFirst",
      options: {
        cacheName: "main",
      },
    },
  ],
};

Answer 1

我对你的问题的解释是，你不想使用预切，因为你更喜欢没有缓存优先的超文本标记语言。如果是这样，那很好——在这种情况下，你实际上不需要使用workbox-cli。

相反，如果您只是使用运行时缓存，您可以完全避免使用Workbox构建工具，而只是部署一个安装默认NetworkFirst路由的Service Worker文件：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.1/workbox-sw.js');

const strategy = new workbox.strategies.NetworkFirst();
workbox.routing.setDefaultHandler(strategy);

// Ensure that our cache is pre-populated at install time,
// which will help with offline checks.
const urls = [
  '/',
  // Add any other URLs that you want to ensure are cached here.
];
workbox.recipes.warmStrategyCache({urls, strategy});

workbox.core.clientsClaim();

一旦注册了服务辅助角色，所有响应都将在运行时自动缓存，如果您曾经脱机，以前缓存的响应将被用作回退（假设以前有一个请求填充了缓存）。

如果您愿意，可以将此与调用“workbox”混合使用。食谱。温热疗法