前言

之前自己根據(jù)網(wǎng)上的教程學(xué)習(xí)寫(xiě)了幾個(gè)PWA的小Demo，覺(jué)得PWA很有意思，想要更多的了解一下PWA，所以讀了這本書(shū)。這本書(shū)是MANNIN出版社出的，所以書(shū)里的代碼都有非常棒的注釋，因此這篇筆記不會(huì)展開(kāi)講代碼，而是著重于描述PWA的功能以及常見(jiàn)的問(wèn)題和解決方法。

• 圖書(shū)資源
• 圖書(shū)中代碼的Github倉(cāng)庫(kù)

1. 什么是PWA

簡(jiǎn)單來(lái)說(shuō)，PWA是一系列新興技術(shù)的統(tǒng)稱(chēng)，這些技術(shù)旨在增強(qiáng)web app的功能，使其能夠在用戶(hù)體驗(yàn)上媲美原生應(yīng)用。PWA的功能包括：

• 響應(yīng)性：可以適配更小的屏幕
• 連接獨(dú)立性：因?yàn)閟ervice worker的緩存，它使網(wǎng)頁(yè)可以離線(xiàn)工作
• 類(lèi)似原生應(yīng)用的交互性：使用應(yīng)用程序外殼架構(gòu)（app shell）來(lái)構(gòu)建
• 安全性：基于HTTPS協(xié)議
• 可發(fā)現(xiàn)性：搜索引擎能夠發(fā)現(xiàn)它（SEO好）
• 可安裝性：可以添加到桌面像原生應(yīng)用一樣啟動(dòng)（基于manifest技術(shù)）
• 可鏈接性：可以很容易的通過(guò)URL進(jìn)行分享

1.1 網(wǎng)站性能測(cè)試工具

• Lighthouse
• webpagetest

Lighthouse會(huì)生成性能測(cè)試報(bào)告，但是測(cè)試結(jié)果會(huì)受網(wǎng)絡(luò)質(zhì)量的影響。webpagetest是真機(jī)測(cè)試，但是測(cè)試可選地點(diǎn)和瀏覽器是有限的，有時(shí)候還要排隊(duì)等待。但不管怎樣，這些測(cè)試工具可以輔助我們測(cè)試自己的站點(diǎn)，讓我們了解到自己站點(diǎn)現(xiàn)在存在的性能問(wèn)題，然后著手改善，相信PWA技術(shù)會(huì)讓你的改善變得更加簡(jiǎn)單快捷，而且效果顯著。最最重要的是，PWA是漸進(jìn)增強(qiáng)的，不需要重寫(xiě)已經(jīng)存在的代碼！！

2. PWA的主要技術(shù)

2.1 Service Worker

2.1.1 service worker的功能

簡(jiǎn)單來(lái)說(shuō)，service worker可以攔截請(qǐng)求（fetch request），可以給出響應(yīng)(response)。你可以對(duì)攔截下來(lái)的請(qǐng)求做處理，比如說(shuō)你發(fā)現(xiàn)緩存中已經(jīng)有了請(qǐng)求的資源，而且資源還在有效期內(nèi)，你就可以直接從緩存中讀取資源終止請(qǐng)求。如果在service worker的安裝階段就緩存好了一些資源，這樣再次訪問(wèn)時(shí)可以直接從緩存中加載部分資源，頁(yè)面加載速度會(huì)大幅度提升。即使是離線(xiàn)訪問(wèn)頁(yè)面也可以給出之前緩存好的信息，極大的提升了用戶(hù)的體驗(yàn)感?？梢允褂肎oogle的工具庫(kù)Workbox寫(xiě)service worker文件，里面提供了很多易用的API以及各種緩存策略。

2.1.2 service worker的特點(diǎn)

• 基于HTTPS協(xié)議
• 運(yùn)行在自己的全局腳本上下文中
• 不是綁定到一個(gè)特定的web頁(yè)面
• 無(wú)法修改web頁(yè)面中的元素，無(wú)法訪問(wèn)DOM
• 每次對(duì)service worker文件進(jìn)行任何更改時(shí)，它都會(huì)自動(dòng)觸發(fā)service worker更新流。

