PWA（Progressive Web App，漸進(jìn)式網(wǎng)頁應(yīng)用，逐漸接近原生app的web app）是一種理念，使用多種技術(shù)來增強(qiáng)web app的功能，可以讓網(wǎng)站的體驗(yàn)變得更好，能夠模擬一些原生功能，比如通知推送。在移動(dòng)端利用標(biāo)準(zhǔn)化框架，讓網(wǎng)頁應(yīng)用呈現(xiàn)和原生應(yīng)用相似的體驗(yàn)。

PWA不能包含原生OS相關(guān)代碼。PWA仍然是網(wǎng)站，只是在緩存、通知、后臺(tái)功能等方面表現(xiàn)更好。Electron程序相當(dāng)于包裹OS原生啟動(dòng)器（Launcher）的網(wǎng)站，未來，許多Electron程序可能轉(zhuǎn)化為PWA。

1. 概念

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

PWA 全稱為 Progressive Web App，中文譯為漸進(jìn)式 Web APP，其目的是通過各種 Web 技術(shù)實(shí)現(xiàn)與原生 App 相近的用戶體驗(yàn)（用戶體驗(yàn)逐漸接近原生App）。

縱觀現(xiàn)有 Web 應(yīng)用與原生應(yīng)用的對(duì)比差距，如離線緩存、沉浸式體驗(yàn)等等，可以通過已經(jīng)實(shí)現(xiàn)的 Web 技術(shù)去彌補(bǔ)這些差距，最終達(dá)到與原生應(yīng)用相近的用戶體驗(yàn)效果。

2. 特性

• 安全可靠
  使用 Service Work 技術(shù)實(shí)現(xiàn)即時(shí)下載，當(dāng)用戶打開應(yīng)用后，頁面資源的加載不再完全依賴于網(wǎng)絡(luò)，而是使用 Service Work 緩存離線包存在本地，確保為用戶提供即時(shí)可靠的體驗(yàn)。

• 訪問更快
  首屏可以部署在服務(wù)端，節(jié)省網(wǎng)頁請(qǐng)求時(shí)間，加載速度更快，擁有更平滑的動(dòng)態(tài)效果和快速的頁面響應(yīng)。

• 響應(yīng)式界面
  支持各種類型的終端和屏幕。

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

3. 功能

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

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

• 消息推動(dòng)與通知(Push&Notification )
  實(shí)現(xiàn)實(shí)時(shí)的消息推送與通知

• 數(shù)據(jù)及時(shí)更新(Background Sync )
  后臺(tái)同步，數(shù)據(jù)及時(shí)更新

4. 優(yōu)勢(shì)與劣勢(shì)

優(yōu)勢(shì)：

超簡(jiǎn)單的安裝和下載。
以谷歌發(fā)布的 squoosh.app 為例。

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

方式2：可以點(diǎn)擊右上角三個(gè)點(diǎn)的圖標(biāo)，然后選擇【安裝Squoosh】進(jìn)行安裝。

安裝之后就可以在桌面看到快捷方式的圖標(biāo)，直接打開就可以擁有與原生應(yīng)用媲美的沉浸式體驗(yàn)。

手機(jī)移動(dòng)版：

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

然后點(diǎn)擊向上的圖標(biāo)，在彈出的選項(xiàng)中選擇“添加到主屏幕”。

在彈出的【添加到主屏幕】編輯對(duì)話框中可以修改應(yīng)用名稱。

點(diǎn)擊完成或者【添加】就可以將應(yīng)用添加到主屏幕，下次直接打開就可以使用了。

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

漸進(jìn)式
現(xiàn)有的 Web 項(xiàng)目可以通過 PWA 的幾個(gè)核心技術(shù)點(diǎn)一步步轉(zhuǎn)型成一個(gè)完整的 PWA 應(yīng)用。

劣勢(shì)：

因?yàn)橥瞥龅臅r(shí)間不長(zhǎng)，所以現(xiàn)有瀏覽器的支持還不夠全面， 不是每一款瀏覽器都能100%的支持所有的 PWA 特性。

對(duì)于底層硬件的調(diào)用還是需要依賴第三方庫(kù)才能實(shí)現(xiàn)（如打開攝像頭，實(shí)現(xiàn)語言功能等等）。

PWA 現(xiàn)在還沒那么火，國(guó)內(nèi)一些手機(jī)生產(chǎn)商在 Android 系統(tǒng)上做了手腳，似乎屏蔽了 PWA, 但是等 PWA 真正流行起來之后，相信這個(gè)問題就不會(huì)存在了。

5. 發(fā)展

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

  Google上線了兩個(gè)新網(wǎng)站，web.dev 和 squoosh.app 都支持 PWA（ web.dev 是宣傳和推廣 PWA 的，解釋了 PWA 的幾個(gè)關(guān)鍵技術(shù)。squoosh.app 是一個(gè)圖片壓縮工具） 。

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

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

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

• 國(guó)內(nèi)
  國(guó)內(nèi)支持 PWA 的應(yīng)用有微博、淘寶、豆瓣和餓了么。

隨著越來越多的瀏覽器大廠對(duì) PWA 做出了支持和優(yōu)化，PWA 的時(shí)代已經(jīng)不遠(yuǎn)了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。