PWA – 漸進式Web應用：你須要知道的一切

時間 2019-11-16

標籤 pwa 漸進 web 應用須要知道一切欄目 HTML 简体版

原文原文鏈接

做者：Ronak Patel
翻譯：瘋狂的技術宅前端

原文：https://aglowiditsolutions.co...react

未經容許嚴禁轉載程序員

你是否正處於選擇 App 開發技術的兩難境地？現在，漸進式 Web 應用程序需求旺盛。知道這是爲何嗎？angularjs

下面讓咱們來詳細的梳理一下。web

移動電話用戶的增加促使在線企業從新考慮對移動應用的優化。手機端佔用了超過 60％的互聯網流量。面試

人們不只瀏覽社交媒體網站，還瀏覽服務和產品。因此針對移動進行優化是全部業務戰略的核心。segmentfault

可是，因爲預算或其餘緣由而沒有開發原生應用的小公司立刻就要笑了，由於本機應用很快就會被 PWA（Progressive Web Apps）所取代。瀏覽器

不過這並不意味着它如今就會發生，並且 PWA 和原生應用程序的大機率也會並存。安全

PWA就像原生應用同樣，能幹爲用戶提供更快、更順暢和可擴展的服務。服務器

讓咱們瞭解一下 PWA 在營銷領域的其餘方面。

根據 Akamai 的統計顯示 「網站加載時間延遲100毫秒可能會使轉化率減小7％的影響」。

這意味着內容加載的速度具備至關大的意義。從這個角度來看，PWA 能夠成爲吸引客戶的最佳選擇，由於它提供了快速的服務和引人注目的性能。

毫無疑問，PWA 比原生應用程序更快更流暢，而離線功能增長了它的上限。

PWA的歷史

PWA 的想法是由 Google 工程師 Alex Russell 在 2015 年提出的。可是它須要一些時間來得到科技行業的承認。因爲技術不分國界，能夠隨時向任何地方流動，爲了達到其目標受衆，PWA 如今受到了商業組織的高度關注。

什麼是 Progressive Web Apps？

在深刻探討以前，讓咱們先來了解PWA（Progressive Web Apps）是什麼，以及它將如何成爲移動應用的將來（在某種程度上）。

簡單來講，Progressive Web Application 不是一個真正的應用程序，但它使用現代 Web 功能，它爲用戶提供相似應用程序的體驗。

當你在瀏覽器中打開一個網站時，你可能會看到一個「添加到主屏幕」的彈出窗口。

若是你容許，將得到在桌面或移動設備上建立的「Lite」版應用程序，該版本提供原生應用般的體驗。

此外，你還能夠得到離線功能。可是對於 PWA 應用的離線功能有一些不一樣的見解。例如並不是全部 PWA 都脫機運行，Instagram 就是這樣的例子。

當你把 Instagram 添加爲 PWA 時，能夠在聯機時使用它，但在脫機時它不起做用。不過其原生應用是能夠離線使用的（但只有4到5個功能可用）。

爲何選擇PWA？

PWA 對用戶和服務提供商都頗有幫助。正如咱們前面提到的那樣，有些沒有原生應用的企業能夠經過定位移動用戶的大量受衆來得到 PWA 的最大優點。

此外，因爲存儲容量和 RAM 較少而不想安裝原生應用的用戶也能夠從中受益。

PWA 的優勢

在將來幾年內，PWA 將會取代原生應用。全球研究和諮詢公司 Gartner 的這種猜想使人難以置信。

其報告中認爲：「WPA 將影響你的移動應用策略」，它表示因爲「應用疲勞」，原生應用的下載量將會減小。用戶對於大量容易混淆的應用程序感到不知所措，不知道該下載哪一個。

此外，手機中的應用數量會影響其內存和存儲空間，所以很所用戶都沒法下載原生應用。

Gartner報告還預測，到 2020 年，50％的「通用的、面向消費者」的原生應用將被 PWA** 所取代。

PWA 佔用的空間更少
不須要太大的網絡帶寬，甚至能夠在 2G 網絡上工做
能夠脫機工做
不須要對應用進行更新
下降開發成本
更好的性能
更好的體驗

PWA 的平臺支持

