轻量级兼顾本地体验，PWA应用到底有多卷？
隨著智能手機(jī)的普及，移動(dòng)端應(yīng)用幾乎成為每個(gè)互聯(lián)網(wǎng)產(chǎn)品的標(biāo)配。在快速迭代的互聯(lián)網(wǎng)戰(zhàn)場(chǎng)中高效開發(fā)、低成本上線產(chǎn)品，是每個(gè)應(yīng)用開發(fā)團(tuán)隊(duì)追求的目標(biāo)。此時(shí)，選擇合適的應(yīng)用類型和開發(fā)模式便至關(guān)重要。
移動(dòng)應(yīng)用可以粗分為四種：原生應(yīng)用(Native App)， 網(wǎng)頁(yè)應(yīng)用(Web App，或HTML5 App)，混合模式移動(dòng)應(yīng)用(Hybrid App)，還有我們今天要聊的漸進(jìn)式網(wǎng)頁(yè)應(yīng)用(Progressive Web App)。
PWA 本質(zhì)上還是一個(gè) Web App ，但在表現(xiàn)上比 Web App 更加接近 Native App 。雖然我們?cè)诖伺c Native App 進(jìn)行了比較，但是 PWA 的目的并不是為了取代 Native App ，也不是為了與 Native App 一較高下，而是對(duì) Web App 的升級(jí)，是為了帶給用戶更好的用戶體驗(yàn)。
知乎某文章關(guān)于四種應(yīng)用類型的對(duì)比，僅供參考
PWA具有快速、可靠、用戶粘性高的特點(diǎn)。
快速即快速響應(yīng)，通過獨(dú)立的線程進(jìn)行資源緩存，提高頁(yè)面的加載時(shí)間；可靠指在不穩(wěn)當(dāng)?shù)木W(wǎng)絡(luò)環(huán)境下，App 也能瞬間加載并展現(xiàn)內(nèi)容，在離線環(huán)境下也提供用戶有效反饋；用戶粘性高則是通過沉浸式的用戶界面、桌面圖標(biāo)、消息推送等手段來增強(qiáng)用戶的粘度。
下面，我們就從這三個(gè)特點(diǎn)展開，來說說這些特點(diǎn)是如何具體實(shí)現(xiàn)的，并且能夠給開發(fā)者帶來怎樣的收益，對(duì)于用戶而言又能帶來哪些優(yōu)化體驗(yàn)。
快? 速
資源緩存
在使用PWA時(shí)，Service Worker 會(huì)將特定響應(yīng)緩存下來，然后在下次監(jiān)聽到相同請(qǐng)求時(shí)，直接返回緩存，提高響應(yīng)時(shí)間，并減少服務(wù)器壓力。開發(fā)者可以通過請(qǐng)求路徑的正則匹配，在用戶第一次訪問網(wǎng)站時(shí)，緩存所有更新較少的靜態(tài)資源，之后都從緩存中更新，提高冷啟動(dòng)的響應(yīng)時(shí)間。
可? 靠
離線 offline 頁(yè)面
在用戶網(wǎng)絡(luò)不佳或斷網(wǎng)的情況下，通常會(huì)出現(xiàn)瀏覽器自帶的網(wǎng)絡(luò)崩潰頁(yè)面，給人一種服務(wù)可訪問性差的印象。但是PWA可以在用戶第一次訪問網(wǎng)站時(shí)，預(yù)緩存一個(gè) offline 的靜態(tài)頁(yè)面，在監(jiān)聽到請(qǐng)求失敗時(shí)返回該頁(yè)面，改善用戶的體驗(yàn)。
用戶粘性高
屏幕留存圖標(biāo)
即在配置文件中添加桌面留存圖標(biāo)的 icon 和名稱，當(dāng)用戶將網(wǎng)站保存在桌面后，會(huì)自動(dòng)啟用配置信息。
添加到主屏幕的好處有很多，桌面圖標(biāo)減少了網(wǎng)站的入口深度，用戶可以從主屏幕直達(dá)站點(diǎn)，而無需從瀏覽器首頁(yè)一層層進(jìn)入。添加屏幕圖標(biāo)無需下載，類似桌面快捷鍵，減少了用戶安裝應(yīng)用的成本。
以上四個(gè)均是PWA服務(wù)的本地桌面添加圖標(biāo)
當(dāng)然，添加桌面圖標(biāo)和添加網(wǎng)頁(yè)快捷方式仍有所不同：
1. 屏幕留存圖標(biāo)擁有獨(dú)立的圖標(biāo)和名稱。
2. 點(diǎn)擊圖標(biāo)打開網(wǎng)站，資源加載時(shí)不會(huì)像普通網(wǎng)頁(yè)那樣出現(xiàn)白屏，取而代之的是一個(gè)展示應(yīng)用圖標(biāo)和名稱的啟動(dòng)頁(yè)面，資源加載結(jié)束時(shí)加載頁(yè)消失。
3. 當(dāng)網(wǎng)頁(yè)最終展現(xiàn)時(shí)，地址欄、工具欄等瀏覽器元素將不會(huì)展現(xiàn)出來，網(wǎng)頁(yè)內(nèi)容占滿屏幕，看起來與 Native App 一樣。
安裝彈窗
瀏覽器會(huì)根據(jù)用戶的訪問頻率，在合適的時(shí)間彈出彈窗，詢問用戶是否需要添加屏幕圖標(biāo)。這主要用于引導(dǎo)用戶“安裝”，留存屏幕圖標(biāo)，提高屏幕圖標(biāo)的添加率。
星巴克PWA版的安裝彈窗
推送消息提醒
提供消息推送有很多優(yōu)點(diǎn)，首先可以吸引用戶訪問；而且PWA消息的推送只要瀏覽器在運(yùn)行即可，無需用戶打開網(wǎng)頁(yè)；消息推送需要獲取用戶授權(quán)，但對(duì)于同一個(gè)域名下的網(wǎng)頁(yè)，只需要獲取一次授權(quán)。
這一功能實(shí)現(xiàn)其實(shí)包含了兩個(gè)API——Push API和Notificatiion API。其中，Push API提供推送服務(wù)，獲得用戶訂閱授權(quán)后，在服務(wù)端需要推送消息時(shí)，直接向用戶提供消息推送；而Notificationg API保證了即使是在用戶關(guān)閉該P(yáng)WA時(shí)，依然可以收到提醒，類似于Native中的消息提醒。
如今，PWA正逐漸受到開發(fā)者群體的追捧，也許很多人會(huì)基于開發(fā)成本、用戶體驗(yàn)等原因優(yōu)先考慮開發(fā)PWA。但是，每個(gè)產(chǎn)品各具特色，還沒有哪一種解決方案可以完美地應(yīng)萬變。關(guān)于不同產(chǎn)品的爭(zhēng)論也從未停止。
僅供參考
PWA將在未來大放異彩，目前雖然還有很多實(shí)際的問題需要解決，但我們相信，在開發(fā)者們共同的努力下，這些問題都能迎刃而解。本文只是對(duì)PWA的優(yōu)勢(shì)和實(shí)現(xiàn)做了個(gè)粗淺的介紹，具體如何開發(fā)，我們將慢慢與大家分享~
鼎道智聯(lián)致力于打造以人為本、基于設(shè)備的，智能推薦并交付物聯(lián)網(wǎng)服務(wù)的Ding OS，并構(gòu)建面向未來的 PWA 網(wǎng)絡(luò)應(yīng)用程序生態(tài)。Ding OS將為 PWA 提供豐厚的沃土，除了全面強(qiáng)大的技術(shù)支持，我們還會(huì)提供更具生命力的商業(yè)模式，與開發(fā)者一同建設(shè)持續(xù)、開放、共贏的生態(tài)，歡迎各界開發(fā)者朋友們關(guān)注并加入我們！
內(nèi)容參考：
1、現(xiàn)代化 Web 開發(fā)實(shí)踐之PWA：
https://zhuanlan.zhihu.com/p/299469913
2、讓你的WebApp離線可用 ：
https://www.jianshu.com/p/25331bf16543
更多精彩內(nèi)容推薦：
《互聯(lián)網(wǎng)體檢》過于真實(shí)，作為開發(fā)者，我們還能做點(diǎn)啥？
什么是Web開發(fā)的現(xiàn)在與將來？???????
總結(jié)
以上是生活随笔為你收集整理的轻量级兼顾本地体验，PWA应用到底有多卷？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python清除缓存的命令_python
- 下一篇： cesium类文档查找