在 Service Worker 中配置缓存策略

缓存优先策略（Cache - First）

• 策略描述：
  • 这种策略优先从缓存中获取资源。当Service Worker拦截到一个请求时，首先尝试从缓存中查找对应的资源。如果缓存中有匹配的资源，就直接返回缓存中的内容，而不向网络发送请求。只有在缓存中找不到资源时，才会向网络请求资源，并在获取到资源后将其存入缓存，以便下次使用。
• 代码实现示例：

  self.addEventListener('fetch', function (event) {
         
      event.respondWith(
          caches.open('my - cache - name')
           .then(function (cache) {
         
                  return cache.match(event.request).then(function (response) {
         
                      if (response) {
         
                          return response;
                      }
                      return fetch(event.request).then(function (response) {
         
                          cache.put(event.request, response.clone());
                          return response;
                      });
                  });
              })
      );
  });
  

  • 在这个示例中，cache.match(event.request)用于在缓存中查找与请求event.request匹配的资源。如果找到（response存在），就直接返回缓存中的资源。如果缓存中没有找到，就使用fetch(event.request)从网络获取资源，然后使用cache.put(event.request, response.clone())将获取到的资源存入缓存，最后返回从网络获取的资源。

网络优先策略（Network - First）

• 策略描述：
  • 网络优先策略则是首先尝试从网络获取资源。当Service Worker拦截到请求时，会立即向网络发送请求获取资源。如果网络请求成功，就将获取到的资源存入缓存（用于下次请求），并返回给页面。如果网络请求失败（例如，网络不可用或者服务器无响应），才会尝试从缓存中获取资源作为备用方案。这种策略适用于对资源实时性要求较高的情况，如获取实时数据或经常更新的内容。
• 代码实现示例：

  self.addEventListener('fetch', function (event) {
         
      event.respondWith(
          fetch(event.request)
           .then(function (response) {
         
                  caches.open('my - cache - name').then(function (cache) {
         
                      cache.put(event.request, response.clone());
                  });
                  return response;
              })
           .catch(function () {
         
                  return caches.open('my - cache - name')
                   .then(function (cache) {
         
                          return cache.match(event.request);
                      });
              })
      );
  });
  

  • 在这里，首先使用fetch(event.request)尝试从网络获取资源。如果成功获取（then分支），就将资源存入缓存，并返回给页面。如果网络请求失败（catch分支），就尝试从缓存中获取资源，通过caches.open('my - cache - name').then(function (cache) { return cache.match(event.request); })实现。

仅缓存策略（Cache - Only）

• 策略描述：
  • 仅缓存策略只从缓存中获取资源，从不向网络发送请求。这种策略适用于那些已经预先缓存好并且不需要更新的资源，或者在离线状态下也必须提供的资源，如网站的离线页面或者某些固定的图标。
• 代码实现示例：

  self.addEventListener('fetch', function (event) {
         
      event.respondWith(
          caches.open('my - cache - name')
           .then(function (cache) {
         
                  return cache.match(event.request);
              })
      );
  });
  

  • 此代码简单地尝试从缓存（my - cache - name）中查找与请求匹配的资源，没有网络请求的部分。如果缓存中没有找到资源，就会返回undefined，这可能导致页面上某些资源无法加载。

仅网络策略（Network - Only）

• 策略描述：
  • 仅网络策略始终从网络获取资源，不会使用缓存。这种策略适用于一些不适合缓存或者必须实时获取最新内容的资源，如某些安全敏感的操作或者动态生成的内容，每次都需要从服务器获取最新的指令或数据。
• 代码实现示例：

  self.addEventListener('fetch', function (event) {
         
      event.respondWith(fetch(event.request));
  });
  

  • 代码直接使用fetch(event.request)从网络获取资源，忽略缓存的存在。

缓存与网络并行策略（Stale - While - Revalidate）

• 策略描述：
  • 缓存与网络并行策略会同时从缓存和网络获取资源。首先快速返回缓存中的资源给页面，让页面可以先使用旧的内容进行展示。与此同时，向网络发送请求获取最新的资源。当网络请求成功获取到更新后的资源后，更新缓存。这种策略可以在保证页面快速响应的同时，也能及时更新内容。
• 代码实现示例：

  self.addEventListener('fetch', function (event) {
         
      event.respondWith(
          caches.open('my - cache - name')
           .then(function (cache) {
         
                  return cache.match(event.request).then(function (cachedResponse) {
         
                      const fetchedResponse = fetch(event.request).then(function (response) {
         
                          cache.put(event.request, response.clone());
                          return response;
                      });
                      return cachedResponse || fetchedResponse;
                  });
              })
      );
  });
  

  • 代码先从缓存中查找资源（cache.match(event.request)），如果有缓存资源（cachedResponse），就先返回缓存资源，同时发起网络请求（fetch(event.request)）获取最新资源并更新缓存。如果没有缓存资源，就直接等待网络请求的结果。