（給前端大學(xué)加星標(biāo)，提升前端技能.）

轉(zhuǎn)自：CSDN

為了構(gòu)建原生且可離線工作的移動(dòng)應(yīng)用程序，可以采用的方式主要有兩種：使用移動(dòng)操作系統(tǒng)原生編程語言的原生開發(fā)；使用 React Native、Ionic、Xamarin 等技術(shù)的混合式移動(dòng)開發(fā)。

但是，這兩種方式都需要通過Google或蘋果應(yīng)用商店發(fā)布應(yīng)用程序。

這時(shí)候我們就會(huì)想起 PWA。它們的程序包都很小，可以像原生應(yīng)用程序一樣運(yùn)行，可以部署到Web，還可以輕松地添加到手機(jī)桌面。

什么是PWA？

漸進(jìn)式Web應(yīng)用程序（Progressive Web Application，簡稱PWA）是使用常見的Web技術(shù)（HTML、CSS和JavaScript）構(gòu)建的應(yīng)用程序，其發(fā)行方式與其他Web應(yīng)用程序一樣，還擁有類似于原生的功能。

Google 定義的 PWA 具備以下特征：

• 可靠：即使在互聯(lián)網(wǎng)連接不佳或沒有互聯(lián)網(wǎng)的情況下，也可以快速加載，因?yàn)槿绻W(wǎng)頁未能在3秒內(nèi)加載完畢，則超過一半的用戶就會(huì)離開網(wǎng)站。當(dāng)沒有互聯(lián)網(wǎng)連接時(shí)，PWA 會(huì)使用 Service Worker 來消除對(duì)Web服務(wù)器的依賴。

• 快速：流暢的動(dòng)畫和交互效果，應(yīng)用程序擁有原生的體驗(yàn)。（沒有笨拙的網(wǎng)頁滾動(dòng)。）

• 參與感：應(yīng)該盡可能向原生設(shè)備的用戶體驗(yàn)靠近。這意味著至少能夠全屏運(yùn)行（如果添加到手機(jī)桌面），并處理通知（iOS尚不支持）。

Service Worker

Service Worker 是瀏覽器在后臺(tái)運(yùn)行的 JavaScript 文件。主要用作Web服務(wù)器的代理。這意味著，如果瀏覽器沒有穩(wěn)定的互聯(lián)網(wǎng)連接，則由 Service Worker 處理請(qǐng)求。

因此，Service Worker 可以模仿Web服務(wù)器的操作，只不過數(shù)據(jù)全部來自緩存，因此可以在離線模式下工作。

Service Worker 還可用于創(chuàng)建不需要網(wǎng)頁或用戶互動(dòng)的功能，例如推送通知。

Service Worker 還在不斷地發(fā)展，將來它們可能擁有新功能，例如地理定位等，讓用戶享受原生的體驗(yàn)。

數(shù)字勝于雄辯

現(xiàn)在我們對(duì)PWA有了一定的了解，下面讓我們來看一看為什么 PWA 在移動(dòng)開發(fā)行業(yè)中有著舉足輕重的作用。首先，我們來看一些統(tǒng)計(jì)數(shù)據(jù)（2019年11月）。

全球移動(dòng)操作系統(tǒng)的市場份額：

Android 版本的市場份額：

iOS 版本的市場份額：?

從這些圖表可以看出，Android 占有全球移動(dòng)操作系統(tǒng)75%以上的市場份額，而iOS則占有23%的份額。我們還可以看到，大約75%的 iOS 手機(jī)運(yùn)行的版本為12.4，而超過70%的 Android 手機(jī)運(yùn)行的版本高于Android 8。

這些統(tǒng)計(jì)信息背后的原因是，這些操作系統(tǒng)運(yùn)行在功能強(qiáng)大的手機(jī)上。iOS 12.4于2019年發(fā)布，而 Android 8于2017年發(fā)布，這意味著運(yùn)行這些操作系統(tǒng)的手機(jī)運(yùn)行速度非?？?。

甚至相對(duì)較舊或低端的手機(jī)也擁有約2GB的內(nèi)存和 Snapdragon 處理器。這些手機(jī)加上Google Chrome 瀏覽器就可以運(yùn)行 PWA，根本無需原生開發(fā)。

因此，近期的 iPhone / Android 手機(jī)都可以輕松運(yùn)行 PWA，并提供與原生應(yīng)用程序相差無幾的用戶體驗(yàn)。

這不包括需要大量圖形功能和動(dòng)畫的應(yīng)用程序（我們都知道 PWA 并非用于游戲開發(fā)）。

