Service Worker
Promise
fetch
cache API
Notification API
Service Worker服务工作线程
index.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">
<title>Learn PWA</title>
</head>
<body>
<h1>来了,老弟</h1>
<script>
// 注册ServerWorker,
// ServerWorker有两个参数 参数一:外部脚本的地址 参数二:选项对象,其中 scope 代表可控制页面的路径,默认当前路径,根路径代表控制所有页面
navigator.serviceWorker.register('./sw.js',{scope:'/'})
// 返回一个Promise对象
.then(res => {
console.log('====================================');
console.log(res);
console.log('====================================');
},
err => {
console.error(err)
})
</script>
</body>
</html>
sw.js脚本文件
// ServerWorker中不能访问Dom, window,loaction等上下文对象
// 可以访问self,代表这个ServerWorker的全局作用域对象
// ServerWorker的生命周期,install、activate、fetch
self.addEventListener('install',event => {
console.log('====================================');
console.log('install', event);
console.log('====================================');
// event.waitUntil事件执行后才会执行 后面的周期
// self.skipWaiting()强制停止旧的ServerWorker,开启新的ServerWorker
event.waitUntil(self.skipWaiting())
})
self.addEventListener('activate',event => {
console.log("====================================");
console.log("activate", event);
console.log("====================================");
// self.clients.claim() 指ServerWorker控制的所有页面,能够让页面在首次加载后能够让页面同样受到ServerWorker的控制
// 默认情况下,首次不受控制
event.waitUntil(self.clients.claim())
})
self.addEventListener('fetch',event => {
console.log("====================================");
console.log("fetch", event);
console.log("====================================");
})