PWA 支持全部瀏覽器和平臺，但因爲其處於開發過程當中，可能不適用於全部移動設備。

Microsoft Edge

支持 PWA 的新版 Windows 10 於 2018 年 4月發佈。在此以前 Microsof t已容許用戶經過 Microsoft Edge 列出 PWA。

Microsoft Store

全部 PWA 應用均可以在 Microsoft Store 中找到。開發人員能夠在商店中建立啓用 PWA 的應用和列表，而 Microsoft 也支持用 Bing 查找流行的 PWA 應用程序。

Chrome

截至目前，Google Chrome 還不支持將這種技術用於桌面，但它正在開發之中。

Google 已宣佈正在開發支持 PWA 的瀏覽器，該瀏覽器將很快發佈。從如今開始，你能夠隨時在瀏覽器中查看此類內容。

Android

它對 Android 的 Google Chrome 支持的很是好。

你只需在移動瀏覽器中打開支持 PWA 的網站，就會當即在你的手機中列出該應用。此外 Chrome 正在研究 PWA 的許多可能性，例如將 PWA 添加到 play store。

此外，這家科技巨頭也正在考慮創建一個名爲 WebAPK 的技術，這有助於將 PWA 變成 APK 文件。這將容許將 PWA 像其餘原生應用同樣安裝在設備中。

iOS

沒有徹底實現其功能，但科技巨頭蘋果公司考慮到其在用戶中的重要性和受歡迎程度，在去年 3 月 30 日正式發佈的 iOS 11.3 中默默地添加了該功能。可是該功能還處於測試版模式，而且還沒有添加 PWA 的全部功能。不過它很快就會啓用。

Trivago —— 領先的酒店預訂和優惠服務 App 之一，他們已經在大多數平臺上發佈了 PWA，如今 Trivago 已經在 Windows 十、Android、Chrome for web等平臺上實現。

添加到主屏幕的用戶的參與度增長了150％，從舊移動網站用戶平均只有 0.8 次重複訪問，到 PWA 用戶的兩次訪問。（來源：Trivago PWA統計數據）

事實上，Trivago 並非惟一一個實現這一目標的人，還有不少人嚐到了 PWA 的甜頭。

讓咱們來看一下......

PWA 示例及其統計信息

PWA 有許多案例，由於許多公司都使用 PWA 得到了顯着的好處。其中有 Twitter、Flipboard、AliExpress等等。讓咱們舉幾個頂級公司的例子，以及他們用 PWA 得到的好處。

1) AliExpress

AliExpress （阿里全球速賣通）是最好的電子商務網站，擁有來自世界各地的大量客戶。在添加 PWA 以後，該策略使 iOS 轉換率提升了82％，同時頁面訪問量翻了一番。

2) Make My Trip

PWA 戰略幫助最大的旅遊網站「Make my trip」的數據使用量減小了 70％，同時減小了 75％的推文減小了。

3) Twitter

Twitter 是採用 PWA 後最大的受益者之一。它天天獲得 250,000 個獨立訪客。

4) Flipkart

在將 PWA 歸入其營銷策略後，頂級電子商務網站 Flipkart 的轉換率提升了 70％。此外，該網站記錄到了 40％的新訪客。

5) 福布斯

福布斯是關於信息、新聞和故事的熱門網站之一。在啓用 PWA 後，其網站的使用率增長了100％，公司聲稱其加載頁面只需 0.8 秒（與以前的 3 -12 秒相比）。

Similarly, various websites are there which turned into Progressive Web Applications and achieved its goal in a very short period. You can check more stats here.
一樣，各類網站都變成了漸進式Web應用程序，並在很短的時間內實現了目標。你能夠查看更多統計數據[這裏]（https://www.pwastats.com/）。

PWA 框架與工具

可使用各類框架，庫和工具構建 PWA 應用。全部這些都是提供可靠支持的。如下是你能夠用來構建 PWA 網站的技術列表。

1) Angular

Angular 在前端開發界很是流行，可幫助開發人員建立響應迅速的 PWA 應用。使用 Angular 5 建立PWA網站變得很是簡單，由於你得到了內置的 PWA 支持，這使你能夠輕鬆工做。

2) Polymer