iOS和PWA？

如上所述，蘋果擁有超過20%的手機(jī)市場份額，如果我們只看歐洲和北美的話，這個(gè)份額會(huì)更高，而且這些手機(jī)對(duì)于 PWA 的支持進(jìn)展非常緩慢。

雖然 iOS 11.3及更高版本支持 PWA，但這并不意味著 PWA 得到了完全的支持，與其他瀏覽器（尤其是Chrome）相比。在近期的版本中，尤其是在 iOS 13上，這種支持更好一些。

盡管 iOS 仍不支持推送通知和后臺(tái)同步等重要的功能，但這是否意味著蘋果反對(duì) PWA？不，我不這么認(rèn)為，我只是相信他們的策略還不能完全支持 PWA 的想法。

iOS 各個(gè)版本所作出的改進(jìn)表明蘋果同意有必要添加更多支持，這只是時(shí)間的問題。

根據(jù)2017年末的某項(xiàng)研究，用戶有97%的時(shí)間都花在了10個(gè)應(yīng)用中，而訪問量最高的移動(dòng)網(wǎng)站獲得的用戶比移動(dòng)應(yīng)用程序多800萬。

在 Google 的引領(lǐng)下，微軟推出了 PWA 版的 Outlook，并以 Chromium 為基礎(chǔ)構(gòu)建了 Edge 瀏覽器，我相信蘋果的iOS（最終）也將遵循這一趨勢。

前端框架

在最新的前端框架（Vue、Angular、React等）的推波助瀾下，PWA 的構(gòu)建得到了極大地簡化。

它們擁有超快的渲染功能，過渡和動(dòng)畫看起來非常平滑，而且在 Ionic 等框架的幫助下，應(yīng)用程序可以更輕松地獲得原生應(yīng)用的外觀和體驗(yàn)。

有些框架已經(jīng)推出了面向 PWA 開發(fā)的模板。構(gòu)建 PWA 的技術(shù)已發(fā)展成熟。接下來只需要與瀏覽器供應(yīng)商達(dá)成共識(shí)。

受益于 PWA 的公司

許多公司正在為他們的原生應(yīng)用程序構(gòu)建 PWA，以方便用戶通過Web瀏覽器訪問他們的移動(dòng)應(yīng)用程序服務(wù)。

以下就是正在朝著這個(gè)方向邁進(jìn)的一些公司。

Tinder

在創(chuàng)建 PWA 后，他們將頁面的加載時(shí)間從11.91秒壓縮到了4.69秒，這是因?yàn)?PWA 比原生 Android 應(yīng)用程序小90%。最終他們提升了 PWA 用戶的參與度。

Trivago

在將 PWA 添加到手機(jī)桌面后，Trivago的用戶數(shù)量猛增了150%。

在離線支持的幫助下，即使沒有互聯(lián)網(wǎng)連接用戶也可以繼續(xù)會(huì)話，而且67%的用戶在重新獲得網(wǎng)絡(luò)連接后仍繼續(xù)使用 PWA。最終他們的酒店優(yōu)惠鏈接點(diǎn)擊次數(shù)增加了97%。

Pinterest

Pinterest 將其移動(dòng)網(wǎng)站升級(jí)為 PWA 后，與上兩家公司同樣，核心用戶的參與度增加了60%。

此外，用戶在網(wǎng)站上逗留的時(shí)間增加了40%，廣告收入增加了44%。

優(yōu)步

優(yōu)步的主要目標(biāo)之一是盡可能地吸引更多人使用他們的服務(wù)。這意味著他們還需要接納網(wǎng)絡(luò)連接速度較慢（2G）的人群。

由于核心應(yīng)用的總規(guī)模壓縮到了50K，因此他們的 PWA 2G 可以在3秒內(nèi)完成加載。

Google、微軟、推特、福布斯等公司都采用了 PWA。種種跡象表明 PWA 可以幫助用戶更輕松地訪問服務(wù)，從而增加用戶的參與度。

總結(jié)

PWA 已經(jīng)推出一段時(shí)間了，但其受歡迎程度的增加主要還是因?yàn)楣δ軓?qiáng)大的手機(jī)，以及Google、微軟等許多大公司的支持。

隨著時(shí)間的流逝，PWA 會(huì)越來越流行，功能會(huì)越來越強(qiáng)大，等得到蘋果 iOS 的完全支持后， PWA 就會(huì)成為構(gòu)建移動(dòng)應(yīng)用程序的主流方式。

分享前端好文，缺個(gè)?在看?