涉及技术：
- Web App Manifest
- Service Worker
- CacheStorage
- WebWorker
- Push&Notification 推送与通知
- Background Sync 后台同步
- 响应式设计
最好的教程 Google 官网 和 MDN。
一、准备
无论是 web Worker 还是 server Worker 都是不能打开本机的文件系统（file://），必须通过网络才能访问，所以需要先准备一个本地服务器。这里就直接使用 http-server 这个 npm 依赖包来完成了。
先安装：
npm init -y
npm i -D http-server
在去更改 package.json 文件：
"scripts": {
"server": "http-server"
},
启动服务：
npm run server
控制台输出结果为：
C:\Users\hpzhan\Desktop\PWA>npm run server
> PWA@1.0.0 server C:\Users\hpzhan\Desktop\PWA
> http-server
Starting up http-server, serving ./
Available on:
http://192.168.123.113:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
[2020-04-07T03:35:53.355Z] "GET /" "Mozilla/6.0 (Windows NT 7.0; Win64; x64) AppleWebKit/337.36 (KHTML, like Gecko) Chrome/80.0.3437.143 Safari/437.36"
这时本地已经启动一个服务器，服务根目录为 ./ 当前目录下。给出访问两种访问路径，然后我再浏览器请求控制台会打印出请求日志。
详细用法：http-server
二、什么是 PWA
三、Web Worker
Web Worker 主要API
看一个 demo 求一百以内自然数的和：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA学习</title>
</head>
<body>
<script>
const webWorker = new Worker("./ww.js",{ name : "sum"});
// 求一百以内自然数的和
webWorker.postMessage(100);
webWorker.onmessage = function(event){
const { data } = event;
console.log("求和结果为：" + data);
webWorker.terminate();
}
webWorker.onerror = function(){
console.log("Web Worker 出错！");
};
// 先输出
console.log(999);
</script>
</body>
</html>
ww.js 文件：
self.onmessage = function(event){
const { data } = event;
let sum = 0;
for(let i = 0;i < data;i++){
sum += i;
};
console.log(sum);
self.postMessage(sum);
self.close();
};
self.onerror = function(){
console.log("Web Worker 出错！");
}
浏览器访问成功输出结果：
999
4950
求和结果为：4950
WebWorker 主要用于：
- 大量计算
- WebSocket
- HTTP Long Polling（长轮询）
四、Service Worker
五、CacheStorage
六、Notification
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA学习</title>
</head>
<body>
<script>
let permission = Notification.permission;
function NoticeAuth(){
globalThis.addEventListener("online",()=>{
new Notification("提示",{body:"网络已连接"});
});
globalThis.addEventListener("offline",()=>{
new Notification("提示",{body:"您的网络已断开"});
});
if(navigator.onLine){
new Notification("提示",{body:"网络已连接"});
}
if(navigator.offLine){
new Notification("提示",{body:"您的网络已断开"});
}
}
if( permission === "default"){
Notification.requestPermission().then(function(result) {
// granted（被授予）， denied（被拒绝） 或者 default（默认）
permission = result;
console.log(permission);
if(permission === "granted"){
NoticeAuth();
};
});
};
if( permission === "granted"){
NoticeAuth();
}
</script>
</body>
</html>
Notification 通知演示，手机上的效果更好：
