本書對PWA的核心技術(shù)進行了比較透徹的講解,對PWA中可能遇到的問題也進行了充分說明,通過閱讀本書,讀者可以對PWA有深入的理解。全書共7章:第1章介紹PWA的發(fā)展歷程及生態(tài)環(huán)境;第2章介紹PWA的一些前置技術(shù)及預(yù)備知識;第3章學(xué)習(xí)PWA的核心部分——Service Worker;第4章進入PWA的核心API部分;第5章給出了PWA使用過程中的配套工具;第6章為PWA的實踐部分;第7章講解Web的系統(tǒng)集成能力。本書適用于有一定Web開發(fā)基礎(chǔ),或想學(xué)習(xí)PWA、需要一本全面的PWA手冊的開發(fā)者。
本書是一本PWA技術(shù)入門和實踐的圖書。
通過本書,你可以對PWA有較深入的理解并進行一些項目實踐。本書對PWA的核心技術(shù)做了透徹的講解,對PWA中可能遇到的問題及一些注意事項也進行了充分說明。
閱讀過程中,所有的PWA知識點基本都可以在本書中找到說明。
本書既可以作為一本PWA的入門圖書,也可以作為一本PWA的使用手冊。遇到關(guān)于PWA的問題時,請閱讀這本書,相信本書可以讓你找到問題的解決方法。
【前 言】
我最初接觸PWA是在2017年年初,當(dāng)時參加了一個前端分享會,其中一個主題就是與PWA相關(guān)的,介紹了PWA的Service Worker和安裝到桌面的能力,以及這門技術(shù)未來的發(fā)展趨勢,聽完這個分享后,我就為PWA的一些能力所吸引。
Web本身的優(yōu)勢就非常明顯,如可分享,可搜索,無須下載,在任何設(shè)備上有相同的展示等,現(xiàn)在再加上PWA的能力,讓W(xué)eb在原有的基礎(chǔ)上具備了類原生應(yīng)用程序的功能,這對于Web開發(fā)者來說是一個福音,可以讓W(xué)eb提供更好的用戶體驗,也能帶來更多紅利。隨后,我便開始了對PWA的學(xué)習(xí)和探索之路。
在實際工作中,有很多場景適合使用PWA,這也使我的PWA實踐之路有了一個很好的前提條件。在實踐的過程中,并沒有想象的那么順利,PWA的大多數(shù)概念都有一些理解成本,一不小心就會犯錯,大多數(shù)情況下是一邊“挖坑”一邊“填坑”。當(dāng)然,最后在很多合適的場景中,我發(fā)現(xiàn)PWA的接入確實帶來了非常好的效果,為業(yè)務(wù)產(chǎn)品帶來了更多價值,提升了用戶體驗。
本書是一本PWA技術(shù)入門和實踐的圖書。通過本書,你可以對PWA有較深入的理解并進行一些項目實踐。本書對PWA的核心技術(shù)做了比較透徹的講解,對PWA中可能遇到的問題及一些注意事項也進行了充分說明。閱讀過程中,所有的PWA知識點基本都可以在本書中找到說明。本書既可以作為一本PWA的入門圖書,也可以作為一本PWA的使用手冊。遇到關(guān)于PWA的問題時,請閱讀這本書,相信本書可以讓你找到問題的解決方法。
●第1章介紹PWA的發(fā)展歷程及生態(tài)環(huán)境,并為你開啟第一個PWA應(yīng)用示例,讓你對PWA有一個基本了解。
●第2章介紹PWA的一些前置技術(shù)及預(yù)備知識,讓你后面的學(xué)習(xí)過程更順暢,如果你對這部分知識已有所了解,則可以跳過這一章。
●第3章開始對PWA最核心的部分—Service Worker進行講解,這一章詳細(xì)講解了Service Worker的各個知識點、注意事項及實踐。
●第4章開始進入 PWA的核心API部分,在這一章中,你可以學(xué)習(xí)PWA的一些核心API,包含安裝到桌面、新一代網(wǎng)絡(luò)請求、消息通知、后臺同步、離線緩存、消息推送,該章中各小節(jié)屬于并行知識點,可根據(jù)需求閱讀任意一節(jié)。
●第5章介紹PWA使用過程中的一些配套工具,包括調(diào)試工具、評測工具和提效工具,等等,讓你的PWA開發(fā)過程更順暢。
●第6章為PWA的實踐部分,針對不同的功能需求進行實踐講解。
●第7章講解Web的系統(tǒng)集成能力,讓系統(tǒng)集成能力配合PWA,使Web可以和應(yīng)用程序相媲美。
本書主要面向有一定Web開發(fā)基礎(chǔ)的讀者,以及想學(xué)習(xí)PWA或者需要一本全面的PWA手冊的開發(fā)者。
本書中用到的項目代碼可以通過GitHub下載,地址為https://github.com/lecepin/PWA-Book。
==================================================
【序 言】
如今,互聯(lián)網(wǎng)大流量早已進入了移動端,國內(nèi)主流互聯(lián)網(wǎng)產(chǎn)品的移動端流量已經(jīng)普遍超過整體流量的80%。在移動端應(yīng)用開發(fā)中,我們要面臨為不同操作系統(tǒng)(Android、iOS、Windows 10)、不同設(shè)備(手機、平板)開發(fā)應(yīng)用的問題,為此我們需要投入額外的成本應(yīng)對這些差異。就算我們投入了成本,開發(fā)出了產(chǎn)品,在下載和安裝環(huán)節(jié),仍然存在很大的推廣成本問題。統(tǒng)計學(xué)研究表明,安裝煩瑣是用戶放棄嘗試更多應(yīng)用的主要原因之一。
PWA技術(shù)可以很好地解決這些問題。PWA運用現(xiàn)代的Web API能力為Web進行了擴展和增強,使Web具有與原生應(yīng)用程序類似的體驗度和能力。作為一種W3C的規(guī)范實現(xiàn),PWA可以正常地運行在各個平臺的瀏覽器中,真正做到一套代碼解決所有平臺一致性問題。同樣,由于PWA具備安裝成本幾乎為0的特點,它非常適合實現(xiàn)Web端到應(yīng)用端的過渡,提升轉(zhuǎn)化率。
目前,國內(nèi)外越來越多的網(wǎng)站對PWA進行了接入,如星巴克、優(yōu)步、推特、臉書、淘寶、餓了么,等等,接入后的性能和轉(zhuǎn)化率都有明顯提升。如今谷歌、微軟、英特爾等公司為PWA投入了技術(shù)支持和發(fā)展,Web的主流框架React、Vue等對PWA提供了快速接入方案,主流的瀏覽器廠商也緊跟其后,共同為PWA生態(tài)系統(tǒng)提供支持。
然而,根據(jù)我近幾年對國內(nèi)業(yè)界和前端社區(qū)的觀察,可以說PWA在國內(nèi)還沒有發(fā)揮出它應(yīng)有的作用。在這里,我嘗試分析一下其中的原因,以及未來趨勢。
第一,至少近三年,國內(nèi)前端領(lǐng)域的技術(shù)發(fā)展,除了跟隨國外最新動向之外,總的趨勢是業(yè)務(wù)屬性較強的技術(shù)更受重視。其中,最令人矚目的小程序相關(guān)技術(shù),以及低代碼搭建相關(guān)技術(shù),就是典型—兩者分別迎合了國內(nèi)頭部互聯(lián)網(wǎng)公司流量分發(fā)強管控的現(xiàn)實需求,以及中國互聯(lián)網(wǎng)產(chǎn)業(yè)逐步轉(zhuǎn)向企業(yè)服務(wù)的大背景。
PWA作為一個中立性很強的技術(shù)組合,盡管主要由Google推動,但其開放性以及主要著眼點在于優(yōu)化具體的產(chǎn)品體驗而非滿足業(yè)務(wù)訴求的特點,導(dǎo)致它在國內(nèi)主要由社區(qū)推動,聲量明顯不如商業(yè)推動力強的技術(shù),處于一種“大家各取所需,卻不知道別人也在各取所需”的微妙境地。
面對這種狀況,作為技術(shù)人,我們要理性看待,而不是像一些跟風(fēng)者一樣片面地去肯定或者否定一項技術(shù)。事實上,PWA作為一個漸進式的技術(shù)組合,其中的若干技術(shù),比如Service Worker、離線存儲,乃至性能評估工具Lighthouse等,早已因其極強的實用性,在國內(nèi)得到了廣泛應(yīng)用。
第二,一項工程技術(shù)的落地,除了原理論證以及各種功能點與性能指標(biāo)的驗證之外,還需要一個成本頗高的“踩坑”過程。這不是找一兩個實習(xí)生通過Demo做個演示就可以解決的,而是需要實實在在的經(jīng)驗積累,其中既包含實現(xiàn)細(xì)節(jié)、性能優(yōu)化、技術(shù)權(quán)衡、應(yīng)對國內(nèi)特殊場景的技巧等知識的積累,又包含開發(fā)、運維、數(shù)據(jù)統(tǒng)計等必不可少的開發(fā)工作鏈路上的基礎(chǔ)設(shè)施建設(shè)與經(jīng)驗積累。
一直以來,PWA技術(shù)領(lǐng)域都缺乏優(yōu)質(zhì)、可靠的中文技術(shù)資料。對其做調(diào)研的團隊,一方面直接參考官方文檔,一方面只能通過各種技術(shù)博客等不可靠的渠道獲取一些零散的信息,通過拼湊和嘗試積累經(jīng)驗,這無形中推高了技術(shù)調(diào)研的成本。
而你現(xiàn)在看到的這本書可以作為一個好的開始。作為第一本出現(xiàn)在我視野中的中文PWA技術(shù)書籍,這本書的優(yōu)點在于,它既不是文檔翻譯,也不是手把手教你敲命令,把開發(fā)技術(shù)寫成“菜譜”,而是涵蓋了從理論準(zhǔn)備到實操流程,再到經(jīng)驗分享的一本“全鏈路書籍”。它可以幫你真正理解PWA,同時獲得一些由作者親自驗證過的工程落地中“踩坑”的經(jīng)驗。從這個角度來說,這本書完全可以稱為“PWA民間中文指南”,有了它,我們終于擁有了一些可靠的、系統(tǒng)化的、本地化的、開箱即用的PWA技術(shù)資產(chǎn)。
第三,PWA的定位在于讓開發(fā)者快速開發(fā)出同時具備“優(yōu)質(zhì)的Web,輕盈的應(yīng)用”兩種屬性的產(chǎn)品。而這樣的屬性,在粗放發(fā)展的互聯(lián)網(wǎng)業(yè)態(tài)中,暫時沒有得到應(yīng)有的重視。
然而,事情正在發(fā)生變化。
在大家都在談?wù)摗盎ヂ?lián)網(wǎng)下半場”的時代,我們有必要思考“下半場”對于我們而言有什么樣的具體含義。我的個人理解是,所謂上半場,比的是人無我有,人慢我快;而下半場,比的是人有我優(yōu),人粗放我精致,我們現(xiàn)在正在見證這樣的市場轉(zhuǎn)變。而PWA,作為一種顯著提高用戶體驗的技術(shù),必然在這個過程中展現(xiàn)出它的優(yōu)勢,誰能更快更好地利用這種優(yōu)勢,誰就能在新階段的前端技術(shù)競爭中占領(lǐng)先機。
綜上,這是一本值得期待的書,它在一定程度上彌補了國內(nèi)PWA領(lǐng)域技術(shù)書籍的空白,并且將這個任務(wù)完成得相當(dāng)漂亮。如果有人請我分享前端技術(shù)書單,我想這本書應(yīng)該會位列其中。
—知乎知名技術(shù)作者 欲三更
2020年4月于杭州
王樂平
前端工程師,W3C成員,CSDN博客專家,目前就職于阿里巴巴。專注于Web技術(shù),參與過許多高流量Web項目的設(shè)計和開發(fā),擁有豐富的Web前端開發(fā)經(jīng)驗,對PWA有比較深入的理解和實踐經(jīng)驗。
序 言
前 言
第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 實例方法33
2.2.5 靜態(tài)方法35
2.2.6 實例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 實例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 自定義安裝時機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 實例95
4.3 Notification 消息通知98
4.3.1 簡介98
4.3.2 接口信息99
4.3.3 實例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 訂閱實現(xiàn)121
4.6.4 推送協(xié)議124
4.6.5 VAPID 密鑰的生成126
4.6.6 實例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 實例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章 實踐方案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)方案實現(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 離線處理時機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)集成項目組Fugu216
7.2 攝像頭和麥克風(fēng)集成217
7.2.1 音頻和視頻的捕獲217
7.2.2 視頻流的截圖219
7.2.3 視頻流下載221
7.3 輸入集成224
7.3.1 語音識別224
7.3.2 剪切板操作226
7.4 設(shè)備特性集成228
7.4.1 網(wǎng)絡(luò)類型及速度信息229
7.4.2 網(wǎng)絡(luò)狀態(tài)信息229
7.4.3 電池狀態(tài)信息230
7.4.4 設(shè)備內(nèi)存信息230
7.5 定位集成231
7.5.1 地理定位231
7.5.2 設(shè)備位置233
7.6 本章小結(jié)235