最佳 PWA 缓存实践：事实参考及性能演化-JavaScript中文网-JavaScript教程资源分享门户

前言

PWA（Progressive Web App）已经成为前端开发的一个热门话题，它可以让您的 Web 应用程序像本地应用程序一样运行，并且它具有更多优势。离线缓存是 PWA 中非常重要的一部分，因此本文将介绍最佳 PWA 缓存实践事实参考及性能演化。

PWA 离线缓存

离线缓存是将应用程序的资源存储在本地，以便在应用程序没有互联网连接时仍能加载它们。PWA 的离线缓存技术利用 Service Worker API，它是一个独立于当前 Web 页面的 JavaScript 线程，可以缓存和返回数据，控制网络请求并且用于离线状态下的 Web 应用。

在 PWA 中，离线缓存主要包含两个方面：应用程序外壳缓存 和 应用程序内容缓存。

应用程序外壳缓存

应用程序外壳（Shell）是指应用程序基本的 HTML、CSS 和 JavaScript 文件。应用程序外壳缓存包含应用程序的核心代码，它们的更新相对稳定且更少。

在 PWA 中，Service Worker 可以拦截所有 HTTP 请求并缓存它们。这样，所有在浏览器地址栏中输入应用程序 URL 并加载的请求都会被 Service Worker 拦截并向服务端请求资源，如果没有网络连接则从缓存中读取。这使得应用程序可以离线运行，让用户获得更好的用户体验。

以下是一个示例代码：

// www.javascriptcn.com code example
// Service Worker 文件
const CACHE_NAME = 'my-pwa-cache-1';
const urlsToCache = [
  '/',
  '/css/style.css',
  '/js/main.js',
  '/images/icon.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  )
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  )
});

在这个示例中，CACHE_NAME 是缓存名称，而 urlsToCache 数组定义了要缓存的资源列表。在 install 事件中，我们打开缓存并将 URL 列表添加到缓存中。在 fetch 事件中，我们从缓存中读取响应，如果没有可用缓存则利用 fetch 方法请求新的资源并将其添加到缓存中。

应用程序内容缓存

应用程序内容（Content）是指应用程序的所有数据、文本和文件，包括媒体文件、图像和其他数据。应用程序内容缓存包含应用程序的所有数据，并且更新频繁，这需要开发人员实现更强大的缓存策略。

在 PWA 中，我们可以通过 CacheStorage API 来进行内容缓存。在 Service Worker 的 fetch 事件中，我们可以使用缓存策略来管理数据并将它们缓存到 CacheStorage 中。例如，我们可以使用以下代码：

// www.javascriptcn.com code example
self.addEventListener('fetch', event => {
  if (event.request.url.indexOf('/api/') === 0) {
    event.respondWith(
      caches.open('my-content-cache')
        .then(cache =>
          cache.match(event.request)
            .then(response => {
              if (response) {
                return response;
              }

              return fetch(event.request)
                .then(response => {
                  cache.put(event.request, response.clone());
                  return response;
                });
            })
        )
    );
  }
});

在这个示例中，我们在 Service Worker 的 fetch 事件中查找缓存及返回缓存或请求网络并将响应缓存到 CacheStorage 中。这确保了即使在离线状态下，应用程序也可以查看数据。

最佳缓存实践方案

下面是最佳 PWA 缓存实践方案：

1. 定期更新缓存

在 PWA 中，由于 Service Worker 通过拦截所有 HTTP 请求进行缓存，因此应用程序中的缓存可能会很旧而导致性能下降。因此，我们应该定期更新缓存以保持其最新状态。

以下是更新缓存的示例代码：

// www.javascriptcn.com code example
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (CACHE_NAME !== cacheName && cacheName.startsWith('my-pwa-cache')) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

在这个示例中，我们在 Service Worker 的 activate 事件中查找不同的缓存并将它们删除。

2. 缓存资源时需要保证缓存区的空间

在 PWA 中，缓存是通过 Cache Storage API 进行管理的，并且它们占据了设备的存储空间。因此，我们需要确保缓存资源时保证存储空间充足。

以下是缓存资源的示例代码：

// www.javascriptcn.com code example
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(CACHE_NAME).then(cache => {
      return cache.match(event.request).then(response => {
        return (
          response ||
          fetch(event.request).then(response => {
            cache.put(event.request, response.clone());
            return response;
          })
        );
      });
    })
  );
});

在这个示例中，我们使用 caches.open() 打开缓存区并使用 cache.put() 方法将资源添加到缓存区中。如果缓存区已满，则服务工作线程自动删除最早添加的内容。

性能演化历程

PWA 的离线缓存技术不断演化，从刚开始的 App Cache 到 Service Worker，已经取得了很大的进步。下面是 PWA 缓存技术的性能演化历程：

1. App Cache

App Cache 是最早的离线缓存技术，但它存在很多问题，包括缓存策略不稳定、浏览器兼容性差、更新缓慢和不易调试等。

2. Service Worker

Service Worker 是一个更稳定和更先进的离线缓存技术。它可以管理应用程序的离线和在线状态，具有更高可靠性、更实时的更新和更出色的性能等优点。

结语

离线缓存是 PWA 中的重要部分，可以显著提高应用程序的性能。本文介绍了 PWA 离线缓存的两个方面：应用程序外壳缓存和应用程序内容缓存，并提供了最佳 PWA 缓存实践方案，希望能够帮助您更好地构建 PWA 应用程序。

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

最佳 PWA 缓存实践：事实参考及性能演化

前言