PWA（Progressive Web App，漸進式網頁應用，逐漸接近原生app的web app）是一種理念，使用多種技術來增強web app的功能，可以讓網站的體驗變得更好，能夠模擬一些原生功能，比如通知推送。在移動端利用標準化框架，讓網頁應用呈現和原生應用相似的體驗。

PWA不能包含原生OS相關代碼。PWA仍然是網站，只是在緩存、通知、后臺功能等方面表現更好。Electron程序相當于包裹OS原生啟動器（Launcher）的網站，未來，許多Electron程序可能轉化為PWA。

1. 概念

PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎來重大突破，全球頂級的瀏覽器廠商，Google、Microsoft、Apple 已經全數宣布支持 PWA 技術。

PWA 全稱為 Progressive Web App，中文譯為漸進式 Web APP，其目的是通過各種 Web 技術實現與原生 App 相近的用戶體驗（用戶體驗逐漸接近原生App）。

縱觀現有 Web 應用與原生應用的對比差距，如離線緩存、沉浸式體驗等等，可以通過已經實現的 Web 技術去彌補這些差距，最終達到與原生應用相近的用戶體驗效果。

2. 特性

• 安全可靠
  使用 Service Work 技術實現即時下載，當用戶打開應用后，頁面資源的加載不再完全依賴于網絡，而是使用 Service Work 緩存離線包存在本地，確保為用戶提供即時可靠的體驗。

• 訪問更快
  首屏可以部署在服務端，節省網頁請求時間，加載速度更快，擁有更平滑的動態效果和快速的頁面響應。

• 響應式界面
  支持各種類型的終端和屏幕。

• 沉浸式體驗
  在支持 PWA 的瀏覽器和手機應用上可以直接將 Web 應用添加到用戶的主屏幕上，無需從應用商店下載安裝。從主屏幕上打開應用之后，提供沉浸式的全屏幕體驗。

3. 功能

• 手機應用配置(Web App Manifest)
  可以通過 manifest.json 文件配置，使得可以直接添加到手機的桌面上。

• 離線加載與緩存(Service Worker+Cache API )
  可以通過 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技術實現離線加載和緩存。

• 消息推動與通知(Push&Notification )
  實現實時的消息推送與通知

• 數據及時更新(Background Sync )
  后臺同步，數據及時更新

4. 優勢與劣勢

優勢：

超簡單的安裝和下載。
以谷歌發布的 squoosh.app 為例。

PC 桌面版：
方式1：在瀏覽器輸入并打開?squoosh.app?之后。可以點擊右上角【Install】進行安裝。

方式2：可以點擊右上角三個點的圖標，然后選擇【安裝Squoosh】進行安裝。

安裝之后就可以在桌面看到快捷方式的圖標，直接打開就可以擁有與原生應用媲美的沉浸式體驗。

手機移動版：

首先在瀏覽器中輸入并打開網址“squoosh.app”。

然后點擊向上的圖標，在彈出的選項中選擇“添加到主屏幕”。

在彈出的【添加到主屏幕】編輯對話框中可以修改應用名稱。

點擊完成或者【添加】就可以將應用添加到主屏幕，下次直接打開就可以使用了。

發布迭代不需要第三方平臺審核。
我們都知道發布一個蘋果應用是需要提交 App Store 商店進行審核，通過了方可發布成功的。安卓應用也是一樣。并且更新迭代版本的時候也需要審核，還需要提交一些功能說明，圖片等資料。但是網頁版的應用就完全不需要這個審核過程，直接部署服務器就可以使用。

漸進式
現有的 Web 項目可以通過 PWA 的幾個核心技術點一步步轉型成一個完整的 PWA 應用。

劣勢：

因為推出的時間不長，所以現有瀏覽器的支持還不夠全面， 不是每一款瀏覽器都能100%的支持所有的 PWA 特性。

對于底層硬件的調用還是需要依賴第三方庫才能實現（如打開攝像頭，實現語言功能等等）。

PWA 現在還沒那么火，國內一些手機生產商在 Android 系統上做了手腳，似乎屏蔽了 PWA, 但是等 PWA 真正流行起來之后，相信這個問題就不會存在了。

5. 發展

• 谷歌
  基于 Chromium 開發的瀏覽器 Chrome 和 Opera 已經完全支持 PWA 。
  這里說一下 Chromium 和 Chrome 的區別。
  Chromium 是谷歌的開源項目，由開源社區去維護。擁有眾多的版本包括Windows、Mac、Linux。國內所有的 “雙核瀏覽器”，都是基于 Chromium 開發的，而我們下載的 Chromium 瀏覽器是其源碼未經修改的直接編譯版本。
  Chrome 是基于 Chromium 開發的，是閉源的，跨平臺多端支持，特性更加豐富。

  Google上線了兩個新網站，web.dev 和 squoosh.app 都支持 PWA（ web.dev 是宣傳和推廣 PWA 的，解釋了 PWA 的幾個關鍵技術。squoosh.app 是一個圖片壓縮工具） 。

• 微軟
  微軟將 PWA 帶到了 Windows 10。同時 Windows Edge（windows 10 之后微軟推出的瀏覽器，比 IE更流暢、外觀 UI 更舒適） 也支持 PWA。

• IOS
  隨著 iOS 11.3 的發布，iOS 正式開始支持 PWA，可以將它放在蘋果手機主屏。

• Android
  Twitter 和 Flipboard 都推出了 PWA，可以將它放在安卓手機主屏。

• 國內
  國內支持 PWA 的應用有微博、淘寶、豆瓣和餓了么。

隨著越來越多的瀏覽器大廠對 PWA 做出了支持和優化，PWA 的時代已經不遠了。

總結

以上是生活随笔為你收集整理的PWA详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。