如何使用 Workbox 为 PWA 管理缓存和离线-JavaScript中文网-JavaScript教程资源分享门户

前言

Progressive Web App（PWA）已经成为了现代 Web 应用开发的趋势，它可以在浏览器中为用户提供与本地应用相似的体验，例如离线访问、推送通知等。其中，缓存和离线功能是 PWA 的核心特性之一。Workbox 是 Google 推出的一款 PWA 应用开发工具，它提供了一套简单易用的 API，能够帮助我们管理缓存和离线功能。

本文将介绍如何使用 Workbox 为 PWA 管理缓存和离线，包括 Workbox 的基本使用、缓存策略、离线支持等内容。

Workbox 简介

Workbox 是一个 JavaScript 库，它提供了一些工具和库，帮助我们构建 PWA 应用。其中最重要的功能是缓存和离线支持。Workbox 可以帮助我们管理缓存，提高 Web 应用的性能，并且提供离线支持，让用户可以在离线状态下访问应用。

Workbox 的核心思想是将缓存和离线支持作为一种“策略”，我们可以根据不同的策略来管理缓存和离线功能。Workbox 提供了一些默认的策略，也支持自定义策略。

Workbox 的基本使用

Workbox 是一个 JavaScript 库，我们可以使用 npm 或者直接在 HTML 页面中引入 Workbox 库。下面我们来看一下 Workbox 的基本使用。

缓存文件

我们可以使用 Workbox 的 precacheAndRoute 方法来缓存文件。这个方法会将指定的文件缓存到本地，并且创建路由规则，让浏览器在离线状态下也能够访问这些文件。

// javascriptcn.com 代码示例
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

const filesToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js'
];

workbox.precaching.precacheAndRoute(filesToCache);

上面的代码将 /、/index.html、/style.css 和 /app.js 这些文件缓存到了本地。缓存文件的数量和大小都是有限制的，具体限制取决于浏览器和设备的不同。

缓存策略

Workbox 提供了一些默认的缓存策略，我们可以根据不同的需求选择不同的策略。下面是一些常用的策略：

CacheFirst：优先从缓存中获取资源，如果缓存中没有，则从网络获取。
NetworkFirst：优先从网络获取资源，如果网络请求失败，则从缓存中获取。
StaleWhileRevalidate：从缓存中获取资源，同时发起网络请求更新缓存。

workbox.routing.registerRoute(
  /\/api\/(.*)/,
  new workbox.strategies.NetworkFirst()
);

上面的代码将匹配所有以 /api/ 开头的请求，使用 NetworkFirst 策略，即优先从网络获取资源。

我们也可以自定义缓存策略，例如下面的代码使用了自定义的缓存策略，优先从缓存中获取资源，如果缓存中没有，则从网络获取，并且缓存请求结果。

// javascriptcn.com 代码示例
class CustomCacheStrategy extends workbox.strategies.CacheFirst {
  async handle(request, handler) {
    const cache = await caches.open(this.cacheName);
    const cachedResponse = await cache.match(request);

    if (cachedResponse) {
      return cachedResponse;
    }

    const response = await handler(request);

    if (response.ok) {
      await cache.put(request, response.clone());
    }

    return response;
  }
}

workbox.routing.registerRoute(
  /\/api\/(.*)/,
  new CustomCacheStrategy()
);

离线支持

Workbox 可以帮助我们实现离线支持，让用户在离线状态下也能够访问应用。我们可以使用 OfflineFallback 策略来实现离线支持。下面是一个简单的示例：

// javascriptcn.com 代码示例
workbox.routing.registerRoute(
  /\/(.*)/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'my-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60,
      }),
    ],
  })
);

const offlineFallback = new workbox.strategies.NetworkOnly({
  plugins: [
    new workbox.cacheableResponse.CacheableResponsePlugin({
      statuses: [200],
    }),
    new workbox.broadcastUpdate.BroadcastUpdatePlugin(),
    new workbox.backgroundSync.BackgroundSyncPlugin('myQueueName', {
      maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
    }),
  ],
});

const router = new workbox.routing.Router();

router.setDefaultHandler({
  handle: async (args) => {
    try {
      return await workbox.strategies.NetworkFirst().handle(args);
    } catch (error) {
      return offlineFallback.handle(args);
    }
  },
});

self.addEventListener('fetch', (event) => {
  event.respondWith(router.handleRequest(event));
});

上面的代码中，我们使用 NetworkFirst 策略来缓存文件，然后使用 OfflineFallback 策略来实现离线支持。如果用户在离线状态下访问应用，会使用 OfflineFallback 策略来处理请求，如果请求失败，则会返回一个离线页面。

总结

本文介绍了如何使用 Workbox 为 PWA 管理缓存和离线，包括 Workbox 的基本使用、缓存策略、离线支持等内容。Workbox 提供了一套简单易用的 API，让我们能够轻松地管理缓存和离线功能，提高应用的性能和用户体验。如果你正在开发 PWA 应用，那么 Workbox 是一个不错的选择。

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