PWA入門與實(shí)踐

前　言
●第1章　初識PWA1
1.1　背景1
1.2　PWA概述4
1.2.1　快速5
1.2.2　集成5
1.2.3　可靠6
1.2.4　有吸引力7
1.2.5　PWA的布局結(jié)構(gòu)7
1.3　應(yīng)用程序與PWA8
1.3.1　能力8
1.3.2　開發(fā)成本8
1.3.3　安裝包大小9
1.3.4　推廣成本9
1.3.5　系統(tǒng)結(jié)構(gòu)9
1.3.6　綜合10
1.4　PWA的生態(tài)支持10
1.4.1　瀏覽器對PWA的支持11
1.4.2　PWA的生態(tài)11
1.5　成功案例12
1.5.1　Twitter12
1.5.2　HOUSING.com12
1.5.3　蘭蔻13
1.5.4　星巴克13
1.6　環(huán)境準(zhǔn)備13
1.6.1　瀏覽器13
1.6.2　Node.js環(huán)境13
1.6.3　HTTP Server14
1.6.4　調(diào)試工具14
1.7　第一個 PWA16
1.7.1　創(chuàng)建首頁16
1.7.2　注冊 Service Worker17
1.7.3　網(wǎng)絡(luò)層攔截圖片19
1.7.4　定制 404 頁面19
1.7.5　離線可用21
1.7.6　添加到主屏幕22
1.8　本章小結(jié)24

●第2章　預(yù)備知識25
2.1　JavaScript Module25
2.1.1　JavaScript 模塊化歷史25
2.1.2　什么是 JavaScript Module26
2.1.3　瀏覽器中使用 JavaScript Module29
2.1.4　為什么要用JavaScript Module31
2.2　Promise31
2.2.1　背景31
2.2.2　概念32
2.2.3　構(gòu)造函數(shù)32
2.2.4　實(shí)例方法33
2.2.5　靜態(tài)方法35
2.2.6　實(shí)例39
2.3　async / await40
2.3.1　async40
2.3.2　await42
2.3.3　async / await的優(yōu)勢43
2.4　Web Worker44
2.4.1　背景44
2.4.2　簡介44
2.4.3　主線程 API46
2.4.4　Worker線程API48
2.4.5　實(shí)例49
2.5　本章小結(jié)51

●第3章　PWA的核心橋梁：Service Worker52
3.1　Service Worker的結(jié)構(gòu)52
3.1.1　ServiceWorkerContainer 接口53
3.1.2　ServiceWorkerRegistration 接口58
3.1.3　ServiceWorker 接口60
3.1.4　ServiceWorkerGlobalScope接口62
3.2　Service Worker 的生命周期68
3.2.1　腳本的生命周期68
3.2.2　線程的生命周期69
3.2.3　線程退出70
3.2.4　更新Service Worker文件的條件71
3.2.5　調(diào)試生命周期71
3.3　本章小結(jié)72

●第4章　核心技術(shù)73
4.1　Manifest 應(yīng)用清單73
4.1.1　簡介73
4.1.2　字段說明74
4.1.3　安裝條件78
4.1.4　顯示安裝橫幅78
4.1.5　自定義安裝時機(jī)80
4.1.6　應(yīng)用的更新81
4.1.7　iOS 上的適配82
4.1.8　兼容適配庫83
4.2　Fetch 網(wǎng)絡(luò)功能83
4.2.1　Fetch簡介83
4.2.2　Request86
4.2.3　Headers88
4.2.4　Response93
4.2.5　Body95
4.2.6　實(shí)例95
4.3　Notification 消息通知98
4.3.1　簡介98
4.3.2　接口信息99
4.3.3　實(shí)例102
4.4　Sync后臺同步104
4.4.1　SyncManager接口104
4.4.2　Sync 流程105
4.4.3　使用場景107
4.5　Cache離線存儲110
4.5.1　簡介110
4.5.2　CacheStorage111
4.5.3　Cache112
4.5.4　緩存空間問題115
4.5.5　opaque 響應(yīng)緩存問題115
4.6　Push消息推送117
4.6.1　簡介117
4.6.2　接口117
4.6.3　訂閱實(shí)現(xiàn)121
4.6.4　推送協(xié)議124
4.6.5　VAPID 密鑰的生成126
4.6.6　實(shí)例128
4.6.7　常見問題129
4.7　本章小結(jié)130

●第5章　配套工具131
5.1　PWA工具箱：Workbox131
5.1.1　CLI模式131
5.1.2　手寫模式138
5.1.3　Workbox 路由139
5.1.4　Workbox 插件141
5.1.5　實(shí)例141
5.2　離線數(shù)據(jù)庫：IndexedDB145
5.2.1　接口145
5.2.2　操作146
5.2.3　在Service Worker 中使用IndexedDB157
5.2.4　更簡單的 IndexedDB158
5.3　評測報告：Lighthouse160
5.3.1　簡介160
5.3.2　打開 Lighthouse161
5.3.3　測試 PWA161
5.3.4　測試結(jié)果161
5.4　調(diào)試工具：DevTools163
5.4.1　在Chrome上調(diào)試163
5.4.2　在Safari上調(diào)試169
5.4.3　在Firefox上調(diào)試170
5.4.4　調(diào)試小結(jié)171
5.5　本章小結(jié)171

●第6章　實(shí)踐方案172
6.1　接入Service Worker 172
6.1.1　注冊方案172
6.1.2　狀態(tài)同步方案175
6.1.3　Service Worker 開關(guān)方案176
6.1.4　錯誤收集177
6.2　安裝網(wǎng)站到桌面178
6.2.1　為網(wǎng)站增加桌面能力178
6.2.2　新閉環(huán)方案180
6.2.3　新閉環(huán)方案實(shí)現(xiàn)181
6.3　消息通信182
6.3.1　窗口向 Service Worker 線程通信182
6.3.2　Service Worker線程向窗口通信186
6.4　數(shù)據(jù)離線189
6.4.1　離線處理時機(jī)189
6.4.2　離線策略193
6.5　推送通知197
6.5.1　Web Push 庫的選擇197
6.5.2　應(yīng)用服務(wù)器后端搭建198
6.5.3　前端頁面搭建200
6.5.4　效果202
6.5.5　無法推送/訂閱203
6.6　改造網(wǎng)站為PWA203
6.6.1　準(zhǔn)備203
6.6.2　PWA檢測204
6.6.3　PWA改造204
6.6.4　重新評測網(wǎng)站215
6.7　本章小結(jié)215

●第7章　系統(tǒng)集成216
7.1　系統(tǒng)集成項(xiàng)目組Fugu216
7.2　攝像頭和麥克風(fēng)集成217
7.3　輸入集成224
7.4　設(shè)備特性集成228
7.5　定位集成231
7.6　本章小結(jié)235