service-worker - Service Worker 将 API 调用中的文件添加到预缓存

Question

使我的应用程序脱机运行。在安装过程中，服务人员应该:

从异步 API

获取 URL 列表

重新格式化回复

将响应中的所有 URL 添加到预缓存

对于这个任务，我将 Googles Workbox 与 Webpack 结合使用。
问题:虽然 service worker 成功缓存了所有 Webpack Assets (这告诉我工作箱基本上做了它应该做的)，但它并没有等待异步 API 调用来缓存额外的远程 Assets 。它们被简单地忽略，既不缓存也不在网络中获取。
这是我的服务人员代码:

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

workbox.skipWaiting();
workbox.clientsClaim();
    
self.addEventListener('install', (event) => {
  const precacheController = new 
  workbox.precaching.PrecacheController();
  const preInstallUrl = 'https://www.myapiurl/Assets';
  event.waitUntil(fetch(preInstallUrl)
    .then(response => response.json()
    .then((Assets) => {
      Object.keys(Assets.data.Assets).forEach((key) => {
        precacheController.addToCacheList([Assets.data.Assets[key]]);
      });
    })
  );
});

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
    
workbox.routing.registerRoute(/^.*\.(jpg|JPG|gif|GIF|png|PNG|eot|woff(2)?|ttf|svg)$/, workbox.strategies.cacheFirst({ cacheName: 'image-cache', plugins: [new workbox.cacheableResponse.Plugin({ statuses: [0, 200] }), new workbox.expiration.Plugin({ maxEntries: 600 })] }), 'GET');

这是我对工作箱的 webpack 配置:

new InjectManifest({
  swDest: 'sw.js',
  swSrc: './src/sw.js',
  globPatterns: ['dist/*.{js,png,html,css,gif,GIF,PNG,JPG,jpeg,woff,woff2,ttf,svg,eot}'],
  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
})

Answer 1

看起来您正在创建自己的 PrecacheController实例并使用 precacheAndRoute() ，它们实际上并不打算一起使用(文档中没有很好地解释，它只在 this one place 中提到)。

问题是 workbox.precaching.* 上的辅助方法实际创建自己的PrecacheController引擎盖下的实例。由于您正在创建自己的PrecacheController实例并调用 workbox.precaching.precacheAndRoute([...]) , 你会得到两个 PrecacheController不一起工作的实例。

从您的代码示例看来，您正在创建 PrecacheController实例，因为您想在运行时加载文件列表以进行预缓存。没关系，但是如果您要这样做，则需要注意以下几点:

您的软件可能不会更新
Service Worker 更新通常在您调用 navigator.serviceWorker.register() 时触发。并且浏览器检测到 service worker 文件已更改。这意味着如果您更改 /Assets返回但您的服务工作人员文件的内容没有改变，您的服务工作人员不会更新。这就是为什么大多数人在他们的服务 worker 中硬编码他们的预缓存列表(因为对这些文件的任何更改都会触发新的服务 worker 安装)。

您必须手动添加自己的路线
我之前提到过workbox.precaching.precacheAndRoute([...])创建自己的PrecacheController引擎盖下的实例。它还 adds its own fetch listener manually响应请求。这意味着如果您不使用 precacheAndRoute() ，您必须创建自己的路由器并定义自己的路由。以下是有关如何创建路由的文档:https://developers.google.com/web/tools/workbox/modules/workbox-routing .