PWA-讓前端網頁媲美原生APP的用戶體驗

一、背景

從2018年到現在，作為號稱下一代web應用模型的PWA，逐漸成為了一個各大前端廠商爭先恐后進行涉足，布局的一個新的技術， 其主要的對標物Native app，作為現在最主流的mobile端應用，它的安全，性能，用戶體驗的確明顯領先於其他互聯網載體，但是原生App始終有一些缺點，比如

1. 昂貴開發成本

2. 軟件上線，版本更新都需要發布到不同的商店，並通過審核

有些APP你可能使用頻率特別少，但是你還是不得不去商店中下載龐大安裝包，或者可能一段時間不使用以后，隨着版本的更新，你也不得不去重新更新並安裝

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% 的用戶會放棄等待。頁面展現之后，用戶期望有平滑的體驗，過渡動畫和快速響應。

 

快速

3. 沉浸式體驗—— 感覺就像設備上的原生應用程序，具有沉浸式的用戶體驗。
漸進式Web應用程序可以安裝並在用戶的主屏幕上，無需從應用程序商店下載安裝。他們提供了一個沉浸式的全屏幕體驗，甚至可以重新與用戶接觸的Web推送通知。

 

沉浸式體驗

Web應用程序中，可以通過manifest.json控制應用程序的顯示方式和啟動方式，指定主屏幕圖標、啟動應用程序時要加載的頁面、屏幕方向，甚至可以指定是否顯示瀏覽器Chrome。
根據官方的介紹，不難看出，pwa的目標直指原生app，那接下來我們就來了解下PWA到底是個怎么樣的何方神聖。

三. 核心功能

PWA並不是單指某一項技術，你更可以把它理解成是一種思想和概念，目的就是對標原生app，將Web網站通過一系列的Web技術去優化它，提升其安全性，性能，流暢性，用戶體驗等各方面指標，最后達到用戶就像在用app一樣的感覺。

PWA中包含的核心功能及特性如下：

1. Web App Manifest
2. Service Worker
3. Cache API 緩存
4. Push&Notification 推送與通知
5. Background Sync 后台同步
6. 響應式設計

四. 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