PWA —— 渐进式 Web 应用

涉及技术：

• 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

> [email protected] 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 使用教程

Web Worker 主要API

看一个 demo 求一百以内自然数的和：
index.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 主要用于：

1. 大量计算
2. WebSocket
3. HTTP Long Polling（长轮询）

四、Service Worker

五、CacheStorage

六、Notification

Notification 通知演示，手机上的效果更好：