使用 Workbox 优化 PWA 应用的离线访问策略-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA？

PWA 全称是 “Progressive Web Apps”，指的是一组提供了类似于原生应用体验的 Web 应用，它们可以储存在用户设备上，使用起来表现得与传统应用相似。PWA 具有以下特点：

响应式设计：可以自适应不同的屏幕尺寸和设备类型；
离线功能：可以缓存应用所需的资源，即使网络不可用也可以使用应用；
推送通知：可以像原生应用一样发送推送通知，与用户进行互动；
安装体验：可以通过类似于原生应用的方式安装，让用户感受到与 Web 应用不同的用感和魅力。

PWA 这一新兴的 Web 应用开发方式可以让 Web 应用在移动端提供原生应用的使用体验，同时摆脱了需要安装的限制，成为一种更加轻量级的解决方案。PWA 中的离线访问与 App 缓存不同，它能够更灵活地进行资源的缓存，让用户即使在网络不可用的情况下也能够使用 Web 应用。

离线访问资源缓存的问题

PWA 应用通过缓存需要的资源实现离线访问功能，但缓存的策略要如何才能取得最好的效果呢？在实现离线访问的缓存策略时，我们往往需要解决以下问题：

对缓存资源的有效期进行控制；
对缓存策略进行快速调整和配置；
离线访问前根据缓存情况判断是否需要从网络拉取资源。

针对这些问题，我们可以使用 Workbox 的库来解决。Workbox 是 Google 制作的 Web 应用离线资源缓存库，可以基于 service worker 实现一些缓存管理的特殊功能。

如何使用 Workbox

Workbox 以插件式的形式提供多个工具，不同的插件可以用于实现不同的功能。在实现离线访问的缓存策略时，我们可以使用 Workbox 的以下插件：

workbox-cache-expiration

使用 workbox-cache-expiration 插件可以控制缓存资源的有效期，该插件以类似于 HTTP 响应头的方式提供了 maxAgeSeconds 和 maxEntries 参数，分别用于设置缓存过期时间和最大缓存条数：

-- -------------------- ---- -------
------------------------------
  -------------------------------------------
  -------------------------------
    ---------- ---------
    -------- -
      --- ---------------------------
        ----------- ---
        -------------- - - -- - -- - --- -- - ----
      ---
    --
  ---
--

workbox-strategies

使用 workbox-strategies 插件可以实现更丰富的缓存策略，Workbox 提供了常用的缓存策略，包括 cacheFirst、cacheOnly、networkFirst、networkOnly 和 staleWhileRevalidate 等。

// 配置 networkFirst 策略
workbox.routing.registerRoute(
  /.*\/api\/.*$/,
  workbox.strategies.networkFirst(),
);

workbox-routing

Workbox 提供了一个路由功能，可以根据请求路由匹配到相应的缓存策略。

workbox.routing.registerRoute(
  /html$/,
  workbox.strategies.networkFirst({
    cacheName: 'html-cache',
  }),
);

workbox-precaching

使用 workbox-precaching 插件可以在 service worker 安装时缓存静态资源，当注册的 route 匹配到相应的 URL 时，该插件会尝试从应用的缓存中获取已缓存的资源。在应用更新时，Workbox 会自动清理过期的缓存资源，并将新的资源添加到缓存中：

workbox.precaching.precacheAndRoute([
  {url: '/', revision: '1234567890'},
  {url: '/styles/styles.css', revision: '1234567890'},
  {url: '/scripts/app.js', revision: '1234567890'},
], {
  ignoreURLParametersMatching: [/^utm_/],
});

总结

通过在 PWA 应用中使用 Workbox 可以为应用提供更加优秀的离线访问策略，从而更好地为用户提供 Web 应用的体验和服务。通过使用 Workbox 的插件，我们可以灵活控制缓存策略，调整缓存资源的有效期，还可以根据应用更新自动清理过期的资源。同时，通过 Workbox 并不需要修改原有应用代码，完成离线访问的逻辑。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64aaa09848841e98946b7587