构建PWA应用

February 18, 2022

参见
https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://developer.mozilla.org/docs/Web/Progressive_web_apps
https://mp.weixin.qq.com/s/3Ep5pJULvP7WHJvVJNDV-g

注意：下面的代码是没有做错误处理的

Web Worker

https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope

web worker 是由 JavaScript 创建的新线程
每一个 web worker 都是一个独立 JavaScript 脚本，具有独立的运行环境（不同于 DOM 环境）

main.js

// 创建新的web worker
const myWorker = new Worker("worker.js", { name: "myWorker" }); // 第二个参数可选

// 向worker发送数据
worker.postMessage("Hello World");
worker.postMessage({ method: "echo", args: ["Work"] });
// 参见 https://developer.mozilla.org/docs/Glossary/Transferable_objects
worker.postMessage(arrayBuffer, [arrayBuffer]);

// 监听数据，亦可使用 addEventListener 方法
worker.onmessage = function (event) {
    console.log("Received message " + event.data);
    doSomething();
};
function doSomething() {
    // 执行任务
    worker.postMessage("Work done!");
}

// 处理错误
worker.addEventListener("error", function (event) {
    // ...
});

// 关闭 worker
worker.terminate();

worker.js

console.log(self.name); // => myWorker

// 引入其他脚本，多参可选
importScripts("script1.js", "script2.js");

self.addEventListener(
    // self === this
    "message",
    function (e) {
        self.postMessage("You said: " + e.data);
    },
    false,
);

// 关闭 worker
self.close();

构建 PWA，从缓存请求开始

Service Worker 是 pwa 的重要实现方法，Service Worker 运行在 worker 线程中，必须运行在 https 协议下（或 localhost） Service Worker 能够代理网页与服务器之间的请求 Service Worker 的 API 都是异步的，通过 Promise 实现，所以为了减少嵌套，请使用 async/await 实现
相关接口 https://developer.mozilla.org/docs/Web/API/Service_Worker_API

index.html

html

<link rel="manifest" href="manifest.webmanifest" />
<script src="app.js" defer></script>
<h1>Hello, PWA!</h1>

app.js

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("./sw.js"); // => Promise<ServiceWorkerRegistration>
    // 此处省略了 options 参数，详见 https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register
    // 与 Push API 有关的内容则参见 https://developer.mozilla.org/docs/Web/API/Push_API
}

const button = document.getElementById("notifications");
button.addEventListener("click", function (e) {
    Notification.requestPermission().then(function (result) {
        if (result === "granted") {
            // testNotification();
        }
    });
});

function testNotification() {
    // Notifications API 参见 https://developer.mozilla.org/docs/Web/API/notification
    // 使用参见 https://developer.mozilla.org/docs/Web/API/Notifications_API/Using_the_Notifications_API
    const options = {
        body: "notifBody",
        icon: "./pwa.png",
    };
    const notif = new Notification("notifTitle", options); // options 可选
    notif.onerror = () => {
        // doSomething();
    };
}

sw.js

const cacheName = "PWA-v1"; // sw 版本
const contentToCache = ["/index.html", "/css/styles.css?v1"]; // 缓存清单

// 安装 Service Worker，添加缓存清单
self.addEventListener("install", (e) => {
    // caches 在 sw 作用域下，是一个特殊的 CacheStorage
    // CacheStorage API 参见 https://developer.mozilla.org/docs/Web/API/CacheStorage
    const preCache = async () => {
        const cache = await caches.open(cacheName); // => Cache
        // Cache API 参见 https://developer.mozilla.org/docs/Web/API/Cache
        return cache.addAll(contentToCache);
    };
    e.waitUntil(preCache());
    // 参见 https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil
});

// 接管请求
self.addEventListener("fetch", async (e) => {
    const cacheOrRequestThenCache = async () => {
        const req = await caches.match(e.request);
        if (req) {
            return req;
        } else {
            const resp = await fetch(e.request); // => Response
            // Response API　参见 https://developer.mozilla.org/docs/Web/API/Response
            // 通过 Steam API 操纵 Response 可以方便地处理数据，参见 https://developer.mozilla.org/docs/Web/API/Streams_API
            const cache = await caches.open(cacheName);
            cache.put(e.request, resp.clone());
            // 以 Request 为键名，参见 https://developer.mozilla.org/docs/Web/API/Request
            return resp;
        }
    };
    e.respondWith(cacheOrRequestThenCache());
});

// 清理旧版本缓存
self.addEventListener("activate", function (e) {
    const deleteCache = async () => {
        const keyList = await caches.keys();
        return Promise.all(
            keyList.map((key) => {
                if (cacheName.indexOf(key) === -1) {
                    return caches.delete(key);
                }
            }),
        );
    };
    e.waitUntil(deleteCache());
});

// 向主线程发送消息
self.clients.matchAll().then((clients) => {
    clients.forEach((client) => client.postMessage("msg from sw"));
});

更新 sw.js

const cacheName = "PWA-v2"; // sw版本
const contentToCache = ["/index.html", "/css/styles.css?v2"]; // 缓存清单
self.addEventListener("install", (e) => {
    const preCache = async () => {
        const cache = await caches.open(cacheName);
        return cache.addAll(contentToCache);
    };
    e.waitUntil(preCache());
});
// ... ...

这个时候一个新的 Service Worker 会在后台被安装，而旧的 Service Worker 仍然会正常运行，直到没有任何页面使用到它为止，这时候新的 Service Worker 将会被激活，然后接管所有的页面。

manifest.webmanifest，添加 PWA 到主屏幕

参见：https://web.dev/add-manifest/

扩展名亦可使用 json

json

{
    "background_color": "purple",
    "description": "This is an example PWA App",
    "display": "fullscreen",
    "icons": [
        {
            "src": "icon/icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "name": "My PWA App Name",
    "short_name": "My App",
    "start_url": "/index.html"
}

有关事件（Chrome）

window.addEventListener("beforeinstallprompt", (e) => {
    // chromium >= 44
    // e.preventDefault(); 阻止默认显示安装提示
    // e.prompt(); 手动显示安装提示 // chromium >= 45
    console.log(e.platforms); // e.g., ["web", "android", "windows"]
    e.userChoice.then((outcome) => {
        console.log(outcome); // either "installed", "dismissed", etc.
    }, handleError);
});

仅使用 manifest 无法使应用离线运行，离线运行实际上还是靠 Service Worker 实现
注意：Chrome 要求应用程序注册一个 Service Worker 才会显示添加到主屏幕提示 https://developer.mozilla.org/docs/Web/Manifest

使用 UpUp 库

对于简单的离线应用，可以使用 UpUp 库
https://github.com/TalAter/UpUp
注意：Service Worker 必须从同域加载，所以无法使用 cdn

html

<script src="upup.min.js"></script>
<script>
    UpUp.start({
        "content-url": "offline.html", // 离线时显示offline.html
        assets: ["/img/logo.png", "/css/style.css", "headlines.json"],
    });
</script>

←Back to home