（原文地址：https://segmentfault.com/a/1190000012353473）
一馋缅、背景
文章2017 前端大事件和趨勢回顧，2018 何去何從？中提到了2017年前端值得關(guān)注的十大事件，其中就提到了PWA封断。
大家都知道Native app體驗(yàn)確實(shí)很好，下載到手機(jī)上之后入口也方便舶担。它也有一些缺點(diǎn):
- 開發(fā)成本高(ios和安卓)
- 軟件上線需要審核
- 版本更新需要將新版本上傳到不同的應(yīng)用商店
- 想使用一個(gè)app就必須去下載才能使用坡疼，即使是偶爾需要使用一下下
而web網(wǎng)頁開發(fā)成本低，網(wǎng)站更新時(shí)上傳最新的資源到服務(wù)器即可衣陶，用手機(jī)帶的瀏覽器打開就可以使用柄瑰。但是出了體驗(yàn)上比Native app還是差一些，還有一些明顯的缺點(diǎn)
- 手機(jī)桌面入口不夠便捷剪况，想要進(jìn)入一個(gè)頁面必須要記住它的url或者加入書簽
- 沒網(wǎng)絡(luò)就沒響應(yīng)教沾，不具備離線能力
- 不像APP一樣能進(jìn)行消息推送
- 那么什么是PWA呢？
二译断、What's PWA?
PWA全稱Progressive Web App授翻，即漸進(jìn)式WEB應(yīng)用。
一個(gè) PWA 應(yīng)用首先是一個(gè)網(wǎng)頁, 可以通過 Web 技術(shù)編寫出一個(gè)網(wǎng)頁應(yīng)用. 隨后添加上 App Manifest 和 Service Worker 來實(shí)現(xiàn) PWA 的安裝和離線等功能
解決了哪些問題孙咪？
- 可以添加至主屏幕堪唐，點(diǎn)擊主屏幕圖標(biāo)可以實(shí)現(xiàn)啟動(dòng)動(dòng)畫以及隱藏地址欄
- 實(shí)現(xiàn)離線緩存功能，即使用戶手機(jī)沒有網(wǎng)絡(luò)翎蹈，依然可以使用一些離線功能
- 實(shí)現(xiàn)了消息推送
它解決了上述提到的問題淮菠，這些特性將使得 Web 應(yīng)用漸進(jìn)式接近原生 App。
三荤堪、PWA的實(shí)現(xiàn)
3.1 Manifest實(shí)現(xiàn)添加至主屏幕
index.html
<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>
manifest.json
{
"name": "Minimal PWA", // 必填 顯示的插件名稱
"short_name": "PWA Demo", // 可選 在APP launcher和新的tab頁顯示合陵，如果沒有設(shè)置，則使用name
"description": "The app that helps you understand PWA", //用于描述應(yīng)用
"display": "standalone", // 定義開發(fā)人員對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": "icon/lowres.webp",
"sizes": "48x48", // 以空格分隔的圖片尺寸
"type": "image/webp" // 幫助userAgent快速排除不支持的類型
},
{
"src": "icon/lowres",
"sizes": "48x48"
},
{
"src": "icon/hd_hi.ico",
"sizes": "72x72 96x96 128x128 256x256"
},
{
"src": "icon/hd_hi.svg",
"sizes": "72x72"
}
]
}
Manifest參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/Manifest
可以打開網(wǎng)站 https://developers.google.cn/web/showcase/2015/chrome-dev-summit 查看添加至主屏幕的動(dòng)圖低剔。
如果用的是安卓手機(jī)，可以下載chrome瀏覽器自己操作看看
3.2 service worker實(shí)現(xiàn)離線緩存
3.2.1 什么是service worker
Service Worker 是 Chrome 團(tuán)隊(duì)提出和力推的一個(gè) WEB API揩抡，用于給 web 應(yīng)用提供高級(jí)的可持續(xù)的后臺(tái)處理能力户侥。
Service Workers 就像介于服務(wù)器和網(wǎng)頁之間的攔截器，能夠攔截進(jìn)出的HTTP 請求峦嗤，從而完全控制你的網(wǎng)站蕊唐。
最主要的特點(diǎn)
- 在頁面中注冊并安裝成功后，運(yùn)行于瀏覽器后臺(tái)烁设，不受頁面刷新的影響替梨，可以監(jiān)聽和截?cái)r作用域范圍內(nèi)所有頁面的 HTTP 請求。
- 網(wǎng)站必須使用 HTTPS装黑。除了使用本地開發(fā)環(huán)境調(diào)試時(shí)(如域名使用 localhost)
- 運(yùn)行于瀏覽器后臺(tái)副瀑，可以控制打開的作用域范圍下所有的頁面請求
- 單獨(dú)的作用域范圍，單獨(dú)的運(yùn)行環(huán)境和執(zhí)行線程
- 不能操作頁面 DOM恋谭。但可以通過事件機(jī)制來處理
- 事件驅(qū)動(dòng)型服務(wù)線程
為什么要求網(wǎng)站必須是HTTPS的糠睡，大概是因?yàn)閟ervice worker權(quán)限太大能攔截所有頁面的請求吧，如果http的網(wǎng)站安裝service worker很容易被攻擊
瀏覽器支持情況
瀏覽器支持情況詳見： https://caniuse.com/#feat=serviceworkers
生命周期
當(dāng)用戶首次導(dǎo)航至 URL 時(shí)疚颊，服務(wù)器會(huì)返回響應(yīng)的網(wǎng)頁狈孔。
- 第1步:當(dāng)你調(diào)用 register() 函數(shù)時(shí)， Service Worker 開始下載材义。
- 第2步:在注冊過程中均抽，瀏覽器會(huì)下載、解析并執(zhí)行 Service Worker ()其掂。如果在此步驟中出現(xiàn)任何錯(cuò)誤油挥，register() 返回的 promise 都會(huì)執(zhí)行 reject 操作，并且 Service Worker 會(huì)被廢棄款熬。
- 第3步:一旦 Service Worker 成功執(zhí)行了深寥，install 事件就會(huì)激活
- 第4步:安裝完成，Service Worker 便會(huì)激活贤牛，并控制在其范圍內(nèi)的一切翩迈。如果生命周期中的所有事件都成功了，Service Worker 便已準(zhǔn)備就緒盔夜，隨時(shí)可以使用了负饲！
chrome://serviceworker-internals 來了解當(dāng)前瀏覽器中所有已安裝Service Worker的詳細(xì)情況
3.2.2 HTTP緩存與service worker緩存
- HTTP緩存
Web 服務(wù)器可以使用 Expires 首部來通知 Web 客戶端，它可以使用資源的當(dāng)前副本喂链，直到指定的“過期時(shí)間”返十。反過來，瀏覽器可以緩存此資源椭微，并且只有在有效期滿后才會(huì)再次檢查新版本洞坑。
使用 HTTP 緩存意味著你要依賴服務(wù)器來告訴你何時(shí)緩存資源和何時(shí)過期。
+service worker緩存
Service Workers 的強(qiáng)大在于它們攔截 HTTP 請求的能力
進(jìn)入任何傳入的 HTTP 請求蝇率，并決定想要如何響應(yīng)迟杂。在你的 Service Worker 中刽沾，可以編寫邏輯來決定想要緩存的資源，以及需要滿足什么條件和資源需要緩存多久排拷。一切盡歸你掌控侧漓！
3.2.3 實(shí)現(xiàn)離線緩存
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Caching World!</title>
</head>
<body>
<!-- Image -->
<img src="/images/hello.png" />
<!-- JavaScript -->
<script async src="/js/script.js"></script>
<script>
// 注冊 service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function (registration) {
// 注冊成功
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function (err) {
// 注冊失敗 :(
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
</body>
</html>
注：Service Worker 的注冊路徑?jīng)Q定了其 scope 默認(rèn)作用頁面的范圍。
如果 service-worker.js 是在 /sw/ 頁面路徑下监氢，這使得該 Service Worker 默認(rèn)只會(huì)收到 頁面/sw/ 路徑下的 fetch 事件布蔗。
如果存放在網(wǎng)站的根路徑下，則將會(huì)收到該網(wǎng)站的所有 fetch 事件浪腐。
如果希望改變它的作用域纵揍，可在第二個(gè)參數(shù)設(shè)置 scope 范圍。示例中將其改為了根目錄议街，即對整個(gè)站點(diǎn)生效泽谨。
service-worker.js
var cacheName = 'helloWorld'; // 緩存的名稱
// install 事件，它發(fā)生在瀏覽器安裝并注冊 Service Worker 時(shí)
self.addEventListener('install', event => {
/* event.waitUtil 用于在安裝成功之前執(zhí)行一些預(yù)裝邏輯
但是建議只做一些輕量級(jí)和非常重要資源的緩存特漩，減少安裝失敗的概率
安裝成功后 ServiceWorker 狀態(tài)會(huì)從 installing 變?yōu)?installed */
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll([ // 如果所有的文件都成功緩存了隔盛，便會(huì)安裝完成。如果任何文件下載失敗了拾稳，那么安裝過程也會(huì)隨之失敗吮炕。
'/js/script.js',
'/images/hello.png'
]))
);
});
/**
為 fetch 事件添加一個(gè)事件監(jiān)聽器。接下來访得，使用 caches.match() 函數(shù)來檢查傳入的請求 URL 是否匹配當(dāng)前緩存中存在的任何內(nèi)容龙亲。如果存在的話，返回緩存的資源悍抑。
如果資源并不存在于緩存當(dāng)中鳄炉，通過網(wǎng)絡(luò)來獲取資源，并將獲取到的資源添加到緩存中搜骡。
*/
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
return response;
}
var requestToCache = event.request.clone(); //
return fetch(requestToCache).then(
function (response) {
if (!response || response.status !== 200) {
return response;
}
var responseToCache = response.clone();
caches.open(cacheName)
.then(function (cache) {
cache.put(requestToCache, responseToCache);
});
return response;
})
);
});
注：為什么用request.clone()和response.clone()
需要這么做是因?yàn)閞equest和response是一個(gè)流拂盯，它只能消耗一次。因?yàn)槲覀円呀?jīng)通過緩存消耗了一次记靡，然后發(fā)起 HTTP 請求還要再消耗一次谈竿，所以我們需要在此時(shí)克隆請求
Clone the request—a request is a stream and can only be consumed once.
3.2.4 調(diào)試相關(guān)
chrome瀏覽器打開 https://googlechrome.github.io/samples/service-worker/basic/index.html ，這是一個(gè)實(shí)現(xiàn)了service worker離線緩存功能的網(wǎng)站摸吠，打開調(diào)試工具
介紹一個(gè)圖中的1.和2.
- 勾選可以模擬網(wǎng)站離線情況空凸，勾選后network會(huì)有一個(gè)黃色警告圖標(biāo)，該網(wǎng)站已經(jīng)離線寸痢。此時(shí)刷新頁面呀洲，頁面仍然能夠正常顯示
- 當(dāng)前service worker的scope。它能夠攔截 https://googlechrome.github.i... ，同樣也能夠攔截 https://googlechrome.github.i.../.html 下的請求
調(diào)試面板具體代表的什么參看 https://x5.tencent.com/tbs/guide/serviceworker.html 的第三部分
3.3 serice worker實(shí)現(xiàn)消息推送
- 步驟一道逗、提示用戶并獲得他們的訂閱詳細(xì)信息
- 步驟二兵罢、將這些詳細(xì)信息保存在服務(wù)器上
- 步驟三、在需要時(shí)發(fā)送任何消息
不同瀏覽器需要用不同的推送消息服務(wù)器滓窍。以 Chrome 上使用 Google Cloud Messaging<GCM> 作為推送服務(wù)為例卖词，第一步是注冊 applicationServerKey(通過 GCM 注冊獲取)，并在頁面上進(jìn)行訂閱或發(fā)起訂閱贰您。每一個(gè)會(huì)話會(huì)有一個(gè)獨(dú)立的端點(diǎn)（endpoint），訂閱對象的屬性(PushSubscription.endpoint) 即為端點(diǎn)值拢操。將端點(diǎn)發(fā)送給服務(wù)器后锦亦，服務(wù)器用這一值來發(fā)送消息給會(huì)話的激活的 Service Worker （通過 GCM 與瀏覽器客戶端溝通）。
步驟一和步驟二
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Progressive Times</title>
<link rel="manifest" href="/manifest.json">
</head>
<body>
<script>
var endpoint;
var key;
var authSecret;
var vapidPublicKey = 'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY';
// 方法很復(fù)雜令境，但是可以不用具體看杠园，知識(shí)用來轉(zhuǎn)化vapidPublicKey用
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function (registration) {
return registration.pushManager.getSubscription()
.then(function (subscription) {
if (subscription) {
return;
}
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
})
.then(function (subscription) {
var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
authSecret = rawAuthSecret ?
btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';
endpoint = subscription.endpoint;
return fetch('./register', {
method: 'post',
headers: new Headers({
'content-type': 'application/json'
}),
body: JSON.stringify({
endpoint: subscription.endpoint,
key: key,
authSecret: authSecret,
}),
});
});
});
}).catch(function (err) {
// 注冊失敗 :(
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
</body>
</html>
步驟三 服務(wù)器發(fā)送消息給service worker
app.js
const webpush = require('web-push');
const express = require('express');
var bodyParser = require('body-parser');
const app = express();
webpush.setVapidDetails(
'mailto:contact@deanhume.com',
'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY',
'p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0'
);
app.post('/register', function (req, res) {
var endpoint = req.body.endpoint;
saveRegistrationDetails(endpoint, key, authSecret);
const pushSubscription = {
endpoint: req.body.endpoint,
keys: {
auth: req.body.authSecret,
p256dh: req.body.key
}
};
var body = 'Thank you for registering';
var iconUrl = 'https://example.com/images/homescreen.png';
// 發(fā)送 Web 推送消息
webpush.sendNotification(pushSubscription,
JSON.stringify({
msg: body,
url: 'http://localhost:3111/',
icon: iconUrl
}))
.then(result => res.sendStatus(201))
.catch(err => {
console.log(err);
});
});
app.listen(3111, function () {
console.log('Web push app listening on port 3111!')
});
service worker監(jiān)聽push事件，將通知詳情推送給用戶
service-worker.js
self.addEventListener('push', function (event) {
// 檢查服務(wù)端是否發(fā)來了任何有效載荷數(shù)據(jù)
var payload = event.data ? JSON.parse(event.data.text()) : 'no payload';
var title = 'Progressive Times';
event.waitUntil(
// 使用提供的信息來顯示 Web 推送通知
self.registration.showNotification(title, {
body: payload.msg,
url: payload.url,
icon: payload.icon
})
);
});
擴(kuò)展知識(shí)：service worker的更新
總結(jié)
PWA的優(yōu)勢
- 可以將app的快捷方式放置到桌面上舔庶，全屏運(yùn)行抛蚁，與原生app無異
- 能夠在各種網(wǎng)絡(luò)環(huán)境下使用，包括網(wǎng)絡(luò)差和斷網(wǎng)條件下惕橙，不會(huì)顯示undefind
- 推送消息的能力
- 其本質(zhì)是一個(gè)網(wǎng)頁瞧甩，沒有原生app的各種啟動(dòng)條件，快速響應(yīng)用戶指令
PWA存在的問題
- 支持率不高:現(xiàn)在ios手機(jī)端不支持pwa弥鹦，IE也暫時(shí)不支持
- Chrome在中國桌面版占有率還是不錯(cuò)的肚逸，安卓移動(dòng)端上的占有率卻很低
- 各大廠商還未明確支持pwa
- 依賴的GCM服務(wù)在國內(nèi)無法使用
- 微信小程序的競爭
盡管有上述的一些缺點(diǎn)，PWA技術(shù)仍然有很多可以使用的點(diǎn)彬坏。
- service worker技術(shù)實(shí)現(xiàn)離線緩存朦促，可以將一些不經(jīng)常更改的靜態(tài)文件放到緩存中，提升用戶體驗(yàn)栓始。
- service worker實(shí)現(xiàn)消息推送务冕，使用瀏覽器推送功能，吸引用戶
- 漸進(jìn)式開發(fā)幻赚，盡管一些瀏覽器暫時(shí)不支持禀忆，可以利用上述技術(shù)給使用支持瀏覽器的用戶帶來更好的體驗(yàn)。
參考文檔
第一本 PWA 中文書
PWA 英文書
網(wǎng)站漸進(jìn)式增強(qiáng)體驗(yàn)(PWA)改造：Service Worker 應(yīng)用詳解
Basic Service Worker Sample
【翻譯】Service Worker 入門
Web App Manifest
Service Workers: an Introduction
The Offline Cookbook
微信小程序和PWA對比分析
Service Worker最佳實(shí)踐
