PWA 架构 (二)：如何构建 PWA 离线应用缓存策略！-JavaScript中文网-JavaScript教程资源分享门户

在前一篇文章中，我们简要介绍了 PWA 架构的概念和特点。其中，离线缓存是 PWA 架构的一个重要特点之一，也是让 PWA 应用能够实现类似原生应用的体验的重要因素之一。

在本文中，我们将深入探讨如何构建 PWA 离线应用的缓存策略。具体地，我们将讨论以下几个方面：

PWA 离线缓存的基本原理
PWA 离线缓存的实现方法与操作流程
PWA 离线缓存的应用场景和注意事项

PWA 离线缓存的基本原理

PWA 离线缓存的基本原理可以归纳为以下几个方面：

Service Worker：Service Worker 是一个在后台运行的脚本，它可以拦截网络请求和响应，从而实现离线缓存的功能。
Cache Storage：Cache Storage 是浏览器自带的缓存存储机制，它可以存储静态资源，如 HTML、CSS、JavaScript、图片等。
Manifest：Manifest 是一个 JSON 文件，它可以告诉浏览器应该缓存哪些资源、如何展示应用的名称、图标、主题等信息。

基于以上三个方面，我们可以实现离线应用的缓存功能。

PWA 离线缓存的实现方法与操作流程

在深入探讨 PWA 离线缓存的实现方法和操作流程之前，我们需要先了解两个概念：预缓存和实时缓存。

预缓存：指在应用安装阶段，将资源缓存到 Cache Storage 中，以便离线使用。
实时缓存：指在应用运行时，将请求到的资源缓存到 Cache Storage 中，以便离线使用。

实现 PWA 离线缓存，需要遵循以下几个步骤：

在主 js 文件中注册 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);
    });
  });
}

编写 Service Worker

在 sw.js 文件中编写 Service Worker，如下所示：

// javascriptcn.com 代码示例
// 安装阶段跳过等待，直接进入 active 阶段
self.addEventListener('install', function(event) {
  event.waitUntil(self.skipWaiting());
});

// 激活后删除旧版本
self.addEventListener('activate', function(event) {
  event.waitUntil(
    Promise.all([
      self.clients.claim(),
      caches.keys().then(function(cacheNames) {
        return Promise.all(
          cacheNames.filter(function(name) {
            return name !== CACHE_NAME;
          }).map(function(name) {
            return caches.delete(name);
          })
        );
      })
    ])
  );
});

// 拦截网络请求
self.addEventListener('fetch', function(event) {
  var url = event.request.url;
  if (url.indexOf('/api/') === -1 && url.indexOf('/static/') !== -1) {
    // 预缓存资源
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
  } else {
    // 实时缓存资源
    event.respondWith(
      caches.open('dynamic').then(function(cache) {
        return fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        });
      })
    );
  }
});

编写 Manifest 文件

在 index.html 文件的 head 中添加 link 标签引入 Manifest 文件，如下所示：

<link rel="manifest" href="/manifest.json">

在 manifest.json 文件中定义需要缓存的资源和应用信息，如下所示：

// javascriptcn.com 代码示例
{
  "name": "PWA Demo",
  "short_name": "PWA",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "scope": "/"
}

在以上三个步骤完成后，我们便可以实现 PWA 离线应用的缓存功能了。

PWA 离线缓存的应用场景和注意事项

在应用 PWA 离线应用的缓存功能时，需要考虑以下几个应用场景和注意事项：

大文件不应缓存

如果请求的资源体积非常大，那么将它缓存到本地存储中，可能会导致用户手机存储空间紧张，甚至挂掉应用。因此，对于大文件，应该考虑实时缓存或不缓存。

缓存策略应该具有时效性

对于一些需要频繁更新的动态资源，如新闻、商品信息等，应该使用动态缓存策略，并且缓存策略应该具有时效性，及时刷新缓存。

版本更新后应该清除旧版本缓存

当应用发生版本更新后，旧版本的缓存可能无法满足新版本的需求，甚至会导致应用异常。因此，应该在新版本注册 Service Worker 后，清除旧版本的缓存。

对于需要登录验证的资源，应该及时更新缓存

如果用户切换登录账号，那么之前的缓存数据可能已经失效了，因此需要及时更新缓存。

离线状态下，应该友好提示用户

当用户处于离线状态时，应该友好地提示用户，告知用户当前的状态，并且可以提供一些离线模式下的体验，比如缓存过往内容、提供游戏娱乐等。

总结

本文详细介绍了 PWA 离线缓存的构建方法和注意事项，通过以下几个方面的思考和实践，我们可以增强用户的应用体验和产品的竞争力。

缓存策略应该合理，具有时效性；
对于动态资源应有灵活的缓存策略；
在更新版本后，要及时清除旧版本的缓存；
离线状态下，应该友好地提示用户，提供离线模式下的体验。

希望以上内容能为正在学习 PWA 架构的前端工程师们提供帮助，也能为开发 PWA 应用的前端团队们提供一些指导和思路。

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