前言

之前自己根據網上的教程學習寫了幾個PWA的小Demo，覺得PWA很有意思，想要更多的了解一下PWA，所以讀了這本書。這本書是MANNIN出版社出的，所以書里的代碼都有非常棒的注釋，因此這篇筆記不會展開講代碼，而是著重于描述PWA的功能以及常見的問題和解決方法。

• 圖書資源
• 圖書中代碼的Github倉庫

1. 什么是PWA

簡單來說，PWA是一系列新興技術的統稱，這些技術旨在增強web app的功能，使其能夠在用戶體驗上媲美原生應用。PWA的功能包括：

• 響應性：可以適配更小的屏幕
• 連接獨立性：因為service worker的緩存，它使網頁可以離線工作
• 類似原生應用的交互性：使用應用程序外殼架構（app shell）來構建
• 安全性：基于HTTPS協議
• 可發現性：搜索引擎能夠發現它（SEO好）
• 可安裝性：可以添加到桌面像原生應用一樣啟動（基于manifest技術）
• 可鏈接性：可以很容易的通過URL進行分享

1.1 網站性能測試工具

• Lighthouse
• webpagetest

Lighthouse會生成性能測試報告，但是測試結果會受網絡質量的影響。webpagetest是真機測試，但是測試可選地點和瀏覽器是有限的，有時候還要排隊等待。但不管怎樣，這些測試工具可以輔助我們測試自己的站點，讓我們了解到自己站點現在存在的性能問題，然后著手改善，相信PWA技術會讓你的改善變得更加簡單快捷，而且效果顯著。最最重要的是，PWA是漸進增強的，不需要重寫已經存在的代碼！！

2. PWA的主要技術

2.1 Service Worker

2.1.1 service worker的功能

簡單來說，service worker可以攔截請求（fetch request），可以給出響應(response)。你可以對攔截下來的請求做處理，比如說你發現緩存中已經有了請求的資源，而且資源還在有效期內，你就可以直接從緩存中讀取資源終止請求。如果在service worker的安裝階段就緩存好了一些資源，這樣再次訪問時可以直接從緩存中加載部分資源，頁面加載速度會大幅度提升。即使是離線訪問頁面也可以給出之前緩存好的信息，極大的提升了用戶的體驗感。可以使用Google的工具庫Workbox寫service worker文件，里面提供了很多易用的API以及各種緩存策略。

2.1.2 service worker的特點

• 基于HTTPS協議
• 運行在自己的全局腳本上下文中
• 不是綁定到一個特定的web頁面
• 無法修改web頁面中的元素，無法訪問DOM
• 每次對service worker文件進行任何更改時，它都會自動觸發service worker更新流。

2.1.3 service worker的調試

可以通過Google的開發者工具Application里面的Service Workers進行調試。

2.1.4 service worker常見問題

1) 緩存更新問題

【方法1】：因為修改service worker文件會觸發service worker的更新流，所以想要更新緩存時，可以修改緩存名（cacheName），例如將helloWorld改成helloWorld-2。

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

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

這種技術被稱為緩存總線技術，已經出現了很多年。當一個靜態文件被緩存時，它可以被存儲很長一段時間，直至到期。如果你更新了一個網站，但由于文件的緩存版本存儲在訪問者的瀏覽器中，他們可能看不到所做的更改。緩存總線通過使用唯一的文件版本標識符告訴瀏覽器文件的新版本是可用的。

2) 攔截請求時怎么忽略查詢字符串參數

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

2.2 Manifest

2.2.1 manifest的功能

讓web app可以像原生應用一樣添加圖標到桌面，然后通過桌面圖標啟動。可配置圖標，啟動動畫等，詳細配置見文檔。

2.2.2 manifest的調試

可以通過Google的開發者工具Application里面的Manifest進行調試。

2.2.3 manifest常見問題

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

要讓添加到主屏幕的橫幅顯示出來，必修滿足以下條件：

• 需要 manifest.json文件。
• 需要一個啟動的URL
• 需要 144 x 144 的PNG圖標
• 網站必須基于HTTPS協議，并且使用Service Worker
• 用戶必須訪問了網站至少兩次, 每次至少有五分鐘

2.3 Push notifications

2.3.1 Push notifications的功能

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

2.4 Synchronous data

Background sync是Google新推出的Web API，可延遲用戶行為，直到用戶網絡連接穩定。這樣有助于保證用戶想要發送的數據就是實際發送的數據。

PeriodicSync還在開發中，它可以實現定期同步。

3. 用PWA提升用戶體驗的例子

3.1 假wifi和單點故障問題

如下面的代碼所示可以設置超時時間，用Promise的race函數讓超時函數和正常的請求競跑，如果到超時時間請求還未得到相應則拋出超時錯誤，這樣可以及時讓用戶了解到出現了網絡故障。

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));}
});
復制代碼

上面的代碼看上去有一點繁瑣，我們可以借助Google的工具庫Workbox來簡化以上代碼

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
}));
復制代碼

4. PWA的未來

4.1 Streaming data

Streaming data可以實現流數據的傳輸。舉個例子，如果后臺傳遞了一個很大的數據到前臺，正常情況下前臺需要接受完這個數據才能進行展示，而流數據可以一邊接受一邊展示，不需要等到整個數據都接受完再展示。

4.2 Web Bluetooth

Web Bluetooth可以在瀏覽器中連接藍牙設備并通過PWA與設備交互。例如，開發人員已經開發出可以與心率監視器交互的網絡健身應用程序和可以駕駛微型無人機的網絡應用程序。

4.3 The Web Share API

The Web Share API允許您輕松觸發原生Android共享對話框，通過URL或文本進行共享。這是一個重要的API，因為它為終端用戶提供了對數據共享方式和位置的控制。

4.4 Payment Request API

Web Payments是W3C正在開發的一種新興網絡標準，旨在簡化在線支付，并使更多的參與者能夠輕松參與網絡上的支付生態系統。標準靈活; 它們適用于各種類型的支付系統，適用于任何設備，支付方式或支付服務提供商的任何瀏覽器。這種靈活性使開發簡單性，部署一致性以及與新興支付技術的未來兼容性。

4.5 Hardware: the Shape Detection API

Shape Detection API允許開發人員訪問人臉檢測等功能，條形碼檢測，甚至是文本檢測。

---

結語

看完這本書，特別是PWA未來發展這一塊的內容，深深的感覺到web日新月異的發展以及逐漸強大的功能API，期待各種新功能的完善，期待可以在項目中用起來！開心到飛起，越來越堅信轉行前端的決定是正確的:)