PWA實(shí)戰：面向下一代的Progressive Web APP簡(jiǎn)介，目錄書(shū)摘

網(wǎng)站可以離線(xiàn)工作，近乎瞬時(shí)的加載速度，在各種帶寬條件下平滑切換——不使用 PWA 的話(huà)，這一切都只是幻想。PWA 使用諸如推送通知、智能緩存和 Service Workers 這樣的現代瀏覽器功能來(lái)管理數據、減少服務(wù)端使用、適應不穩定鏈接，并讓你擁有更多控制權利以取悅客戶(hù)。更棒的是，構建 PWA 只需要 JavaScript、HTML 和 本書(shū)中所能學(xué)到的易于掌握的技術(shù)。

通過(guò)本書(shū)，可以學(xué)習到 PWA 的設計，以及用來(lái)構建快速、可靠網(wǎng)站的技術(shù)。使用 PWA 技術(shù)的方式有很多種，本書(shū)的實(shí)戰教程提供了有趣的獨立示例，你完全可以挑選自己感興趣的部分閱讀。你還將學(xué)習到 Service Worker 是如何極大地提升網(wǎng)站的加載速度，如何有效地使用推送通知，以及如何創(chuàng )建可以離線(xiàn)工作的網(wǎng)站。本書(shū)包括：

√ 使用 Service Worker 改進(jìn)緩存

√ 使用清單文件和 HTML 標記

√ 推送通知

√ 離線(xiàn)優(yōu)先的 Web 設計

√ 數據同步技術(shù)

Progressive Web App（PWA）是由谷歌提出的一整套技術(shù)解決方案，它致力于為 Web 提供出色的用戶(hù)體驗，并完美體現了漸進(jìn)增強原則。作為為數不多的實(shí)戰入門(mén)用書(shū)，《PWA 實(shí)戰：面向下一代的Progressive Web App》旨在通過(guò)大量清晰示例來(lái)介紹 PWA 的主要特性。全書(shū)一共由五個(gè)部分組成：第一部分介紹 PWA 的概念及解鎖 PWA 應用的關(guān)鍵—Service Worker，第二部分介紹如何構建響應速度更快的 Web 應用，第三部分介紹如何構建更吸引人的 Web 應用，第四部分介紹如何構建應對各種復雜網(wǎng)絡(luò )的 Web 應用，第五部分介紹 PWA 的發(fā)展前景。

《PWA實(shí)戰：面向下一代的Progressive Web APP》適合Web 開(kāi)發(fā)人員及前端技術(shù)愛(ài)好者閱讀，稍有 HTML、CSS 和JavaScript 基礎學(xué)習效果更佳。

Dean Alan Hume 是一名作者、博主、軟件開(kāi)發(fā)者，同時(shí)也是谷歌開(kāi)發(fā)專(zhuān)家。他寫(xiě)過(guò)很多文章，并發(fā)表過(guò)幾十篇演講，同時(shí)還是Fast ASP.NET Websites（Manning, 2013）和Building Great Startup Teams（Blurb, 2017） 的作者。他還為A Career On The Web: On the Road to Success（Smashing Magazine, 2015）一書(shū)做出了貢獻。作為一名軟件開(kāi)發(fā)人員，他對Web 性能調優(yōu)充滿(mǎn)熱情，并且經(jīng)常在他的博客 deanhume.com 上撰寫(xiě)軟件開(kāi)發(fā)相關(guān)的文章。他的愛(ài)好廣泛，包括沖浪、滑雪、拳擊和參加三項全能運動(dòng)。目前，他正在學(xué)習啤酒釀造。

序   XIV

前言   XV

致謝    XVI

關(guān)于本書(shū)   XVII

第１部分  定義PWA

第1章  理解PWA   3

1.1  PWA有什么優(yōu)勢   3

1.2  PWA 基礎   5

構建 PWA 的業(yè)務(wù)場(chǎng)景   6

1.3  Service Worker：PWA的關(guān)鍵   8

1.3.1  理解 Service Worker   9

1.3.2  Service Worker 生命周期   10

1.3.3  Service Worker 基礎示例    11

1.3.4  安全考慮    13

1.4  性能洞察: Flipkart    14

1.5  總結   15

第2章  構建PWA的第一步    16

2.1  建立在現有基礎之上   16

2.2  構建 PWA 的前端架構方式    18

2.2.1  應用外殼架構   18

2.2.2  性能優(yōu)勢    21

2.2.3  應用外殼架構實(shí)戰   22

2.3  逐步剖析現有的 PWA    23

2.3.1  前端架構    24

2.3.2  緩存   25

2.3.3  離線(xiàn)瀏覽    26

2.3.4  觀(guān)感   27

2.3.5  最終產(chǎn)品    27

2.4  總結   28

第２部分  更快的Web應用

第3章  緩存   31

3.1  HTTP 緩存基礎   31

3.2  Service Worker 緩存基礎   34

3.2.1  在 Service Worker 安裝過(guò)程中預緩存   34

3.2.2  攔截并緩存   38

3.2.3  整合所有代碼   42

3.3  緩存前后的性能比對   45

3.4  深入 Service Worker緩存   46

3.4.1  對文件進(jìn)行版本控制   46

3.4.2  處理額外的查詢(xún)參數   48

3.4.3  需要多少內存   48