2.1.3 service worker的調(diào)試

可以通過(guò)Google的開(kāi)發(fā)者工具Application里面的Service Workers進(jìn)行調(diào)試。

2.1.4 service worker常見(jiàn)問(wèn)題

1) 緩存更新問(wèn)題

【方法1】：因?yàn)樾薷膕ervice worker文件會(huì)觸發(fā)service worker的更新流，所以想要更新緩存時(shí)，可以修改緩存名（cacheName），例如將helloWorld改成helloWorld-2。

【方法2】：Cache busting技術(shù)(作者更推薦)，給文件打上版本號(hào)，例如：

<script type="text/javascript" src=“/js/main-xtvbas65.js"></script> 復(fù)制代碼

這種技術(shù)被稱(chēng)為緩存總線(xiàn)技術(shù)，已經(jīng)出現(xiàn)了很多年。當(dāng)一個(gè)靜態(tài)文件被緩存時(shí)，它可以被存儲(chǔ)很長(zhǎng)一段時(shí)間，直至到期。如果你更新了一個(gè)網(wǎng)站，但由于文件的緩存版本存儲(chǔ)在訪問(wèn)者的瀏覽器中，他們可能看不到所做的更改。緩存總線(xiàn)通過(guò)使用唯一的文件版本標(biāo)識(shí)符告訴瀏覽器文件的新版本是可用的。

2) 攔截請(qǐng)求時(shí)怎么忽略查詢(xún)字符串參數(shù)

caches.match(event.request, { ignoreSearch: true }) 復(fù)制代碼

2.2 Manifest

2.2.1 manifest的功能

讓web app可以像原生應(yīng)用一樣添加圖標(biāo)到桌面，然后通過(guò)桌面圖標(biāo)啟動(dòng)?？膳渲脠D標(biāo)，啟動(dòng)動(dòng)畫(huà)等，詳細(xì)配置見(jiàn)文檔。

2.2.2 manifest的調(diào)試

可以通過(guò)Google的開(kāi)發(fā)者工具Application里面的Manifest進(jìn)行調(diào)試。

2.2.3 manifest常見(jiàn)問(wèn)題

1) 怎么讓添加到主屏幕的橫幅顯示出來(lái)

要讓添加到主屏幕的橫幅顯示出來(lái)，必修滿(mǎn)足以下條件：

• 需要 manifest.json文件。
• 需要一個(gè)啟動(dòng)的URL
• 需要 144 x 144 的PNG圖標(biāo)
• 網(wǎng)站必須基于HTTPS協(xié)議，并且使用Service Worker
• 用戶(hù)必須訪問(wèn)了網(wǎng)站至少兩次, 每次至少有五分鐘

2.3 Push notifications

2.3.1 Push notifications的功能

即使用戶(hù)不打開(kāi)瀏覽器也可以接收到消息，原生的API寫(xiě)起來(lái)有一些麻煩，可以借助第三方的工具庫(kù)來(lái)寫(xiě)，例如OneSignal, Aimtell等。

2.4 Synchronous data

Background sync是Google新推出的Web API，可延遲用戶(hù)行為，直到用戶(hù)網(wǎng)絡(luò)連接穩(wěn)定。這樣有助于保證用戶(hù)想要發(fā)送的數(shù)據(jù)就是實(shí)際發(fā)送的數(shù)據(jù)。

PeriodicSync還在開(kāi)發(fā)中，它可以實(shí)現(xiàn)定期同步。

3. 用PWA提升用戶(hù)體驗(yàn)的例子

3.1 假wifi和單點(diǎn)故障問(wèn)題

如下面的代碼所示可以設(shè)置超時(shí)時(shí)間，用Promise的race函數(shù)讓超時(shí)函數(shù)和正常的請(qǐng)求競(jìng)跑，如果到超時(shí)時(shí)間請(qǐng)求還未得到相應(yīng)則拋出超時(shí)錯(cuò)誤，這樣可以及時(shí)讓用戶(hù)了解到出現(xiàn)了網(wǎng)絡(luò)故障。

