Service Worker实现缓存案例

1. 注册Service Worker

在你的网页中，通常是在顶级页面，你需要注册Service Worker。这通常在JavaScript中完成，如下所示：

```javascript

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js')

.then(function(registration) {

console.log('Service Worker registered:', registration);

})

.catch(function(error) {

console.error('Service Worker registration failed:', error);

});

});

}

```

上面的代码检查浏览器是否支持Service Worker，然后在页面加载完成后尝试注册名为`sw.js`的服务工作线程。

2. Service Worker 文件 (`sw.js`)

Service Worker 文件是你的缓存逻辑所在。这是一个 JavaScript 文件，它会在注册时由浏览器后台加载并执行。下面是一个简单的 `sw.js` 文件示例：

```javascript

// 定义要缓存的资源列表

const cacheResources = [

'./index.html',

'./styles.css',

'./app.js',

// ... 其他需要缓存的资源

];

// 在install事件中缓存资源

self.addEventListener('install', (event) => {

console.log('Service Worker installing...');

event.waitUntil(

caches.open('my-cache-v1').then((cache) => {

return cache.addAll(cacheResources);

})

);

});

// 在fetch事件中拦截请求并返回缓存的资源

self.addEventListener('fetch', (event) => {

console.log('Fetching:', event.request.url);

event.respondWith(

caches.match(event.request).then((response) => {

// 如果请求在缓存中，则直接返回缓存的响应

if (response) {

return response;

}

// 否则，通过fetch获取资源，并将响应添加到缓存中

return fetch(event.request).then((response) => {

const cache = caches.open('my-cache-v1');

cache.put(event.request, response.clone());

return response;

});

})

);

});

// 在activate事件中清理旧的缓存

self.addEventListener('activate', (event) => {

console.log('Service Worker activating...');

event.waitUntil(

caches.keys().then((cacheNames) => {

return Promise.all(

cacheNames.map((cacheName) => {

if (cacheName.startsWith('my-cache-')) {

return caches.delete(cacheName);

}

})

);

})

);

});

```

在这个例子中，Service Worker 在安装时会打开一个新的缓存存储并添加需要缓存的资源列表。在每次fetch事件发生时，Service Worker 将会拦截请求，首先尝试从缓存中获取资源，如果不存在，则通过fetch获取资源，并将其添加到缓存中。激活时，它还会清理旧的缓存存储。

注意：这个例子假设你的网站支持HTTPS，因为Service Worker功能在多数现代浏览器中要求HTTPS环境。如果你在开发环境中测试，请确保你的开发服务器支持HTTPS或者允许Service Worker的HTTP连接（一些浏览器允许）。

以上就是一个基础的Service Worker实现缓存的案例。你可以根据自己的需求进一步扩展和优化缓存策略。