3.4.4  將緩存提升到一個(gè)新的高度：Workbox    49

3.5  總結   51

第4章  攔截網(wǎng)絡(luò )請求    52

4.1  Fetch API    52

4.2  fetch 事件   55

Service Worker 生命周期   56

4.3  fetch實(shí)戰    58

4.3.1 使用WebP 圖片的示例    58

4.3.2  使用 Save-Data 請求頭的示例   61

4.4  總結   65

第３部分  吸引人的Web應用

第5章  觀(guān)感   69

5.1  Web 應用清單   69

5.2  添加到主屏幕   71

5.2.1  定制圖標    74

5.2.2  添加啟動(dòng)頁(yè)面   75

5.2.3  設置啟動(dòng)樣式和 URL    76

5.3  添加到主屏幕的高級用法   77

5.3.1  取消提示    78

5.3.2  判斷使用情況   78

5.3.3  推遲提示    79

5.4  調試清單文件   81

5.5  總結   82

第6章  推送通知    84

6.1  與用戶(hù)互動(dòng)   84

6.2  參與度洞見(jiàn)：Weather Channel    86

6.3  瀏覽器支持   87

6.4  第一個(gè)推送通知    88

6.4.1  訂閱通知    89

6.4.2  發(fā)送通知    92

6.4.3  接收通知并與之互動(dòng)   93

6.4.4  取消訂閱    97

6.5  第三方推送通知    98

6.6  總結   99

第４部分  有彈性的Web應用

第7章  離線(xiàn)瀏覽   103

7.1  解鎖緩存   103

7.2  提供離線(xiàn)文件   104

7.3  幾個(gè)需要注意的問(wèn)題   109

7.4  緩存是非永久性的   110

7.5  離線(xiàn)用戶(hù)體驗    110

7.6  跟蹤離線(xiàn)使用情況   113

7.7  總結   114

第8章  構建更富彈性的應用   116

8.1  現代網(wǎng)站所面臨的網(wǎng)絡(luò )問(wèn)題    116

理解 lie-fi 和單點(diǎn)故障   117

8.2  Service Worker的營(yíng)救    119

8.3  使用 Workbox   123

8.4  總結    125

第9章  保持數據同步    126

9.1  理解后臺同步   126

9.1.1  準備開(kāi)始   127

9.1.2  Service Worker   130

9.1.3  提供備用方案   132

9.1.4  測試    134

9.2  通知用戶(hù)   134

9.3  定期同步   137

9.4  總結    138

第５部分  PWA的未來(lái)

第10章  流式數據    141

10.1  理解 Web Stream   141

10.1.1  Web Stream 有什么優(yōu)勢   142

10.1.2  可讀流    143

10.2  基礎示例   144

10.3  頁(yè)面渲染加速    146

10.4  Web Stream API的未來(lái)    151

10.5  總結   152

第11章  PWA故障排除    153

11.1  添加到主屏幕    153

11.1.1  如何得知網(wǎng)站上有多少用戶(hù)使用了添加到主屏幕功能    .153

11.1.2  添加到主屏幕操作欄對我來(lái)說(shuō)沒(méi)有任何意義，如何禁用或隱藏   154

11.1.3  求助，我的添加到主屏幕（A2HS）功能沒(méi)效果   155

11.1.4  如果用戶(hù)安裝了我的Web 應用到他們的主屏幕上，但他們又清除了Chrome 的緩存，那么我的網(wǎng)站緩存的資源也會(huì )被清除嗎    155

11.1.5  我不確定manifest.json 文件是否正常工作，那么該如何進(jìn)行測試   155

11.2  緩存   156

11.2.1  我在Service Worker 文件中使用代碼將資源添加到緩存中，但是當我更改文件時(shí)，緩存并沒(méi)有更新，而且即使刷新了

頁(yè)面，看到的仍是舊版本的文件，這是為什么   157

11.2.2  如何對 Service Worker 代碼進(jìn)行單元測試   158

11.2.3  PWA 可以使用用戶(hù)設備上的多少內存   158

11.2.4  緩存的資源似乎每隔一段時(shí)間就會(huì )過(guò)期，如何確保它們永久性地緩存呢    158

11.2.5  如何處理查詢(xún)字符串和緩存    159

11.3  調試 Service Worker 的具體問(wèn)題   159

11.3.1  Service Worker 文件多久更新一次   160

11.3.2  Service Worker 文件出錯，但我不知道出錯的原因，那么如何調試它   160

11.3.3  求助，我做了各種嘗試，但由于一些令人抓狂的原因，我的Service Worker 邏輯似乎從未執行    161

11.3.4  我已經(jīng)在Service Worker 文件中添加代碼來(lái)處理推送通知，但是如何在不寫(xiě)服務(wù)端代碼的情況下進(jìn)行快速測試呢  .162

11.3.5  我已經(jīng)構建了離線(xiàn) Web 應用，但是現在無(wú)法得知用戶(hù)是如何使用的，那么如何追蹤用戶(hù)的使用情況呢   162

11.4  總結   163

第12章  前程似錦    164

12.1  引言   164

12.2  Web藍牙    165

12.3  Web分享API   166

12.4  支付請求API   169

12.5  硬件訪(fǎng)問(wèn)   172

12.6  硬件：形狀檢測API   172

12.7  接下來(lái)呢   173

12.8  總結   174