PWA 如何使用 workbox 打包优化体验及解决卡顿问题？-JavaScript中文网-JavaScript教程资源分享门户

PWA 如何使用 workbox 打包优化体验及解决卡顿问题？

PWA（Progressive Web App）是一种新型的 Web 应用程序，具有类似原生应用程序的用户体验，可以离线工作，并且可以通过安装到设备上的方式让用户方便地访问。然而，PWA 在开发过程中面临着数据缓存、离线状态管理等很多问题。本文将介绍如何使用 workbox 工具解决这些问题，同时提高 PWA 的性能和用户体验。

什么是 workbox

workbox 是一个由 Google 提供的开源 JavaScript 库，它可以用于构建离线优先的 Web 应用程序。workbox 的目标是简化离线应用的开发流程，减少代码复杂度，并提高性能。workbox 可以处理网络请求的路由、缓存、预取、后台同步等问题。

workbox 的核心功能

workbox 主要具有以下三个核心功能：

路由管理：workbox 可以将网络请求路由到不同的处理器，包括网络优先、缓存优先、网络优先但需要更新缓存等等。通过工作箱，您可以创建定制化的路由策略，并灵活地支持强缓存、协商缓存等方式。
缓存管理：workbox 可以为我们处理整个缓存流程，包括缓存策略、命名空间、前缀、缓存版本和有效期等。并且，其缓存策略包括了常见的策略，例如 precache、runtime cache 等等。
后台同步：workbox 可以完成后台同步操作，以处理在浏览器设备不在的情况下，用户的输入或是请求情况。workbox 可以很好地处理后台同步操作，同时还提供了选项可以让我们定制化服务端风格的通信流程。

workbox 的使用方法

接下来，我们将介绍 workbox 工具在 PWA 开发中的使用方法。首先我们需要安装 workbox 工具，你可以通过以下命令进行安装：

npm i workbox-cli --save-dev

安装完成后，我们可以调用 workbox 命令构建一个 workbox 配置文件，例如 service-worker.js，示例代码如下：

importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);

  workbox.routing.registerRoute(
      // Cache image files.
      ({request}) => request.destination === 'image',
      // Use the cache if it's available.
      new workbox.strategies.CacheFirst()
  );

  workbox.routing.registerRoute(
      // Cache CSS files.
      ({request}) => request.destination === 'style',
      // Use cache but update in the background.
      new workbox.strategies.StaleWhileRevalidate({
        // Use a custom cache name.
        cacheName: 'css-cache',
      })
  );

  workbox.routing.registerRoute(
      // Cache JavaScript files.
      ({request}) => request.destination === 'script',
      // Use cache but update in the background.
      new workbox.strategies.StaleWhileRevalidate({
        // Use a custom cache name.
        cacheName: 'js-cache',
      })
  );

  workbox.routing.registerRoute(
      // Cache Font files.
      ({request}) => request.destination === 'font',
      // Use cache but update in the background.
      new workbox.strategies.StaleWhileRevalidate({
        // Use a custom cache name.
        cacheName: 'fonts-cache',
      })
  );
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

workbox 配置文件的核心配置项有 registerRoute 方法和 strategies 策略。

其中registerRoute 方法用于注册路由，它可以用于除了缓存外的其他功能，例如后台同步等，最终返回一个 workbox.Route 对象。

strategies 策略用于指明路由的缓存策略，workbox 自带的几个缓存策略可以满足我们大多数使用场景。

workbox 的打包优化体验解决卡顿问题

接下来我们将在 PWA 开发中使用 workbox 工具来提高体验和解决卡顿问题。

1. 使用 precache 功能

通过 precache 功能，我们可以预缓存指定的资源。当用户访问时，可以直接从缓存中加载。以下是一个 precache 的示例 code：

importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js');

workbox.precaching.precacheAndRoute([
{
    "url": "/",
    "revision": "2"
},
{
    "url": "/favicon.ico",
    "revision": "2"
},
{
    "url": "/images/header.jpg",
    "revision": "2"
},
{
    "url": "/styles/main.css",
    "revision": "2"
},
{
    "url": "/scripts/main.js",
    "revision": "2"
}
]);

Workbox 会自动为 precacheAndRoute 中指定的 URL 生成缓存，一旦启用，我们的 PWA 应用就可以在第一次访问时加载缓存资源，提高应用首屏渲染速度。

2. 预取优化（StaleWhileRevalidate）

当用户打开一个 Web 应用时，应用通常需要加载很多内容才能展示完整的页面，特别是对于资源文件较多的页面。通过预取优化（StaleWhileRevalidate），开发人员可以让网络不太流畅的设备也能获得非常好的体验。

下面的代码演示了如何使用 workbox 的 StaleWhileRevalidate 缓存策略实现轻量级的图片懒加载：

workbox.routing.registerRoute(
        // Cache image files.
        ({request}) => request.destination === 'image',
        // Use the cache if it's available.
        new workbox.strategies.StaleWhileRevalidate({
          // Use a custom cache name.
          cacheName: 'image-cache',
        })
    );

workbox 会使用以上代码将图像缓存到 image-cache 缓存区域，之后会在缓存可用时输出缓存，更新图像时会尝试重新检索。

3. 服务端数据同步（backgroundSync）

PWA 设计时通常编写数据离线，离线状态管理等问题。应用程序需要在浏览器设备离线的情况下，维护应用的状态，确保用户的数据不会丢失。

workbox 提供了一个方法 workbox.backgroundSync.Queue 以及一个 backgroundSync 规则，我们可以使用这个方法尽可能打开通道，传输离线时作业的队列，并在网络重新连接后将它们进行处理。

const bgSyncQueue = new workbox.backgroundSync.Queue('myQueueName');

self.addEventListener('fetch', (event) => {
    if (event.request.method === 'POST') {
        event.respondWith(
            fetch(event.request)
                .catch(
                    () => {
                        return bgSyncQueue.pushRequest({request: event.request});
                    }
                )
        );
    }
});

self.addEventListener('sync', (event) => {
    if (event.tag === 'myQueueName') {
        event.waitUntil(bgSyncQueue.replayRequests());
    }
});

在上面的示例中，myQueueName 用于标识要处理的后台同步队列。我们创建 bgSyncQueue 并通过监听 fetch 事件来处理未成功的 POST 请求，接着我们将请求都放入 queue 中浏览器会自己校验它是否有网络连接，一旦有了网络，它会触发 sync 事件，然后我们通过 replayRequests 方法来重新执行断线时添加到队列的请求。

总结

PWA 已成为 Web 应用发展方向的一个重要组成部分，其核心在于提高用户体验、优化 Web 应用程序。workbox 工具则可以帮助我们更加简单方便地管理 PWA 的缓存策略，提高我们的开发效率和 Web 应用程序的性能表现。不论是使用 workbox 工具对已有的项目进行改造，还是使用 workbox 工具构建全新的 PWA 项目，开发人员都可以通过本文所提供的工具使用和实例代码，轻松实现更快速，更顺畅，更全面的 PWA 开发和使用。

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