PWA官網 · 前端筆記

[TOC] # Progressive Web Apps 一種新的方式為web提供極其驚人的用戶體驗。 PWA應用的超前的體驗方式已經可以開始使用，這是它的優點。 * 極其可靠的：PWA應用擁有極其快速的載入速度，即便是在離線無網絡的環境下也不會出現網絡異常。 * 它的響應非常的迅速并且擁有絲滑流暢的動畫，絕對不會出現異常卡頓滑動。 * 你會感覺就像在使用一個原生應用，并且擁有它會提供給你沉浸式的用戶體驗。最新的特性允許你在桌面創建一個PWA應用的圖標。 ## 可靠性當你從桌面點擊PWA應用的時候，PWA服務會非常快速加載PWA應用，無視網絡環境。 PWA服務就像一個代理客戶端，它由JavaScript寫成，并且可以讓你控制緩存和如何響應資源的請求，并且PWA應用通過預緩存即預先加載緩存資源讓用戶不必依靠網絡就可以打開PWA應用，確保了可靠的即時的應用體驗。 [關于Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/) ![](https://box.kancloud.cn/c3cb092d175dab5b04df9a738eb3feb9_1850x1042.png) ## 快速如果一個網站加載甚至需要3秒，那么53%的用戶都會拋棄它。當用戶一旦點擊開啟即時app，用戶希望它的開啟是快速的，沒有延遲，沒有異常滑動和慢響應。 [了解更多](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) ![](https://box.kancloud.cn/a0d180bcc7d2d92a4be20ae356fd89be_1850x1042.png) ## 參與性 PWA應用可被添加在用戶的桌面上，不需要應用商店，通過PWA應用的配置文件可以為用戶提供全屏沉浸的體驗，甚至可以通過網絡發起通知重新吸引用戶。配置文件允許你控制你的PWA應用怎么被顯示和啟動，你可以把它放在桌面上，并且可以改變他的圖標移動它的位置，指定應用在啟動時啟動哪個界面，屏幕方向，甚至是顯示或者不顯示chrome瀏覽器。 [web-app-manifest](https://developers.google.com/web/fundamentals/web-app-manifest/) [Web Push Notifications](https://developers.google.com/web/fundamentals/push-notifications/) ## 為什么要開發一個PWA應用開發一個PWA應用是非常有幫助的，可以提高你的用戶的使用愉悅讀，增加用戶參與度并且提高用戶轉化率。 * [呈現在用戶桌面上](https://developers.google.com/web/fundamentals/app-install-banners/) 當你的PWA應用符合PWA標準時，chrome會提示用戶將其放在桌面上。 * [無論什么情況的網絡下，PWA應用都可以可靠的工作](https://developers.google.com/web/progressive-web-apps/) 開發人員使Konga(一個購物網站)在初始化頁面的時候使數據加載量減少了63%，第一次響應用戶操作的數據量也減少了84%。 * [增加用戶的參與度](https://developers.google.com/web/showcase/2016/extra) 基于的web通知推送方式幫助eXtra Electronics (同樣是購物網站)他們的用戶在這個網站增加了4倍的參與度，并且這些用戶在這個網站停留了比以往兩倍的時間。 * [提高用戶轉化](https://developers.google.com/web/showcase/2016/aliexpress) PWA應用得天獨厚的體驗方式幫助AliExpress將第一次瀏覽這個網站的新用戶的轉化次數提高了104%，在IOS端轉化次數提高了82%。 ## Lighthouse 這是一個開源的自動化工具，并且他可以幫助你提高的應用質量，你甚至將它集成到你的應用里，來抓取用戶使用用遇到的問題。 ![](https://box.kancloud.cn/a331d7525c23f852e855c2dd9b79ca5a_1850x1042.png) [了解更多](https://developers.google.com/web/tools/lighthouse/) ## 深入研究 ### [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist) 這份清單打破了我們認為成為Progressive Web App所需的所有事情。 ### [轉到HTTPS](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) 必須從安全的來源提供漸進式Web應用程序。 ### [防止混合內容](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content) 查找和防止混合內容對于確保安全起源至關重要。 ### [App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners) Chrome使用一組條件和訪問頻率啟發式來確定何時顯示橫幅廣告。 ### [Lighthouse](https://developers.google.com/web/tools/lighthouse/) Lighthouse是一種開源的自動化工具，用于提高Web應用程序的質量。 ### [得到支持](http://stackoverflow.com/questions/tagged/progressive-web-apps) 在Stack Overflow上回答您的問題。 ## 參考資料 [Progressive Web Apps | Web | Google Developers](https://developers.google.com/web/progressive-web-apps/) [谷歌Progressive Web Apps官方文檔翻譯](https://www.jianshu.com/p/4e9d14fcb9de)