如何使用 CacheStorage 实现离线缓存

注册Service Worker

• 首先，要在网页中注册Service Worker。Service Worker是一种在后台运行的脚本，它可以拦截和处理网络请求，是实现离线缓存的关键。在网页的JavaScript代码中，可以使用以下方式注册：

  if ('serviceWorker' in navigator) {
         
    navigator.serviceWorker.register('service - worker.js')
      .then(function (registration) {
         
            console.log('Service Worker注册成功');
        })
      .catch(function (error) {
         
            console.log('Service Worker注册失败：', error);
        });
  }
  

• 上述代码检查浏览器是否支持Service Worker，如果支持，则注册一个名为service - worker.js的Service Worker脚本。这个脚本将在后台运行，用于处理缓存相关的操作。

在Service Worker中缓存资源

• 在service - worker.js文件中，需要使用CacheStorage来缓存资源。首先，在Service Worker的install事件中添加缓存逻辑。install事件在Service Worker安装时触发，是一个很好的时机来预先缓存一些关键资源。

  self.addEventListener('install', function (event) {
         
    event.waitUntil(
        caches.open('my - cache - name')
          .then(function (cache) {
         
                return cache.addAll([
                    // 替换为你的实际资源路径
                    '/',
                    '/index.html',
                    '/styles.css',
                    '/script.js',
                    '/images/logo.png'
                ]);
            })
    );
  });
  

• 这里，caches.open('my - cache - name')打开一个名为my - cache - name的缓存，然后cache.addAll()方法将一组资源添加到缓存中。这些资源可以是HTML文件、CSS文件、JavaScript文件、图片等。需要注意的是，资源路径是相对于网站根目录的。

拦截网络请求并返回缓存内容

• 在Service Worker的fetch事件中，可以拦截网页发出的网络请求，并尝试从缓存中返回内容。如果缓存中没有请求的资源，再从网络获取。

  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;
                    });
                });
            })
    );
  });
  

• 上述代码首先尝试从缓存（my - cache - name）中查找与请求（event.request）匹配的响应。如果找到响应（response），则直接返回缓存中的内容。如果缓存中没有找到，就使用fetch方法从网络获取资源。获取到资源后，将资源放入缓存（cache.put()），这样下次请求相同资源时就可以直接从缓存中获取，最后返回从网络获取的资源。

更新缓存策略（可选）

• 可以采用一些策略来更新缓存内容，以确保用户获取到最新的资源。一种简单的方法是在fetch事件中检查资源是否有更新，然后更新缓存。例如，可以通过检查响应头中的版本信息或者时间戳来判断。

  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) {
         
                        // 检查资源是否有更新，这里假设响应头中有version字段
                        const newResponse = await fetch(event.request);
                        const oldVersion = response.headers.get('version');
                        const newVersion = newResponse.headers.get('version');
                        if (newVersion > oldVersion) {
         
                            cache.put(event.request, newResponse.clone());
                            return newResponse;
                        } else {
         
                            return response;
                        }
                    }
                    return fetch(event.request).then(function (response) {
         
                        cache.put(event.request, response.clone());
                        return response;
                    });
                });
            })
    );
  });
  

• 这里假设响应头中有一个version字段用于表示资源的版本。当缓存中有资源，且从网络获取的新资源版本更高时，更新缓存并返回新资源；否则返回缓存中的旧资源。如果缓存中没有资源，就从网络获取并放入缓存。