如何使用 Workbox？

推荐答案

// www.javascriptcn.com code example
// 引入 Workbox
import {registerRoute} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

// 缓存图片资源
registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);

// 缓存 API 请求
registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-responses',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

// 预缓存静态资源
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

本题详细解读

Workbox 简介

Workbox 是一个由 Google 开发的库，用于简化 Service Worker 的开发和维护。它提供了一系列工具和策略，帮助开发者轻松实现缓存、离线支持、后台同步等功能。

核心概念

1. Routing: Workbox 提供了 registerRoute 方法，用于定义如何匹配请求并应用缓存策略。
2. Strategies: Workbox 提供了多种缓存策略，如 CacheFirst、StaleWhileRevalidate、NetworkFirst 等，开发者可以根据需求选择合适的策略。
3. Plugins: Workbox 提供了多种插件，如 CacheableResponsePlugin 和 ExpirationPlugin，用于增强缓存功能。

代码解析

1. 缓存图片资源:

   • 使用 CacheFirst 策略，优先从缓存中获取图片资源。
   • 使用 CacheableResponsePlugin 插件，确保只缓存状态码为 0 或 200 的响应。
   • 使用 ExpirationPlugin 插件，设置缓存的最大条目数和过期时间。

2. 缓存 API 请求:

   • 使用 StaleWhileRevalidate 策略，优先从缓存中获取数据，同时后台更新缓存。
   • 使用 CacheableResponsePlugin 插件，确保只缓存状态码为 0 或 200 的响应。

3. 预缓存静态资源:

   • 使用 precacheAndRoute 方法，预缓存 self.__WB_MANIFEST 中列出的静态资源，确保这些资源在 Service Worker 安装时就被缓存。

使用场景

• 图片资源缓存: 适用于需要快速加载图片的场景，如电商网站、图库等。
• API 请求缓存: 适用于需要频繁请求 API 的场景，如新闻网站、社交媒体等。
• 静态资源预缓存: 适用于需要离线访问的场景，如 PWA 应用、单页应用等。

通过 Workbox，开发者可以轻松实现复杂的缓存策略，提升应用的性能和用户体验。