PWA：Service Worker 上的缓存策略-JavaScript中文网-JavaScript教程资源分享门户

PWA：Service Worker 上的缓存策略

正文

PWA（Progressive Web App，渐进式 Web 应用）可以让 Web 应用变得更像原生应用，具有离线缓存、推送通知等功能。其中，离线缓存功能是 PWA 中最为核心和重要的功能之一，而离线缓存的实现依赖于 Service Worker。本文将详细介绍 Service Worker 上的缓存策略，并给出相关的示例代码，希望对想要学习 PWA 开发的开发者有所帮助。

Service Worker 上的缓存策略

Service Worker 是一种特殊的 JavaScript Worker，它能够拦截和处理浏览器向服务器发起的 HTTP 请求。通过 Service Worker，我们可以实现离线缓存、请求代理、网络优化等功能。

在 Service Worker 中，我们可以定义缓存策略，即在请求网络资源时优先从缓存中获取，如果缓存中没有该资源或缓存过期，则从网络中获取。Service Worker 中的缓存策略是基于 Cache API。Cache API 提供了一种能够通过请求与响应进行缓存的方法。

Cache API 中的缓存是由一个名为 Cache 的存储对象组成。我们可以通过 CacheStorage.open() 方法打开一个 Cache 对象并添加、读取和删除相应的缓存。Cache API 提供了如下的方法：

caches.open(cacheName)：打开指定名称的 Cache 对象，并返回一个 Promise 对象。
cache.addAll(requests)：添加多个请求到当前 Cache 对象中，并返回一个 Promise 对象。如果其中任何一个请求失败了，整个缓存将会失败。
cache.add(request)：添加一个请求到当前 Cache 对象中，并返回一个 Promise 对象。
cache.match(request, options)：搜索 Cache 中匹配的资源，并返回一个 Promise 对象。
cache.matchAll(request, options)：搜索 Cache 中所有匹配的资源，并返回一个 Promise 对象。
cache.delete(request, options)：删除 Cache 中指定匹配的资源，并返回一个 Promise 对象。
cache.keys(request, options)：返回所有在 Cache 中已经缓存了的 Request 对象的数组。

下面是一个简单的缓存策略示例代码：

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { if (response) { return response; }

// www.javascriptcn.com code example
  var request = event.request.clone();

  return fetch(request).then(function(response) {
    if (!response || response.status !== 200 || response.type !== 'basic') {
      return response;
    }

    var responseToCache = response.clone();

    caches.open('my-cache').then(function(cache) {
      cache.put(event.request, responseToCache);
    });

    return response;
  });
})

); });

详细解释如下：

self.addEventListener('fetch', function(event)：注册一个 Fetch 事件监听器。
caches.match(event.request).then(function(response)：首先，尝试从缓存中读取请求的资源。
var request = event.request.clone()：拷贝一份原始请求，因为请求是只能被使用一次的。
return fetch(request).then(function(response)：如果请求返回了一个资源，那么将其缓存起来。这里使用了 fetch API 来请求资源，fetch API 可以返回一个 Promise 对象，如果客户端离线了，fetch API 会抛出一个错误。
if (!response || response.status !== 200 || response.type !== 'basic')：判断资源是否能够正常响应，如果不能，则直接返回。
var responseToCache = response.clone()：拷贝一份响应对象，因为响应也是只能被使用一次的。
caches.open('my-cache').then(function(cache)：打开一个名为 my-cache 的缓存对象。
cache.put(event.request, responseToCache)：将请求与响应添加到缓存中。

这些代码实现了一个基础的缓存策略，即重用已经缓存的数据，当缓存中没有数据时，从网络获取。此时将获取到的数据加入到缓存中。

指导意义

本文介绍了 Service Worker 上的缓存策略，并给出了相应的示例代码。通过 Service Worker，我们可以自定义缓存策略，提高网站的速度和性能，更好地满足用户的需求。对于想要学习 PWA 开发的开发者来说，本文可以作为一个很好的参考。

结语

本文简单介绍了 PWA 中最核心的功能之一：离线缓存，及其依赖的 Service Worker 上的缓存策略。希望对想要学习 PWA 开发的开发者提供一些帮助。

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

PWA：Service Worker 上的缓存策略

接着读