如何使用 workbox-sw？

推荐答案

// www.javascriptcn.com code example
// 1. 引入 Workbox
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');

// 2. 检查 Workbox 是否加载成功
if (workbox) {
  console.log(`Workbox 加载成功 🎉`);
} else {
  console.log(`Workbox 加载失败 😬`);
}

// 3. 使用 Workbox 预缓存
workbox.precaching.precacheAndRoute([
  {url: '/index.html', revision: '123456'},
  {url: '/styles/main.css', revision: '654321'},
  {url: '/scripts/main.js', revision: '987654'},
]);

// 4. 使用 Workbox 路由策略
workbox.routing.registerRoute(
  ({url}) => url.pathname.startsWith('/images/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 天
      }),
    ],
  })
);

// 5. 使用 Workbox 后台同步
workbox.routing.registerRoute(
  '/api/data',
  new workbox.strategies.NetworkOnly({
    plugins: [
      new workbox.backgroundSync.BackgroundSyncPlugin('dataQueue', {
        maxRetentionTime: 24 * 60, // 24 小时
      }),
    ],
  })
);

本题详细解读

1. 引入 Workbox

Workbox 是一个用于构建渐进式 Web 应用（PWA）的工具库，提供了强大的缓存和离线功能。通过 importScripts 方法，我们可以从 CDN 引入 Workbox 库。

2. 检查 Workbox 是否加载成功

在引入 Workbox 后，可以通过检查 workbox 对象是否存在来确认 Workbox 是否加载成功。如果加载成功，可以在控制台中看到成功提示。

3. 使用 Workbox 预缓存

precacheAndRoute 方法用于预缓存静态资源，并在请求时直接从缓存中提供这些资源。这样可以确保关键资源在离线时仍然可用。

4. 使用 Workbox 路由策略

registerRoute 方法用于定义路由策略。在这个例子中，我们使用 CacheFirst 策略来缓存 /images/ 路径下的所有图片资源。CacheFirst 策略会优先从缓存中获取资源，如果缓存中没有，则从网络获取。

5. 使用 Workbox 后台同步

BackgroundSyncPlugin 用于在用户离线时，将请求排队并在网络恢复时重新发送。这对于确保数据在离线时不会丢失非常有用。在这个例子中，我们为 /api/data 路径配置了 NetworkOnly 策略，并在网络不可用时使用后台同步功能。