前端缓存策略

Service Worker （https)

使用 Service Worker 可以实现离线功能和缓存策略，使你的 Web 应用在没有网络连接时也能正常运行。下面是一个详细的步骤和示例代码，展示如何使用 Service Worker 实现这一功能。

步骤

• 注册 Service Worker
• 安装 Service Worker
• 缓存静态资源
• 拦截网络请求并提供缓存响应
• 更新缓存

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/image.jpg'
];

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

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response; // 返回缓存中的资源
        }
        return fetch(event.request); // 请求网络资源
      })
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});
//确保你的服务器使用 HTTPS：Service Worker 只能在 HTTPS 环境下运行，或在 localhost 上测试。
//在浏览器中打开你的应用：在开发者工具的“应用程序”标签页中查看 Service Worker 的状态和缓存内容。
//断开网络连接：在断开网络连接后，刷新页面以测试离线功能是否正常工作。