使用 Workbox 打造自己的 PWA 缓存策略-JavaScript中文网-JavaScript教程资源分享门户

前言

PWA（Progressive Web App）是一种新型的 Web 应用程序，它可以像原生应用一样提供离线访问、推送通知等功能，同时也具有 Web 应用的优势，如跨平台、无需安装等。而实现这些功能的核心技术就是 Service Worker。

Service Worker 是一种运行在浏览器后台的 JavaScript 脚本，它可以拦截网络请求、缓存响应结果、推送通知等。而 Workbox 就是一个由 Google 开发的 Service Worker 库，它提供了一些常用的缓存策略、路由管理等工具，可以帮助我们更方便地构建 PWA。

本文将介绍如何使用 Workbox 打造自己的 PWA 缓存策略，包括基本的缓存策略、高级的路由管理、缓存版本控制等。

基本的缓存策略

首先，我们需要使用 Workbox 注册 Service Worker，并设置缓存策略。以下是一个简单的示例：

// javascriptcn.com 代码示例
importScripts('https://cdn.jsdelivr.net/npm/workbox-sw@6.2.4/workbox-sw.js');

const { precacheAndRoute } = workbox.precaching;
const { registerRoute } = workbox.routing;
const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;

// 缓存静态资源
precacheAndRoute(self.__WB_MANIFEST);

// 缓存 API 请求
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate()
);

// 缓存图片资源
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst()
);

以上代码中，我们使用 precacheAndRoute 缓存静态资源，使用 registerRoute 缓存 API 请求和图片资源。其中，StaleWhileRevalidate 策略表示先返回缓存结果，同时异步更新缓存；CacheFirst 策略表示优先使用缓存结果，如果缓存不存在则向网络请求数据。

高级的路由管理

除了基本的缓存策略，Workbox 还提供了一些高级的路由管理工具，可以更灵活地控制缓存策略。以下是一个示例：

// javascriptcn.com 代码示例
importScripts('https://cdn.jsdelivr.net/npm/workbox-sw@6.2.4/workbox-sw.js');

const { precacheAndRoute } = workbox.precaching;
const { registerRoute } = workbox.routing;
const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;
const { CacheableResponsePlugin } = workbox.cacheableResponse;
const { ExpirationPlugin } = workbox.expiration;

// 缓存静态资源
precacheAndRoute(self.__WB_MANIFEST);

// 缓存 API 请求
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new ExpirationPlugin({ maxAgeSeconds: 60 * 60 * 24 })
    ]
  })
);

// 缓存文章详情页
registerRoute(
  ({ url }) => url.pathname.startsWith('/article/'),
  new CacheFirst({
    cacheName: 'articles',
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new ExpirationPlugin({ maxAgeSeconds: 60 * 60 * 24 * 7 })
    ]
  })
);

以上代码中，我们使用 CacheableResponsePlugin 插件控制缓存的响应结果，使用 ExpirationPlugin 插件控制缓存的过期时间。同时，我们使用 cacheName 属性自定义缓存名称，可以方便地进行版本控制。

缓存版本控制

在开发 PWA 时，我们经常需要更新缓存，以保证页面内容的最新性。但是，由于浏览器缓存的存在，我们不能简单地更新 Service Worker，否则用户可能会看到旧版本的页面。

为了解决这个问题，我们需要进行缓存版本控制。以下是一个示例：

// javascriptcn.com 代码示例
importScripts('https://cdn.jsdelivr.net/npm/workbox-sw@6.2.4/workbox-sw.js');

const { precacheAndRoute } = workbox.precaching;
const { registerRoute } = workbox.routing;
const { CacheFirst } = workbox.strategies;

// 定义缓存版本号
const CACHE_VERSION = 'v1';

// 缓存静态资源
precacheAndRoute(self.__WB_MANIFEST);

// 缓存 API 请求
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new CacheFirst({
    cacheName: `api-${CACHE_VERSION}`
  })
);

// 缓存文章详情页
registerRoute(
  ({ url }) => url.pathname.startsWith('/article/'),
  new CacheFirst({
    cacheName: `articles-${CACHE_VERSION}`
  })
);

// 更新缓存版本
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys.map(key => {
        if (key !== CACHE_VERSION) {
          return caches.delete(key);
        }
      }));
    })
  );
});

以上代码中，我们使用常量 CACHE_VERSION 定义缓存版本号，使用 cacheName 属性设置缓存名称。在 activate 事件中，我们会删除旧版本的缓存，从而实现版本更新。

总结

通过以上示例，我们可以看到 Workbox 提供了强大的缓存策略和路由管理工具，可以帮助我们更方便地构建 PWA。在实际开发中，我们可以根据具体需求定制缓存策略，并进行缓存版本控制，以保证页面内容的最新性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65658145d2f5e1655debdd9e