1、背景
從2018年到如今，做爲號稱下一代web應用模型的PWA，逐漸成爲了一個各大前端廠商爭先恐後進行涉足，佈局的一個新的技術， 其主要的對標物Native app，做爲如今最主流的mobile端應用，它的安全，性能，用戶體驗的確明顯領先於其餘互聯網載體，可是原生App始終有一些缺點，好比css
1. 昂貴開發成本前端
2. 軟件上線，版本更新都須要發佈到不一樣的商店，並經過審覈web
有些APP你可能使用頻率特別少，可是你仍是不得不去商店中下載龐大安裝包，或者可能一段時間不使用之後，隨着版本的更新，你也不得不去從新更新並安裝json
PWA技術的做爲web應用，其天生優點能很好的解決以上的問題。瀏覽器
二. 什麼是PWA
PWA是Progressive Web App的英文縮寫， 翻譯過來就是漸進式加強WEB應用， 是Google 在2016年提出的概念，2017年落地的web技術。目的就是在移動端利用提供的標準化框架，在網頁應用中實現和原生應用相近的用戶體驗的漸進式網頁應用。緩存
引用官方介紹：安全
Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience.
便是：網絡
1. 可靠——即時加載，即便在不肯定的網絡條件下也不會受到影響。
當用戶從主屏幕啓動時，service work能夠當即加載漸進式Web應用程序，徹底不受網絡環境的影響。service work就像一個客戶端代理，它控制緩存以及如何響應資源請求邏輯，經過預緩存關鍵資源，能夠消除對網絡的依賴，確保爲用戶提供即時可靠的體驗。架構
2. 快速
據統計，若是站點加載時間超過 3s，53% 的用戶會放棄等待。頁面展示以後，用戶指望有平滑的體驗，過渡動畫和快速響應。app
3. 沉浸式體驗—— 感受就像設備上的原生應用程序，具備沉浸式的用戶體驗。
漸進式Web應用程序能夠安裝並在用戶的主屏幕上，無需從應用程序商店下載安裝。他們提供了一個沉浸式的全屏幕體驗，甚至能夠從新與用戶接觸的Web推送通知。
Web應用程序中，能夠經過manifest.json控制應用程序的顯示方式和啓動方式，指定主屏幕圖標、啓動應用程序時要加載的頁面、屏幕方向，甚至能夠指定是否顯示瀏覽器Chrome。
根據官方的介紹，不難看出，pwa的目標直指原生app，那接下來咱們就來了解下PWA究竟是個怎麼樣的何方神聖。
三. 核心功能
PWA並非單指某一項技術，你更能夠把它理解成是一種思想和概念，目的就是對標原生app，將Web網站經過一系列的Web技術去優化它，提高其安全性，性能，流暢性，用戶體驗等各方面指標，最後達到用戶就像在用app同樣的感受。
PWA中包含的核心功能及特性以下：
- Web App Manifest
- Service Worker
- Cache API 緩存
- Push&Notification 推送與通知
- Background Sync 後臺同步
- 響應式設計
四. PWA如何彌補和原生App的差距
性能差別
PWA使用app Shell架構模型
1. 快速加載 2. 儘量使用較少的數據 3. 使用本機緩存中的靜態資產 4. 將內容與導航分離開來 5. 檢索和顯示特定頁面的內容（HTML、JSON 等） 6. 緩存動態內容 App Shell 可保證 UI 的本地化以及從 API 動態加載內容，但同時不影響網絡的可連接性和可檢測性。 用戶下次訪問您的應用時，應用會自動顯示最新版本。無需在使用前下載新版本。 爲了保證首屏的加載，在內容請求完成以前，能夠優先保證 App Shell 的渲染，作到和 Native App 同樣的體驗，App Shell 是 PWA 界面展示所需的最小資源。
沒法離線使用
Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技術實現離線加載和緩存
數據更新
Background Sync 後臺同步技術
沒法實現推送
Push&Notification 實現推送與通知
沒法添加到桌面
經過manifest.json文件配置，使得能夠直接添加到手機的桌面上。
天生優點：
1. 無需安裝，無需下載，只要你輸入網址訪問一次，而後將其添加到設備桌面就能夠持續使用。
2. 發佈不須要提交到app商店審覈
3. 更新迭代版本不須要審覈，不須要從新發布審覈
4. 現有的web網頁都能經過改進成爲PWA， 能很快的轉型，上線，實現業務、獲取流量
5. 不須要開發Android和IOS兩套不一樣的版本
劣勢：
1. 遊覽器對技術支持還不夠全面， 不是每一款遊覽器都能100%的支持全部PWA
2. 須要經過第三方庫才能調用底層硬件（如攝像頭）
3. PWA如今還沒那麼火，國內一些手機生產上在Android系統上作了手腳，彷佛屏蔽了PWA, 可是相信當PWA火起來之後，這個問題就不會是問題
五. PWA的發展趨勢
2016年， PWA在google正式落地，基於 Chromium 的瀏覽器 Chrome 和 Opera 已經徹底支持 PWA 了
隨着 iOS 11.3 的發佈，iOS正式開始支持PWA
Windows Edge 支持PWA
隨着愈來愈多的遊覽器大廠，相繼的對PWA作出了支持和優化，想必PWA的時代即將到來
來源：https://www.jianshu.com/p/098af61bbe04