工作箱预热缓存问题

Question

我在我的应用程序中缓存了一些api，我想在服务员安装时缓存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) 我使用的url是regexp的。/foo/. 这些rexexp urls在这里能用吗？

3) 我可以在服务工作者安装的时候，在浏览器消耗api之前缓存api吗？

Answer 1

你可以在你的缓存中添加任意多的项目，只要你愿意，在你的 install 处理程序。

工作箱可以使用 RegExp用于路由传入的 fetch 请求到一个适当的响应处理程序，我想这就是你这里所说的。答案是否定的，你不能只是提供一个 RegExp 如果你想提前缓存URL，你需要提供一个完整的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());
});