Workbox 预热缓存问题

Question

我在我的应用程序中缓存了 api。我想在服务人员安装时缓存 ​​api。我遇到了预热缓存：

import {cacheNames} from 'workbox-core';

self.addEventListener('install', (event) => {
  const urls = [/* ... */];
  const cacheName = cacheNames.runtime;
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)));
});

如果您使用配置了自定义缓存名称的策略，您可以执行相同的操作；只需将您的自定义值分配给 cacheName。

1) 我正在使用自定义缓存名称。我会为多个缓存名称使用一个数组吗？即const cacheName = [ 'foo-api', 'bar'api']?

2) 我使用的网址是正则表达式/foo/。那些 rexexp 网址可以在这里工作吗？

3) 在浏览器使用 api 之前，我是否能够在 service worker 安装时缓存 ​​api？

Answer 1

您可以在 install 处理程序中将任意数量的项目添加到任意数量的缓存中。

Workbox 可以使用RegExps 将传入的fetch 请求路由到适当的响应处理程序，我假设这就是您在这里所指的。答案是否定的，如果你想提前缓存 URL，你不能只提供RegExp——你需要提供一个完整的 URL 列表。

您在install 处理程序中执行的任何缓存都保证在服务工作者激活之前发生，因此在您的fetch 处理程序开始拦截请求之前发生。所以是的，这是确保您的缓存已预先填充的一种方式。

您的代码的修改可能如下所示：

self.addEventListener('install', (event) => {
  const cacheURLs = async () => {
    const cache1 = await caches.open('my-first-cache');
    await cache1.addAll([
      '/url1',
      '/url2',
    ]);

    const cache2 = await caches.open('my-second-cache');
    await cache2.addAll([
      '/url3',
      '/url4',
    ]);
  };

  event.waitUntil(cacheURLs());
});