【前　　言】
我最初接觸PWA是在2017年年初，當(dāng)時(shí)參加了一個(gè)前端分享會(huì)，其中一個(gè)主題就是與PWA相關(guān)的，介紹了PWA的Service Worker和安裝到桌面的能力，以及這門(mén)技術(shù)未來(lái)的發(fā)展趨勢(shì)，聽(tīng)完這個(gè)分享后，我就為PWA的一些能力所吸引。
Web本身的優(yōu)勢(shì)就非常明顯，如可分享，可搜索，無(wú)須下載，在任何設(shè)備上有相同的展示等，現(xiàn)在再加上PWA的能力，讓W(xué)eb在原有的基礎(chǔ)上具備了類(lèi)原生應(yīng)用程序的功能，這對(duì)于Web開(kāi)發(fā)者來(lái)說(shuō)是一個(gè)福音，可以讓W(xué)eb提供更好的用戶(hù)體驗(yàn)，也能帶來(lái)更多紅利。隨后，我便開(kāi)始了對(duì)PWA的學(xué)習(xí)和探索之路。
在實(shí)際工作中，有很多場(chǎng)景適合使用PWA，這也使我的PWA實(shí)踐之路有了一個(gè)很好的前提條件。在實(shí)踐的過(guò)程中，并沒(méi)有想象的那么順利，PWA的大多數(shù)概念都有一些理解成本，一不小心就會(huì)犯錯(cuò)，大多數(shù)情況下是一邊“挖坑”一邊“填坑”。當(dāng)然，最后在很多合適的場(chǎng)景中，我發(fā)現(xiàn)PWA的接入確實(shí)帶來(lái)了非常好的效果，為業(yè)務(wù)產(chǎn)品帶來(lái)了更多價(jià)值，提升了用戶(hù)體驗(yàn)。
本書(shū)是一本PWA技術(shù)入門(mén)和實(shí)踐的圖書(shū)。通過(guò)本書(shū)，你可以對(duì)PWA有較深入的理解并進(jìn)行一些項(xiàng)目實(shí)踐。本書(shū)對(duì)PWA的核心技術(shù)做了比較透徹的講解，對(duì)PWA中可能遇到的問(wèn)題及一些注意事項(xiàng)也進(jìn)行了充分說(shuō)明。閱讀過(guò)程中，所有的PWA知識(shí)點(diǎn)基本都可以在本書(shū)中找到說(shuō)明。本書(shū)既可以作為一本PWA的入門(mén)圖書(shū)，也可以作為一本PWA的使用手冊(cè)。遇到關(guān)于PWA的問(wèn)題時(shí)，請(qǐng)閱讀這本書(shū)，相信本書(shū)可以讓你找到問(wèn)題的解決方法。
●第1章介紹PWA的發(fā)展歷程及生態(tài)環(huán)境，并為你開(kāi)啟第一個(gè)PWA應(yīng)用示例，讓你對(duì)PWA有一個(gè)基本了解。
●第2章介紹PWA的一些前置技術(shù)及預(yù)備知識(shí)，讓你后面的學(xué)習(xí)過(guò)程更順暢，如果你對(duì)這部分知識(shí)已有所了解，則可以跳過(guò)這一章。
●第3章開(kāi)始對(duì)PWA最核心的部分—Service Worker進(jìn)行講解，這一章詳細(xì)講解了Service Worker的各個(gè)知識(shí)點(diǎn)、注意事項(xiàng)及實(shí)踐。
●第4章開(kāi)始進(jìn)入 PWA的核心API部分，在這一章中，你可以學(xué)習(xí)PWA的一些核心API，包含安裝到桌面、新一代網(wǎng)絡(luò)請(qǐng)求、消息通知、后臺(tái)同步、離線(xiàn)緩存、消息推送，該章中各小節(jié)屬于并行知識(shí)點(diǎn)，可根據(jù)需求閱讀任意一節(jié)。
●第5章介紹PWA使用過(guò)程中的一些配套工具，包括調(diào)試工具、評(píng)測(cè)工具和提效工具，等等，讓你的PWA開(kāi)發(fā)過(guò)程更順暢。
●第6章為PWA的實(shí)踐部分，針對(duì)不同的功能需求進(jìn)行實(shí)踐講解。
●第7章講解Web的系統(tǒng)集成能力，讓系統(tǒng)集成能力配合PWA，使Web可以和應(yīng)用程序相媲美。
本書(shū)主要面向有一定Web開(kāi)發(fā)基礎(chǔ)的讀者，以及想學(xué)習(xí)PWA或者需要一本全面的PWA手冊(cè)的開(kāi)發(fā)者。
本書(shū)中用到的項(xiàng)目代碼可以通過(guò)GitHub下載，地址為https://github.com/lecepin/PWA-Book。