Google 開發的 Polymer 包含大量的 Web 組件、工具和模板，使你的 PWA 開發變得很是簡單。聚合物包含純HTML/CSS/JS，使其成爲徹底獨立的框架。這就是它適用於 PWA 的緣由。

3) Ionic

Ionic 是開發人員建立 PWA 網站的最佳選擇。它具備單代碼庫功能，可幫助 Web 應用根據設備優化自身。 Ionic Progressive Web App 還有豐富的內置 UI，這使得 PWA 能夠經過瀏覽器和移動設備更快地運行。

4) React

React 無疑是建立響應式 Web 應用的最佳技術平臺，同時也能夠編寫 PWA 網站。大量的庫支持可幫助開發人員建立最佳 React PWA。

除此以外，還有其餘框架和庫，能夠幫助你開發 PWA。

閱讀咱們的文章： 在 2019 年最吸睛的十大移動應用程序框架

PWA 的功能

PWA 幾乎和原生應用同樣，但存在一些差別。 PWA 的功能少於原生功能。可是在可用性方面，它都設置爲跨越本機應用程序。 PWA 對於小型企業相當重要，由於這能夠幫助他們定位大型移動用戶。因此，讓咱們來談談它的將來以及它將如何幫助商業用戶得到最大的用戶關注。

響應性

PWA 具備響應性，能夠適應任何屏幕尺寸，不管是在移動設備、tab、fab仍是桌面，PWA 能適合全部屏幕尺寸。

連通性

它能夠離線工做，即便你沒有穩定的互聯網鏈接，它也能夠順利運行。

先進

PWA 能夠用於全部的瀏覽器，但必須是現代瀏覽器併合乎 PWA 的規則。

原生體驗

PWA 不是應用程序，你沒法在 Play Store 中找到全部的 PWA，但它可以提供原生應用般的體驗。

永遠保持最新

無需更新下載原生應用，它會更新你的 PWA 頁面，這會在你上線時自動進行。

可分享

你可使用此功能與其餘用戶共享你的內容或該應用。

安全

PWA 經過 HTTPS 提供，所以用起來很是安全，就像使用 Web 瀏覽器和原生應用同樣。

可發現

PWA 是搜索引擎友好的，它能夠很容易地被探索和發現，也能夠直接打開。

推送通知

PWA 支持推送通知，以便營銷人員能夠向用戶直接發送通知並共享更新和提醒信息。

離線支持

離線支持使 PWA 徹底不同凡響，甚至讓它變得可愛。PWA 提供順暢的訪問體驗，即便網絡鏈接不良也是如此。

可安裝

「添加到主屏幕」容許你隨時安裝並使用「精簡版」的 PWA 網站。

快速加載

PWA 以即時加載而聞名。你請求的內容很快就會出如今屏幕上。

PWA 高效且經濟

的確。一方面你必須花費大量資金來構建原生應用，而建立支持 PWA 的網站幾乎不須要任何額外的費用。

你只需花一點小錢甚至一分錢也不須要支付。就可用性而言，與原生應用相比它將很是高效。

它須要更少的空間（幾乎沒有空間），不須要強大的網絡鏈接，而且可以比原生程序更快地獲取信息。你還須要什麼？

PWA – 移動應用的將來

技術趨勢能夠左右任何有利可圖的方向，前提是它具備有用的功能、出色的可用性和最佳的用戶界面。

PWA 擁有一切有利於最新技術需求的東西。因此咱們不能忽視它。可是它須要一些時間來顛覆原生應用。

隨着它的發展能夠預期，到2020年咱們將看到現代 Web 技術的新時代。

PWA 是否存在限制？

PWA 是輕量級但功能豐富的應用程序，任何人均可以將其用做原生應用。事實上離線功能增長了用戶羣，而且還在不斷增加。最重要的是，你不須要經過應用商店來下載它，這意味着即便你的智能手機沒有 Play Store，也可使用 PWA 應用。特別是支持 Google Chrome 和 Mozilla 等現代瀏覽器的手機。

然而，因爲一切事務都有利弊，PWA 也不例外。不過限制也可能不會引發多少麻煩，你可能仍然喜歡使用它。那麼爲何不在使用以前檢查一下這些限制呢？