PWA 如何利用 Workbox 进行开发？-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA？

PWA（Progressive Web App）是一种新型的 Web 应用程序开发模式，它结合了 Web 和原生应用的优点，可以在桌面和移动设备上提供类似于原生应用的用户体验。PWA 具有以下特点：

响应式设计，可以适应不同的设备和屏幕尺寸；
离线访问，即使没有网络连接也可以使用；
快速加载，可以在几秒钟内加载并显示内容；
可以添加到主屏幕，像原生应用一样启动。

什么是 Workbox？

Workbox 是 Google 推出的一款 PWA 应用程序开发工具包，它提供了一系列的库和工具，可以帮助开发者更轻松地构建 PWA 应用程序。Workbox 的主要功能包括：

缓存管理，可以实现离线访问和快速加载；
路由管理，可以实现 URL 路由和页面跳转；
资源管理，可以实现资源预加载和懒加载；
后台同步，可以实现后台数据同步和离线提交。

如何使用 Workbox？

下面我们来详细介绍如何使用 Workbox 开发 PWA 应用程序。

安装 Workbox

首先需要安装 Workbox，可以通过 npm 包管理工具进行安装：

npm install workbox-cli --global

创建 Workbox 配置文件

在项目根目录下创建一个名为 workbox-config.js 的配置文件，该文件用于配置 Workbox 的相关参数：

// javascriptcn.com 代码示例
module.exports = {
  globDirectory: "public/",
  globPatterns: [
    "**/*.{html,css,js,png,jpg,gif,json}"
  ],
  swDest: "public/sw.js",
  clientsClaim: true,
  skipWaiting: true,
  runtimeCaching: [
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
      handler: "CacheFirst",
      options: {
        cacheName: "images",
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 60 * 60 * 24 * 30
        }
      }
    }
  ]
};

上面的配置文件中，globDirectory 指定了需要缓存的文件所在的目录，globPatterns 指定了需要缓存的文件类型，swDest 指定了生成的 Service Worker 文件的路径，clientsClaim 和 skipWaiting 分别表示是否立即激活新的 Service Worker 和是否跳过等待阶段，runtimeCaching 是一个数组，用于配置运行时缓存策略。

生成 Service Worker 文件

在项目根目录下执行以下命令，即可生成 Service Worker 文件：

workbox generateSW workbox-config.js

执行该命令后，会在项目根目录下生成一个名为 sw.js 的 Service Worker 文件，该文件包含了缓存管理、路由管理、资源管理和后台同步等功能。

注册 Service Worker 文件

在应用程序的入口文件中，通过以下代码注册 Service Worker 文件：

// javascriptcn.com 代码示例
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker.register("/sw.js").then(function(registration) {
      console.log("ServiceWorker registration successful with scope: ", registration.scope);
    }, function(err) {
      console.log("ServiceWorker registration failed: ", err);
    });
  });
}

上面的代码中，navigator.serviceWorker.register() 方法用于注册 Service Worker 文件，registration.scope 属性用于获取 Service Worker 的作用域。

使用 Workbox 缓存管理

在 Service Worker 文件中，可以通过 Workbox 的缓存管理 API 实现离线访问和快速加载。

预缓存页面

在 Service Worker 文件中，通过 Workbox 的 precacheAndRoute() 方法可以实现页面的预缓存：

workbox.precaching.precacheAndRoute([
  { url: "/", revision: "1" },
  { url: "/index.html", revision: "1" },
  { url: "/about.html", revision: "1" }
]);

上面的代码中，workbox.precaching.precacheAndRoute() 方法用于预缓存页面，其中的数组中包含了需要预缓存的页面的 URL 和版本号。

运行时缓存策略

在 Service Worker 文件中，通过 Workbox 的 registerRoute() 方法可以配置运行时缓存策略：

// javascriptcn.com 代码示例
workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  workbox.strategies.cacheFirst({
    cacheName: "images",
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 60 * 60 * 24 * 30
      })
    ]
  })
);

上面的代码中，workbox.routing.registerRoute() 方法用于配置 URL 路由和缓存策略，其中的正则表达式用于匹配需要缓存的资源，workbox.strategies.cacheFirst() 方法用于指定缓存策略，workbox.expiration.Plugin() 用于配置缓存的过期时间和最大数量。

使用 Workbox 路由管理

在 Service Worker 文件中，可以通过 Workbox 的路由管理 API 实现 URL 路由和页面跳转。

URL 路由

在 Service Worker 文件中，通过 Workbox 的 registerRoute() 方法可以实现 URL 路由：

workbox.routing.registerRoute(
  /\/blog\/(.*)/,
  workbox.strategies.networkFirst()
);

上面的代码中，/\/blog\/(.*)/ 匹配了所有以 /blog/ 开头的 URL，workbox.strategies.networkFirst() 方法用于指定缓存策略。

页面跳转

在 Service Worker 文件中，通过 Workbox 的 setCatchHandler() 方法可以实现页面跳转：

workbox.routing.setCatchHandler(function({ event }) {
  switch (event.request.destination) {
    case "document":
      return caches.match("/offline.html");
  }
});

上面的代码中，workbox.routing.setCatchHandler() 方法用于设置全局的错误处理程序，当页面请求失败时，会跳转到 /offline.html 页面。

使用 Workbox 资源管理

在 Service Worker 文件中，可以通过 Workbox 的资源管理 API 实现资源预加载和懒加载。

资源预加载

在页面中，通过 Workbox 的 precacheAndRoute() 方法可以实现资源的预加载：

workbox.precaching.precacheAndRoute([
  { url: "/styles.css", revision: "1" },
  { url: "/main.js", revision: "1" }
]);

上面的代码中，workbox.precaching.precacheAndRoute() 方法用于预加载资源，其中的数组中包含了需要预加载的资源的 URL 和版本号。

资源懒加载

在页面中，通过 Workbox 的 loadModule() 方法可以实现资源的懒加载：

// javascriptcn.com 代码示例
if ("IntersectionObserver" in window) {
  const lazyImages = document.querySelectorAll("img.lazy");
  const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        const lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src;
        lazyImage.classList.remove("lazy");
        lazyImageObserver.unobserve(lazyImage);
      }
    });
  });
  lazyImages.forEach(function(lazyImage) {
    lazyImageObserver.observe(lazyImage);
  });
} else {
  const lazyImages = document.querySelectorAll("img.lazy");
  lazyImages.forEach(function(lazyImage) {
    lazyImage.src = lazyImage.dataset.src;
    lazyImage.classList.remove("lazy");
  });
}

上面的代码中，IntersectionObserver 用于判断图片是否可见，loadModule() 方法用于加载 Workbox 模块，lazyImages 是一个包含所有需要懒加载的图片的数组，lazyImageObserver 是一个 IntersectionObserver 对象，用于观察图片是否可见。当图片可见时，会将图片的 src 属性设置为 data-src 属性的值，从而实现图片的懒加载。

总结

本文介绍了如何使用 Workbox 开发 PWA 应用程序，包括如何安装 Workbox、创建配置文件、生成 Service Worker 文件、注册 Service Worker 文件、使用缓存管理、路由管理和资源管理等功能。通过使用 Workbox，可以更轻松地构建高质量的 PWA 应用程序，提升用户体验和应用程序的可靠性。

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