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

使我的应用程序能够离线运行。在安装过程中，服务人员应该：

1. 从异步 API 获取 URL 列表
2. 重新格式化响应
3. 将响应中的所有 URL 添加到预缓存

对于此任务，我将 Google Workbox 与 Webpack 结合使用。

问题：虽然服务工作线程成功缓存了所有 Webpack 资源（这告诉我工作箱基本上完成了它应该做的事情），但它不会等待异步 API 调用来缓存其他远程资源。它们会被简单地忽略，既不会被缓存，也不会在网络中获取。

这是我的服务人员代码：

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

看起来您正在创建自己的PrecacheController实例并且还使用precacheAndRoute()，它们实际上并不打算一起使用（文档中没有很好地解释，仅在这一个地方).

问题在于辅助方法workbox.precaching.*实际上创建自己的PrecacheController引擎盖下的实例。既然你正在创建自己的PrecacheController实例和also呼叫workbox.precaching.precacheAndRoute([...])，你最终会得到两个PrecacheController不能一起工作的实例。

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

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

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