Service Worker作为浏览器后台独立线程，常用于实现离线缓存。它必须在HTTPS环境下运行以确保安全性。缓存过程包括注册Service Worker，监听install事件缓存文件，以及在fetch事件中检查并使用缓存。当navigator.serviceWorker可用时，注册sw.js，并在安装事件中将index.html和index.js加入缓存。fetch事件中，如果请求匹配到缓存则直接返回，否则从源获取。
Service Worker
Service Worker 是运⾏在浏览器背后的独⽴线程，⼀般可以⽤来实现缓存功能。使⽤
Service Worker 的话，传输协议必须为 HTTPS 。因为 Service Worker 中涉及到请
求拦截，所以必须使⽤ HTTPS 协议来保障安全
Service Worker 实现缓存功能⼀般分为三个步骤：⾸先需要先注册 Service
Worker ，然后监听到 install 事件以后就可以缓存需要的⽂件，那么在下次⽤户访问
的时候就可以通过拦截请求的⽅式查询是否存在缓存，存在缓存的话就可以直接读取缓存
⽂件，否则就去请求数据。以下是这个步骤的实现：
// index.js
if (navigator.serviceWorker) {
navigator.serviceWorker
.register('sw.js')
.then(function(registration) {
console.log('service worker 注册成功')
})
.catch(function(err) {
console.log('servcie worker 注册失败')
}
// sw.js
// 监听 `install` 事件，回调中缓存所需⽂件
self.addEventListener('install', e => {
e.waitUntil(
caches.open('my-cache').then(function(cache) {
最低0.47元/天 解锁文章
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
