PWA 实用工具：workbox 详解

介绍

Progressive Web Apps（PWA）是一种新颖的 Web 应用程序类型，它与移动应用程序十分相似，通常可以通过浏览器访问。但是，与传统的 Web 应用程序相比，PWA 更具备离线可用性、响应速度快、可安装性等特点，这与移动应用程序十分相似。

实现 PWA 需要一些技术，在此过程中，Workbox 是一个特别有用的工具。Workbox 可以帮助我们简化离线、缓存和预取策略的编写过程，以便为用户提供流畅的体验。

工作原理

Workbox 是一个用于服务端 JavaScript 的库，可以创建高效的、现代化的离线 Web 应用程序。它基于 Service Worker 构建，并提供一组工具和库，帮助开发人员轻松地管理缓存和响应策略。具体来说，Workbox 通过 Service Worker 实现离线可用性和自定义的缓存策略。

使用方法

Workbox 提供了一些工具来生成 Service Worker 来管理缓存和响应策略，例如 Workbox CLI、Workbox-webpack-plugin 等。这里介绍一下使用 Workbox-cli 来生成 Service Worker 的过程。

首先，先安装 Workbox-cli：

$ npm install workbox-cli --save-dev

然后，在项目根目录创建一个名为 sw.js 的文件，然后运行以下命令：

$ workbox wizard

这会启动一个向导式的工具，协助你创建 Service Worker 配置文件。它会要求你选择一组缓存策略见如下图片。

之后，Workbox wizar 工具会生成一个配置文件并放置到你项目的根目录。我们需要把它和我们的 Service Worker 文件连接起来，这可以通过在 Service Worker 文件中导入和使用 Workbox 提供的方法完成。下面是一些示例代码，在 Service Worker 文件中：

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

if (workbox) {
    console.log('Workbox load successfully!');
} else {
    console.log('Workbox did not load!');
}

workbox.setConfig({
    debug: true,
});

这里我们先导入了 Workbox 的库，接着判断它是否成功加载。最后，我们使用了 Workbox 的 setConfig 方法来设置调试模式选项。

离线模式

Workbox 通过缓存来实现离线模式。在 Service Worker 中，要缓存一些资源，可以使用 Workbox 提供的 cache 方法。

下面是一个将 JavaScript 文件缓存到 cache 中的示例：

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

const CACHE_NAME = 'my-web-app-cache';

workbox.routing.registerRoute(
  new RegExp('https://example.com/scripts/'),
  workbox.strategies.cacheFirst({
    cacheName: CACHE_NAME,
  })
);

这里我们使用 Workbox 提供的strategies对象的cacheFirst方法，以便将已请求的资源存储到 Cache Storage 中。

页面缓存

Workbox 还可以通过预缓存页面的方式使其响应速度更快。在 Service Worker 中，可以使用 Workbox 提供的 precache 和 routing 方法来完成。

下面是一个预缓存两个 HTML 页面的示例：

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

const CACHE_NAME = 'my-web-app-cache';

workbox.precaching.precacheAndRoute([{
    url: '/index.html',
    revision: '87654321'
}, {
    url: '/about.html',
    revision: '12345678'
}]);

workbox.routing.registerRoute(
    /.*\.(?:png|jpg|jpeg|svg|gif)/,
    workbox.strategies.cacheFirst({
        cacheName: CACHE_NAME + '-images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                maxAgeSeconds: 60 * 60 * 24 * 30,
            })
        ],
    })
);

这里我们将两个页面直接缓存，并使用了 Workbox 提供的workbox.expiration.Plugin插件来设置缓存项的最大存储时间和数量。

总结

Workbox 是一个便捷的工具，能够大幅简化实现离线、缓存和预取策略的编写过程，以便为用户提供更好的流畅体验。在 PWA 实现过程中，Workbox 是一个特别实用而且必需的工具。通过本文的介绍和示例代码，希望大家能够更好地掌握和应用 Workbox。

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