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

If you use strategies configured with a custom cache name you can do the same thing; just assign your custom value to cacheName.

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

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

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());
});

Workbox 预热缓存问题

Workbox Warming Cache Questions

service-worker

workbox