workbox - 缓存远程 HTTP Assets

Question

我希望使用 Workbox 缓存本地和远程图像 Assets 。目前是否支持，如果支持，如何支持？

基本上我想有以下功能:

workboxBuild.injectManifest({
    swSrc: 'app/sw.js',
    swDest: 'build/sw.js',
    globDirectory: 'build',
    globPatterns: [
      '*.css',
      'index.html',
      'app.js',
      'http://remote/image.jpg'
    ],

如果我手动将远程 HTTP Assets 添加到生成的 Service Worker 文件中，那会起作用(见下文)，但我希望生成该 Service Worker 文件而无需手动编辑它。

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

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
  workbox.precaching.precacheAndRoute([
  {
    "url": "app.css",
    "revision": "f8d6a881fb9d586ef6fd676209e1613b"
  },
  {
    "url": "index.html",
    "revision": "ce6238d5b3c1e4e559349549c9bd30aa"
  },
  {
    "url": "app.js",
    "revision": "4357dbdbcc80dcfbe1f8198ac0313009"
  },
  {
    "url": "http://remote/image.jpg"
  }
]);

} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

Answer 1

不支持预缓存远程 Assets 。这不太可能改变。 Workbox 需要在部署之前拍摄每个资源的“快照”，作为构建过程的一部分，以便填充和更新其缓存，同时为它们提供缓存优先。虽然理论上您可以在构建过程中对远程资源发出 HTTP 请求，但为了获取其版本信息，不能保证远程资源不会在第一个部署周期之外重新部署-党的 Assets 。这可能会让您处于 Workbox 认为它拥有最新版本的 http://example.com/image.jpg 的情况。 ，并且从不接收最近的更新。

途径handle third-party ，远程 Assets 是使用runtime routing连同 caching strategy这为您提供了您认为适合特定类型 Assets 的新鲜度保证。如果您希望在安装 Service Worker 后立即自动缓存给定 Assets ，您可以添加自己的 install将为您“准备”运行时缓存的处理程序。

这看起来像:

// Workbox will continue to precache and keep
// the local assets it knows about up to date.
workbox.precaching.precacheAndRoute([...]);

const cacheName = 'image-cache';

// Make sure that these URLs support CORS!
// Otherwise, the cache.addAll() call will fail,
// and you'll have to explicitly call cache.put()
// for each resource.
const thirdPartyUrls = [
  'https://example.com/image.jpg',
  // Any other URLs.
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(cacheName)
      .then((cache) => cache.addAll(thirdPartyUrls))
  );
});

workbox.routing.registerRoute(
  new RegExp('^https://example.com/'),
  // Use whichever strategy you want.
  workbox.strategies.staleWhileRevalidate({
    cacheName,
    // Use whatever plugins you want.
    plugins: [...],
  }),
);