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

> 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 使用教程

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 主要用于:

  1. 大量计算
  2. WebSocket
  3. 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 通知演示,手机上的效果更好:


推荐阅读更多精彩内容