PWA學習文檔沉澱

PWA學習沉澱

PWA是什麼？
Progressive Web App, 簡稱 PWA，是提高 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。是一種app的模型。 依賴於web相關的api提供和native-app的體驗。

爲何會出現？

• 訪問網頁時請求數據的延遲，帶來的白屏體驗
• web強依賴問題 須要依賴客戶端來訪問
• pwa可以顯著的提高應用的加載速度，而且支持離線訪問
• 用戶體驗問題，若是一個站點等待時間超過3秒，根據數據統計53%的用戶會放棄等待。即便是在網絡較差的狀況下也可以藉助 Service Worker 正常訪問
• 安全問題，pwa經過 HTTPS 協議提供服務，防止窺探和確保內容不被篡改
• 能夠添加經常使用的app到桌面，免去去應用商店下載的麻煩，可離線通知消息，增長用戶粘性。

PWA特性/特色

• 漸進式 - 適用於全部瀏覽器，由於它是以漸進式加強做爲宗旨開發的
• 鏈接無關性 - 可以藉助 Service Worker 在離線或者網絡較差的狀況下正常訪問
• 相似應用 - 因爲是在 App Shell 模型基礎上開發，由於應具備 Native App 的交互和導航，給用戶 Native App 的體驗
• 持續更新 - 始終是最新的，無版本和更新問題
• 安全 - 經過 HTTPS 協議提供服務，防止窺探和確保內容不被篡改
• 可索引 - 應用清單文件和 Service Worker 可讓搜索引擎索引到，從而將其識別爲『應用』
• 粘性 - 經過推送離線通知等，可讓用戶迴流
• 可安裝 - 用戶能夠添加經常使用的 webapp 到桌面，免去去應用商店下載的麻煩
• 可連接 - 經過連接便可分享內容，無需下載安裝

Service Worker
W3C 組織早在 2014 年 5 月就提出過 Service Worker 這樣的一個 HTML5 API ，主要用來作持久的離線緩存。

• Service Worker 有如下功能和特性：
• 一個獨立的 worker 線程，獨立於當前網頁進程，有本身獨立的 worker context。
• 一旦被 install，就永遠存在，除非被手動 unregister
• 用到的時候能夠直接喚醒，不用的時候自動睡眠
• 可編程攔截代理請求和返回，緩存文件，緩存的文件能夠被網頁進程取到（包括網絡離線狀態）
• 離線內容開發者可控
• 能向客戶端推送消息
• 不能直接操做 DOM
• 必須在 HTTPS 環境下才能工做
• 異步實現，內部大都是經過 Promise 實現

因此 Service Worker主要作的就是讓緩存作到優雅和極致，讓 web-app 相對於 native-app 的缺點更加弱化，也爲開發者提供了對性能和體驗的無限遐想。
說到這裏 咱們就想到這個新的特性瀏覽器的支持狀況是什麼樣的

看到這裏 仍是一大部分都在支持的 能夠訪問 service支持狀況 看最新的瀏覽器支持狀況

如何使用service worker 當前網站能夠看到大部分的信息 這裏就不寫了。

前端各個框架解決方案

• react react-pwa
• vue lavas 一個基於vue的pwa的解決方案
• angular 經過Angular CLI來建立PWA程序

你們也能夠經過這些 本身體驗測試一下。