serviceWork.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./main.css">
<title>servie worker </title>
</head>
<body>
<div class="container">
service worker
</div>
</body>
<script src="./app.js"></script>
</html>app.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./service-worker.js', {scope: './'})
.then((req) => {
console.log(req)
})
.catch(e => {
console.log(e)
})
} else {
alert('not support serviceWorker')
}service-work.js
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open('app-v1')
.then(cache => {
console.log('open cache')
return cache.addAll([
'./app.js',
'./main.css',
'./serviceWork.html'
])
})
)
})
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(res => {
if (res) {
return res
} else {
// 如果没有缓存，用fetch方法从网络上获取资源
fetch(url).then(res => {
if (res) {
//对于新请求的资源缓存到cachestorage中
} else {
//提示
}
})
}
})
)
})main.css
.container{
color: red;
}流程就是注册serviceWorker，指定它的工作范围。以及在serviceworker文件中监听生命周期事件，在worker安装与激活之间，存储文件到缓存
然后通过监听fetch事件，拦截worker管理的文件下的所有请求，如果匹配到缓存，返回。没有，再向服务器发送请求，再将新请求的资源做缓存
总的来说，serviceWorker就像一个代理服务器，只不过必须在https下进行