PWA 是移動開發(fā)的未來嗎?
（給前端大學(xué)加星標(biāo)，提升前端技能.）
轉(zhuǎn)自：CSDN
為了構(gòu)建原生且可離線工作的移動應(yīng)用程序，可以采用的方式主要有兩種：使用移動操作系統(tǒng)原生編程語言的原生開發(fā)；使用 React Native、Ionic、Xamarin 等技術(shù)的混合式移動開發(fā)。
但是，這兩種方式都需要通過Google或蘋果應(yīng)用商店發(fā)布應(yīng)用程序。
這時(shí)候我們就會想起 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)加載完畢，則超過一半的用戶就會離開網(wǎng)站。當(dāng)沒有互聯(lián)網(wǎng)連接時(shí)，PWA 會使用 Service Worker 來消除對Web服務(wù)器的依賴。
快速：流暢的動畫和交互效果，應(yīng)用程序擁有原生的體驗(yàn)。（沒有笨拙的網(wǎng)頁滾動。）
參與感：應(yīng)該盡可能向原生設(shè)備的用戶體驗(yàn)靠近。這意味著至少能夠全屏運(yùn)行（如果添加到手機(jī)桌面），并處理通知（iOS尚不支持）。
Service Worker
Service Worker 是瀏覽器在后臺運(yùn)行的 JavaScript 文件。主要用作Web服務(wù)器的代理。這意味著，如果瀏覽器沒有穩(wěn)定的互聯(lián)網(wǎng)連接，則由 Service Worker 處理請求。
因此，Service Worker 可以模仿Web服務(wù)器的操作，只不過數(shù)據(jù)全部來自緩存，因此可以在離線模式下工作。
Service Worker 還可用于創(chuàng)建不需要網(wǎng)頁或用戶互動的功能，例如推送通知。
Service Worker 還在不斷地發(fā)展，將來它們可能擁有新功能，例如地理定位等，讓用戶享受原生的體驗(yàn)。
數(shù)字勝于雄辯
現(xiàn)在我們對PWA有了一定的了解，下面讓我們來看一看為什么 PWA 在移動開發(fā)行業(yè)中有著舉足輕重的作用。首先，我們來看一些統(tǒng)計(jì)數(shù)據(jù)（2019年11月）。
全球移動操作系統(tǒng)的市場份額：
Android 版本的市場份額：
iOS 版本的市場份額：?
從這些圖表可以看出，Android 占有全球移動操作系統(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)行速度非常快。
甚至相對較舊或低端的手機(jī)也擁有約2GB的內(nèi)存和 Snapdragon 處理器。這些手機(jī)加上Google Chrome 瀏覽器就可以運(yùn)行 PWA，根本無需原生開發(fā)。
因此，近期的 iPhone / Android 手機(jī)都可以輕松運(yùn)行 PWA，并提供與原生應(yīng)用程序相差無幾的用戶體驗(yàn)。
這不包括需要大量圖形功能和動畫的應(yīng)用程序（我們都知道 PWA 并非用于游戲開發(fā)）。
iOS和PWA？
如上所述，蘋果擁有超過20%的手機(jī)市場份額，如果我們只看歐洲和北美的話，這個(gè)份額會更高，而且這些手機(jī)對于 PWA 的支持進(jìn)展非常緩慢。
雖然 iOS 11.3及更高版本支持 PWA，但這并不意味著 PWA 得到了完全的支持，與其他瀏覽器（尤其是Chrome）相比。在近期的版本中，尤其是在 iOS 13上，這種支持更好一些。
盡管 iOS 仍不支持推送通知和后臺同步等重要的功能，但這是否意味著蘋果反對 PWA？不，我不這么認(rèn)為，我只是相信他們的策略還不能完全支持 PWA 的想法。
iOS 各個(gè)版本所作出的改進(jìn)表明蘋果同意有必要添加更多支持，這只是時(shí)間的問題。
根據(jù)2017年末的某項(xiàng)研究，用戶有97%的時(shí)間都花在了10個(gè)應(yīng)用中，而訪問量最高的移動網(wǎng)站獲得的用戶比移動應(yīng)用程序多800萬。
在 Google 的引領(lǐng)下，微軟推出了 PWA 版的 Outlook，并以 Chromium 為基礎(chǔ)構(gòu)建了 Edge 瀏覽器，我相信蘋果的iOS（最終）也將遵循這一趨勢。
前端框架
在最新的前端框架（Vue、Angular、React等）的推波助瀾下，PWA 的構(gòu)建得到了極大地簡化。
它們擁有超快的渲染功能，過渡和動畫看起來非常平滑，而且在 Ionic 等框架的幫助下，應(yīng)用程序可以更輕松地獲得原生應(yīng)用的外觀和體驗(yàn)。
有些框架已經(jīng)推出了面向 PWA 開發(fā)的模板。構(gòu)建 PWA 的技術(shù)已發(fā)展成熟。接下來只需要與瀏覽器供應(yīng)商達(dá)成共識。
受益于 PWA 的公司
許多公司正在為他們的原生應(yīng)用程序構(gòu)建 PWA，以方便用戶通過Web瀏覽器訪問他們的移動應(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ù)會話，而且67%的用戶在重新獲得網(wǎng)絡(luò)連接后仍繼續(xù)使用 PWA。最終他們的酒店優(yōu)惠鏈接點(diǎn)擊次數(shù)增加了97%。
Pinterest 將其移動網(wǎng)站升級為 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 會越來越流行，功能會越來越強(qiáng)大，等得到蘋果 iOS 的完全支持后， PWA 就會成為構(gòu)建移動應(yīng)用程序的主流方式。
分享前端好文，缺個(gè)?在看?