什么是PWA
PWA全稱Progressive Web App霜医，即漸進(jìn)式WEB應(yīng)用。
1驳规、可以添加至主屏幕肴敛，點(diǎn)擊主屏幕圖標(biāo)可以實(shí)現(xiàn)啟動(dòng)動(dòng)畫以及隱藏地址欄
2、實(shí)現(xiàn)離線緩存功能吗购，即使用戶手機(jī)沒有網(wǎng)絡(luò)医男，依然可以使用一些離線功能
3、實(shí)現(xiàn)了消息推送
Manifest實(shí)現(xiàn)添加至主屏幕
<head>
<title>Minimal PWA</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="/e.png" type="image/png" />
</head>
{
"name": "一個(gè)PWA示例", // 必填 顯示的插件名稱
"short_name": "PWA Demo", // 可選 在APP launcher和新的tab頁(yè)顯示捻勉，如果沒有設(shè)置镀梭，則使用name
"description": "The app that helps you understand PWA", //用于描述應(yīng)用
"display": "standalone", // 定義開發(fā)人員對(duì)Web應(yīng)用程序的首選顯示模式。standalone模式會(huì)有單獨(dú)的
"start_url": "/", // 應(yīng)用啟動(dòng)時(shí)的url
"theme_color": "#313131", // 桌面圖標(biāo)的背景色
"background_color": "#313131", // 為web應(yīng)用程序預(yù)定義的背景顏色踱启。在啟動(dòng)web應(yīng)用程序和加載應(yīng)用程序的內(nèi)容之間創(chuàng)建了一個(gè)平滑的過渡报账。
"icons": [ // 桌面圖標(biāo)，是一個(gè)數(shù)組
{
"src": "/public/img/logo.png",
"sizes": "144x144",
"type": "image/png"
}]
}
Manifest參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/Manifest
service worker實(shí)現(xiàn)離線緩存
特點(diǎn)：
：運(yùn)行于瀏覽器后臺(tái)埠偿，不受頁(yè)面刷新的影響笙什，可以監(jiān)聽和截?cái)r作用域范圍內(nèi)所有頁(yè)面的 HTTP 請(qǐng)求。
：網(wǎng)站必須使用 HTTPS胚想。除了使用本地開發(fā)環(huán)境調(diào)試時(shí)(如域名使用 localhost)
：?jiǎn)为?dú)的作用域范圍，單獨(dú)的運(yùn)行環(huán)境和執(zhí)行線程
：不能操作頁(yè)面 DOM芽隆。但可以通過事件機(jī)制來處理
：事件驅(qū)動(dòng)型服務(wù)線程
瀏覽器支持情況
生命周期
消息推送
步驟一浊服、提示用戶并獲得他們的訂閱詳細(xì)信息
步驟二、將這些詳細(xì)信息保存在服務(wù)器上
步驟三胚吁、在需要時(shí)發(fā)送任何消息
不同瀏覽器需要用不同的推送消息服務(wù)器牙躺。以 Chrome 上使用 Google Cloud Messaging<GCM> 作為推送服務(wù)為例，第一步是注冊(cè) applicationServerKey(通過 GCM 注冊(cè)獲取)腕扶，并在頁(yè)面上進(jìn)行訂閱或發(fā)起訂閱孽拷。每一個(gè)會(huì)話會(huì)有一個(gè)獨(dú)立的端點(diǎn)（endpoint），訂閱對(duì)象的屬性(PushSubscription.endpoint) 即為端點(diǎn)值半抱。將端點(diǎn)發(fā)送給服務(wù)器后脓恕，服務(wù)器用這一值來發(fā)送消息給會(huì)話的激活的 Service Worker （通過 GCM 與瀏覽器客戶端溝通）膜宋。
捕獲用戶的點(diǎn)擊
self.addEventListener('notificationclick', function (event) {
console.log(event);
event.notification.close(); //關(guān)閉通知
event.waitUntil(
// 獲取所有clients
self.clients.matchAll().then(function (clients) {
if (!clients || clients.length === 0) {
return;
}
clients.forEach(function (client) {
// 使用postMessage進(jìn)行通信
client.postMessage(action);
console.log("post a message");
});
})
);
});
Service Worker與client通信
到目前為止，我們已經(jīng)可以順利得給用戶展示提醒炼幔，并且在用戶操作提醒后準(zhǔn)確捕獲到用戶的操作秋茫。然而，還缺最重要的一步——針對(duì)不同的操作乃秀，觸發(fā)不同的交互
self.addEventListener('notificationclick', function (event) {
event.waitUntil(
// 獲取所有clients
self.clients.matchAll().then(function (clients) {
if (!clients || clients.length === 0) {
return;
}
clients.forEach(function (client) {
// 使用postMessage進(jìn)行通信
client.postMessage(action);
console.log("post a message");
});
})
);
});
App Shell 模型
App Shell 架構(gòu)是構(gòu)建 PWA 應(yīng)用的一種方式肛著，它通常提供了一個(gè)最基本的 Web App 框架，包括應(yīng)用的頭部跺讯、底部枢贿、菜單欄等結(jié)構(gòu)。顧名思義刀脏，我們可以把它理解成應(yīng)用的一個(gè)「空殼」局荚，這個(gè)「空殼」僅包含頁(yè)面框架所需的最基本的 HTML 片段，CSS 和 javaScript火本，這樣一來危队，用戶重復(fù)打開應(yīng)用時(shí)就能迅速地看到 Web App 的基本界面，只需要從網(wǎng)絡(luò)中請(qǐng)求钙畔、加載必要的內(nèi)容茫陆。我們使用 Service Worker 對(duì) App Shell 做離線緩存，以便它可以在離線時(shí)正常展現(xiàn)擎析，達(dá)到類似 Native App 的體驗(yàn)簿盅。
