前端缓存策略

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 的状态和缓存内容。
//断开网络连接：在断开网络连接后，刷新页面以测试离线功能是否正常工作。