==================================================


【序　　言】
如今，互聯(lián)網(wǎng)大流量早已進(jìn)入了移動(dòng)端，國(guó)內(nèi)主流互聯(lián)網(wǎng)產(chǎn)品的移動(dòng)端流量已經(jīng)普遍超過(guò)整體流量的80%。在移動(dòng)端應(yīng)用開(kāi)發(fā)中，我們要面臨為不同操作系統(tǒng)（Android、iOS、Windows 10）、不同設(shè)備（手機(jī)、平板）開(kāi)發(fā)應(yīng)用的問(wèn)題，為此我們需要投入額外的成本應(yīng)對(duì)這些差異。就算我們投入了成本，開(kāi)發(fā)出了產(chǎn)品，在下載和安裝環(huán)節(jié)，仍然存在很大的推廣成本問(wèn)題。統(tǒng)計(jì)學(xué)研究表明，安裝煩瑣是用戶(hù)放棄嘗試更多應(yīng)用的主要原因之一。
PWA技術(shù)可以很好地解決這些問(wèn)題。PWA運(yùn)用現(xiàn)代的Web API能力為Web進(jìn)行了擴(kuò)展和增強(qiáng)，使Web具有與原生應(yīng)用程序類(lèi)似的體驗(yàn)度和能力。作為一種W3C的規(guī)范實(shí)現(xiàn)，PWA可以正常地運(yùn)行在各個(gè)平臺(tái)的瀏覽器中，真正做到一套代碼解決所有平臺(tái)一致性問(wèn)題。同樣，由于PWA具備安裝成本幾乎為0的特點(diǎn)，它非常適合實(shí)現(xiàn)Web端到應(yīng)用端的過(guò)渡，提升轉(zhuǎn)化率。
目前，國(guó)內(nèi)外越來(lái)越多的網(wǎng)站對(duì)PWA進(jìn)行了接入，如星巴克、優(yōu)步、推特、臉書(shū)、淘寶、餓了么，等等，接入后的性能和轉(zhuǎn)化率都有明顯提升。如今谷歌、微軟、英特爾等公司為PWA投入了技術(shù)支持和發(fā)展，Web的主流框架React、Vue等對(duì)PWA提供了快速接入方案，主流的瀏覽器廠(chǎng)商也緊跟其后，共同為PWA生態(tài)系統(tǒng)提供支持。
然而，根據(jù)我近幾年對(duì)國(guó)內(nèi)業(yè)界和前端社區(qū)的觀(guān)察，可以說(shuō)PWA在國(guó)內(nèi)還沒(méi)有發(fā)揮出它應(yīng)有的作用。在這里，我嘗試分析一下其中的原因，以及未來(lái)趨勢(shì)。
第一，至少近三年，國(guó)內(nèi)前端領(lǐng)域的技術(shù)發(fā)展，除了跟隨國(guó)外最新動(dòng)向之外，總的趨勢(shì)是業(yè)務(wù)屬性較強(qiáng)的技術(shù)更受重視。其中，最令人矚目的小程序相關(guān)技術(shù)，以及低代碼搭建相關(guān)技術(shù)，就是典型—兩者分別迎合了國(guó)內(nèi)頭部互聯(lián)網(wǎng)公司流量分發(fā)強(qiáng)管控的現(xiàn)實(shí)需求，以及中國(guó)互聯(lián)網(wǎng)產(chǎn)業(yè)逐步轉(zhuǎn)向企業(yè)服務(wù)的大背景。
PWA作為一個(gè)中立性很強(qiáng)的技術(shù)組合，盡管主要由Google推動(dòng)，但其開(kāi)放性以及主要著眼點(diǎn)在于優(yōu)化具體的產(chǎn)品體驗(yàn)而非滿(mǎn)足業(yè)務(wù)訴求的特點(diǎn)，導(dǎo)致它在國(guó)內(nèi)主要由社區(qū)推動(dòng)，聲量明顯不如商業(yè)推動(dòng)力強(qiáng)的技術(shù)，處于一種“大家各取所需，卻不知道別人也在各取所需”的微妙境地。
面對(duì)這種狀況，作為技術(shù)人，我們要理性看待，而不是像一些跟風(fēng)者一樣片面地去肯定或者否定一項(xiàng)技術(shù)。事實(shí)上，PWA作為一個(gè)漸進(jìn)式的技術(shù)組合，其中的若干技術(shù)，比如Service Worker、離線(xiàn)存儲(chǔ)，乃至性能評(píng)估工具Lighthouse等，早已因其極強(qiáng)的實(shí)用性，在國(guó)內(nèi)得到了廣泛應(yīng)用。
第二，一項(xiàng)工程技術(shù)的落地，除了原理論證以及各種功能點(diǎn)與性能指標(biāo)的驗(yàn)證之外，還需要一個(gè)成本頗高的“踩坑”過(guò)程。這不是找一兩個(gè)實(shí)習(xí)生通過(guò)Demo做個(gè)演示就可以解決的，而是需要實(shí)實(shí)在在的經(jīng)驗(yàn)積累，其中既包含實(shí)現(xiàn)細(xì)節(jié)、性能優(yōu)化、技術(shù)權(quán)衡、應(yīng)對(duì)國(guó)內(nèi)特殊場(chǎng)景的技巧等知識(shí)的積累，又包含開(kāi)發(fā)、運(yùn)維、數(shù)據(jù)統(tǒng)計(jì)等必不可少的開(kāi)發(fā)工作鏈路上的基礎(chǔ)設(shè)施建設(shè)與經(jīng)驗(yàn)積累。
一直以來(lái)，PWA技術(shù)領(lǐng)域都缺乏優(yōu)質(zhì)、可靠的中文技術(shù)資料。對(duì)其做調(diào)研的團(tuán)隊(duì)，一方面直接參考官方文檔，一方面只能通過(guò)各種技術(shù)博客等不可靠的渠道獲取一些零散的信息，通過(guò)拼湊和嘗試積累經(jīng)驗(yàn)，這無(wú)形中推高了技術(shù)調(diào)研的成本。
而你現(xiàn)在看到的這本書(shū)可以作為一個(gè)好的開(kāi)始。作為第一本出現(xiàn)在我視野中的中文PWA技術(shù)書(shū)籍，這本書(shū)的優(yōu)點(diǎn)在于，它既不是文檔翻譯，也不是手把手教你敲命令，把開(kāi)發(fā)技術(shù)寫(xiě)成“菜譜”，而是涵蓋了從理論準(zhǔn)備到實(shí)操流程，再到經(jīng)驗(yàn)分享的一本“全鏈路書(shū)籍”。它可以幫你真正理解PWA，同時(shí)獲得一些由作者親自驗(yàn)證過(guò)的工程落地中“踩坑”的經(jīng)驗(yàn)。從這個(gè)角度來(lái)說(shuō)，這本書(shū)完全可以稱(chēng)為“PWA民間中文指南”，有了它，我們終于擁有了一些可靠的、系統(tǒng)化的、本地化的、開(kāi)箱即用的PWA技術(shù)資產(chǎn)。
第三，PWA的定位在于讓開(kāi)發(fā)者快速開(kāi)發(fā)出同時(shí)具備“優(yōu)質(zhì)的Web，輕盈的應(yīng)用”兩種屬性的產(chǎn)品。而這樣的屬性，在粗放發(fā)展的互聯(lián)網(wǎng)業(yè)態(tài)中，暫時(shí)沒(méi)有得到應(yīng)有的重視。
然而，事情正在發(fā)生變化。
在大家都在談?wù)摗盎ヂ?lián)網(wǎng)下半場(chǎng)”的時(shí)代，我們有必要思考“下半場(chǎng)”對(duì)于我們而言有什么樣的具體含義。我的個(gè)人理解是，所謂上半場(chǎng)，比的是人無(wú)我有，人慢我快；而下半場(chǎng)，比的是人有我優(yōu)，人粗放我精致，我們現(xiàn)在正在見(jiàn)證這樣的市場(chǎng)轉(zhuǎn)變。而PWA，作為一種顯著提高用戶(hù)體驗(yàn)的技術(shù)，必然在這個(gè)過(guò)程中展現(xiàn)出它的優(yōu)勢(shì)，誰(shuí)能更快更好地利用這種優(yōu)勢(shì)，誰(shuí)就能在新階段的前端技術(shù)競(jìng)爭(zhēng)中占領(lǐng)先機(jī)。
綜上，這是一本值得期待的書(shū)，它在一定程度上彌補(bǔ)了國(guó)內(nèi)PWA領(lǐng)域技術(shù)書(shū)籍的空白，并且將這個(gè)任務(wù)完成得相當(dāng)漂亮。如果有人請(qǐng)我分享前端技術(shù)書(shū)單，我想這本書(shū)應(yīng)該會(huì)位列其中。
—知乎知名技術(shù)作者　欲三更
2020年4月于杭州