PWA 开发中使用 Workbox 实现更好的缓存管理的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA

PWA（Progressive Web App）是一种新型的移动应用程序解决方案，它提供了一系列类似原生应用程序的功能，例如可离线访问、桌面通知、本地存储和快速启动等。PWA 不仅在移动端应用程序中得到广泛使用，而且还在桌面和平板电脑设备上的 Web 应用程序中得到广泛使用。PWA 将 Web 应用程序的性能和用户体验提升到一个全新的水平。

什么是 Workbox

Workbox 是 Google 开发的 PWA 开发库，用于更好地管理 PWA 的缓存。Workbox 基于 Service Worker，提供了易于使用的 API，以实现高效且强大的缓存管理策略。这使得 PWA 开发者可以使用 Workbox 轻松地实现离线访问、网络选项、预缓存、按需缓存等功能。

Workbox 最佳实践

1. 注册 Service Worker

Workbox 需要通过 Service Worker 来实现缓存功能。因此，在 PWA 的代码中，必须先注册 Service Worker。以下是注册 Service Worker 的示例代码：

// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // 注册成功
    }, function(err) {
      // 注册失败
    });
  });
}

2. 预缓存

预缓存是一种常见的缓存优化策略，它通过在 Service Worker 安装期间缓存文件来加快应用程序的加载速度。Workbox 提供了一个易于使用的 precacheAndRoute 方法，该方法可以用于预缓存应用程序的所有静态资源。以下是使用 precacheAndRoute 方法的示例代码：

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

workbox.precaching.precacheAndRoute([
  '/index.html',
  '/css/style.css',
  '/js/app.js',
  '/images/logo.png'
]);

在上面的代码中，我们使用 workbox.precaching.precacheAndRoute 方法预缓存了主页、样式表、JavaScript 文件和图像。通过预缓存的方式来管理缓存，可以确保应用程序在离线状态下仍然可以正常工作。

3. 按需缓存

按需缓存是另一种常见的缓存优化策略，它可以帮助应用程序更快地加载图片、音频、视频等资源。Workbox 提供了一个 cacheFirst 方法，该方法可以使用缓存版本提供资源，如果缓存中没有则使用网络。以下是使用 cacheFirst 方法的示例代码：

// javascriptcn.com 代码示例
workbox.routing.registerRoute(
  new RegExp('.png|.jpg|.jpeg|.gif'),
  new workbox.strategies.CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60,
      }),
    ],
  })
);

在上面的代码中，我们使用 workbox.routing.registerRoute 方法来注册资源路由，该路由将所有以 .jpg、.png、.jpeg 和 .gif 结尾的资源添加到缓存中，并使用 CacheFirst 策略返回资源。此外，CacheableResponsePlugin 插件在应答正常时将响应添加到缓存中，并设置 maxAgeSeconds 插件来控制缓存的最大生命周期。

4. 管理缓存清除

使用 Workbox 可以轻松地管理缓存清除，以确保缓存不会影响应用程序的性能。Workbox 提供了 ExpirationPlugin 和 CacheExpiration 类来管理缓存清除。以下是使用 ExpirationPlugin 的示例代码：

// javascriptcn.com 代码示例
workbox.routing.registerRoute(
  new RegExp('/api/.*'),
  new workbox.strategies.NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 60,
        purgeOnQuotaError: true
      }),
    ],
  })
);

在上面的代码中，我们使用 workbox.expiration.ExpirationPlugin 插件来管理 API 缓存清除。maxEntries 属性控制缓存的最大条目数，maxAgeSeconds 属性控制缓存的最大生命周期。如果缓存超过这些限制，Workbox 将通过 purgeOnQuotaError 属性控制缓存空间的使用。

总结

Workbox 是一个非常有用的库，其提供了易于使用的 API 来管理 PWA 缓存。通过预缓存、按需缓存和管理缓存清除，可以提高 PWA 应用程序的性能和用户体验。在开发 PWA 应用程序时，使用 Workbox 库可以提高开发效率并提高代码质量。

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