PWA 開發實戰 (Building Progressive Web Apps: Bringing the Power of Native to the Browser)

Tal Ater

DAV Foundation聯合創始人兼CTO，W3C汽車工作組特邀專家，擁有20多年經驗的開發者、顧問和企業家。

在Web開發、產品開發、安全和開源方面均有深刻見解和研究，相關著述在《福布斯》《紐約時報》和BBC等媒體上廣泛傳播。

前言xi 

第1章漸進式Web應用介紹1 

1.1 Web反擊戰2 

1.2當前的移動領域2 

1.3漸進式Web應用的優勢4 

1.4瀏覽器標籤頁、Web和service worker 6 

第2章你的第一個service worker 8 

2.1設置示例項目8 

2.2歡迎來到哥譚帝國酒店9 

2.3熟悉代碼10 

2.4當前的離線體驗11 

2.5創建你的第一個service worker 13 

2.6什麼是漸進增強16 

2.7 HTTPS和service worker 16 

2.8從Web獲取內容17 

2.9捕獲離線請求18 

2.10創建HTML響應19 

2.11理解service worker作用域21 

2.12小結22 

第3章CacheStorage API 23

3.1 CacheStorage是什麼，不是什麼24 

3.2決定何時進行緩存24 

3.3在CacheStorage中存儲請求25 

3.4從CacheStorage中取回請求26 

3.5在示例應用緩存27 

3.6匹配每個請求的正確響應29 

3.7 HTTP緩存和HTTP頭31 

3.8小結31 

第4章service worker生命週期和緩存管理33 

4.1 service worker生命週期36 

4.2 service worker的生命週期與waitUntil的重要性38 

4.3更新service worker 39 

4.4為什麼需要管理緩存40 

4.5緩存管理與清除舊緩存42 

4.6重用已緩存的響應46 

4.7配置服務器以提供正確的響應頭部47 

4.8開發者工具48 

4.8.1控制台48 

4.8.2清除緩存並刷新48

4.8.3檢查CacheStorage和IndexedDB 49 

4.8.4網絡節流與模擬離線情況49 

4.8.5 Lighthouse 50 

4.9小結50 

第5章擁抱離線優先51 

5.1什麼是離線優先52 

5.2常用緩存模式53 

5.3混合與匹配：創造新模式55 

5.4規劃緩存策略57 

5.5實現緩存策略59 

5.6 App shell架構68 

5.7實現App shell 70 

5.8解鎖成就72 

5.9小結73 

第6章使用IndexedDB在本地存儲數據74 

6.1什麼是IndexedDB 75 

6.2使用IndexedDB 77 

6.2.1打開數據庫連接77 

6.2.2數據庫版本/修改對象存儲78 

6.2.3添加數據到對象存儲79 

6.2.4從對象存儲中讀取數據80

6.2.5 IndexedDB版本管理81 

6.2.6使用游標讀取對象82 

6.2.7創建索引84 

6.2.8使用索引讀取數據85 

6.2.9限制游標的範圍86 

6.2.10設置游標方向87 

6.2.11更新對象存儲中的對象87 

6.2.12從對象存儲刪除對象88 

6.2.13從對象存儲中刪除所有對象89 

6.2.14處理冒泡IndexedDB錯誤89 

6.3 SQL忍者的IndexedDB 90 

6.4 IndexedDB實踐91 

6.5 promise式的數據庫98 

6.6 IndexedDB管理103 

6.7在service worker中使用IndexedDB 104 

6.8 IndexedDB生態系統105 

6.8.1 PouchDB 105 

6.8.2 localForage 106 

6.8.3 Dexie.js 106

6.8.4 IndexedDB Promised 107 

6.9小結107 

第7章使用後台同步保證離線功能108 

7.1後台同步是如何工作的109 

7.2 SyncManager 111 

7.2.1訪問SyncManager 111 

7.2.2註冊事件112 

7.2.3 sync事件112 

7.2. 4事件標籤112 

7.2.5獲取已註冊sync事件列表113 

7.2.6最後的機會113 

7.3傳遞數據給sync事件114 

7.3.1在IndexedDB中維護操作隊列114 

7.3.2在IndexedDB中維護請求隊列116 

7.3. 3傳遞數據給sync事件標籤118 

7.4給應用添加後台同步118 

7.5小結125 

第8章使用postMessage()在service worker和頁面之間通信126 

8.1窗口向service worker通信127

8.2 service worker向所有打開的窗口通信128 

8.3 service worker向特定窗口通信130 

8.4使用MessageChannel保持通信渠道打開131 

8.5窗口間的通信133 

8.6從sync事件向頁面傳遞消息136 

8.7小結137 

第9章可安裝的Web應用：佔領主屏先機138 

9.1可安裝的Web應用139 

9.2瀏覽器如何決定何時顯示應用安裝橫條140 

9.3剖析Web應用清單141 

9.4各端兼容性145 

9.5小結146 

第10章推送通知147 

10.1推送通知的生命週期147 

10.1.1 Notification API 147 

10.1.2 Push API 148 

10.1.3 Push+Notification 150 

10.2創建通知150 

10.2.1請求通知權限150

10.2.2顯示通知153 

10.2.3為哥譚帝國酒店添加通知支持157 

10.3為用戶訂閱推送事件158 

10.3.1生成VAPID公鑰和私鑰160 

10.3.2生成GCM密鑰161 

10.3.3創建新訂閱162 

10.3.4為哥譚帝國酒店用戶訂閱推送消息164 

10.4從服務端發送推送事件166 

10.5監聽推送事件並顯示通知168 

10.6小結174 

第11章漸進式Web應用的用戶體驗175 

11.1優雅與信任175 

11.2從service worker傳遞狀態176 

11.3使用Progressive UI KITT通信178 

11.4漸進式Web應用中的常見消息180 

11.4.1緩存完成180 

11.4.2頁面已緩存180 

11.4.3操作失敗，但會在用戶恢復連接時完成181 

11.4.4啟用通知181

11.5選擇正確的用詞181 

11.6不要直奔主題182 

11.7漸進式Web應用的設計184 

11.7.1設計應該反映條件的變化184 

11.7.2設計應該適應運行環境185 

11.7.3設計應該適應每種媒介的特殊性185 

11.7.4設計應該向用戶注入信心並通知用戶186 

11.7.5設計應該幫助用戶和企業實現目標186 

11.8負責安裝提示186 

11.9使用RAIL測量性能並實現高性能187 

11.10小結189 

第12章漸進式Web應用的未來190 

12.1使用Payment Request API接受支付請求190 

12.2使用Credential Management API進行用戶管理192 

12.3 WebGL實時圖像處理193 

12.4未來的語音識別API 194 

12.5使用WebVR在瀏覽器中實現虛擬現實194 

12.6輕鬆共享應用195

12.7流暢的媒體播放UI 196 

12.8下一個偉大時代197 

附錄A service worker：採用ES2015的大好時機198 

附錄B全頁間隙式廣告201 

附錄C CORS與NO-CORS 202 

關於作者204 

關於封面204