function timeout(delay) {return new Promise(function(resolve, reject) = >{setTimeout(function() {resolve(new Response('', {status: 408,statusText: 'Request timed out.'}));},delay);}); };self.addEventListener('fetch', function(event) {if (/googleapis/.test(event.request.url)) {event.respondWith(Promise.race([timeout(3000), fetch(event.request.url)]));} else {event.respondWith(fetch(event.request));} }); 復(fù)制代碼

上面的代碼看上去有一點(diǎn)繁瑣，我們可以借助Google的工具庫(kù)Workbox來(lái)簡(jiǎn)化以上代碼

importScripts('workbox-sw.prod.v1.1.0.js'); const workboxSW = new self.WorkboxSW(); workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)', workboxSW.strategies.cacheFirst({cacheName: 'googleapis',networkTimeoutSeconds: 3 })); 復(fù)制代碼

4. PWA的未來(lái)

4.1 Streaming data

Streaming data可以實(shí)現(xiàn)流數(shù)據(jù)的傳輸。舉個(gè)例子，如果后臺(tái)傳遞了一個(gè)很大的數(shù)據(jù)到前臺(tái)，正常情況下前臺(tái)需要接受完這個(gè)數(shù)據(jù)才能進(jìn)行展示，而流數(shù)據(jù)可以一邊接受一邊展示，不需要等到整個(gè)數(shù)據(jù)都接受完再展示。

4.2 Web Bluetooth

Web Bluetooth可以在瀏覽器中連接藍(lán)牙設(shè)備并通過(guò)PWA與設(shè)備交互。例如，開(kāi)發(fā)人員已經(jīng)開(kāi)發(fā)出可以與心率監(jiān)視器交互的網(wǎng)絡(luò)健身應(yīng)用程序和可以駕駛微型無(wú)人機(jī)的網(wǎng)絡(luò)應(yīng)用程序。

4.3 The Web Share API

The Web Share API允許您輕松觸發(fā)原生Android共享對(duì)話(huà)框，通過(guò)URL或文本進(jìn)行共享。這是一個(gè)重要的API，因?yàn)樗鼮榻K端用戶(hù)提供了對(duì)數(shù)據(jù)共享方式和位置的控制。

4.4 Payment Request API

Web Payments是W3C正在開(kāi)發(fā)的一種新興網(wǎng)絡(luò)標(biāo)準(zhǔn)，旨在簡(jiǎn)化在線(xiàn)支付，并使更多的參與者能夠輕松參與網(wǎng)絡(luò)上的支付生態(tài)系統(tǒng)。標(biāo)準(zhǔn)靈活; 它們適用于各種類(lèi)型的支付系統(tǒng)，適用于任何設(shè)備，支付方式或支付服務(wù)提供商的任何瀏覽器。這種靈活性使開(kāi)發(fā)簡(jiǎn)單性，部署一致性以及與新興支付技術(shù)的未來(lái)兼容性。

4.5 Hardware: the Shape Detection API

Shape Detection API允許開(kāi)發(fā)人員訪問(wèn)人臉檢測(cè)等功能，條形碼檢測(cè)，甚至是文本檢測(cè)。

---

結(jié)語(yǔ)

看完這本書(shū)，特別是PWA未來(lái)發(fā)展這一塊的內(nèi)容，深深的感覺(jué)到web日新月異的發(fā)展以及逐漸強(qiáng)大的功能API，期待各種新功能的完善，期待可以在項(xiàng)目中用起來(lái)！開(kāi)心到飛起，越來(lái)越堅(jiān)信轉(zhuǎn)行前端的決定是正確的:)

轉(zhuǎn)載于:https://juejin.im/post/5c9d91c35188251e592be8b7

總結(jié)

以上是生活随笔為你收集整理的《PWA实战：面向下一代的Progressive Web APP》读书笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。