(翻譯)為什麼PWA是Web開發的未來

三木的旅行日記發表於2018-02-01

翻譯自Tushar Agrawal的Why Progressive Web Apps Are The Future Of Web Development

最近,很多人都宣稱PWA會成為Web開發的未來,尤其是移動裝置。其核心就是,Progressive Web App (PWA) 就是使用現代web技術為使用者提供類似原生APP體驗的web應用。這些web程式具有漸進式增強功能,能夠提供快取,後臺同步以及訊息推送等功能。
儘管PWA已經被提出兩年多了,但是反饋並沒有那麼強烈。少部分玩家已經採用了這種想法,但是大多數人並沒有真正接受它。Chrome和Mozilla也許是測試你的PWA應用最好的瀏覽器,因為Apple還沒有進入這個領域。

PWA-它真的那麼好嗎?

一方面,原生應用在大多數情況下都是毫無疑問的快速和敏捷。另一方面,一些網站訪問緩慢並且連線問題越來越嚴重。 推特和谷歌在2016年實施的移動頁面加速計劃(AMP)只是解決連結緩慢的問題。而PWA在所有的場景下都可以完美的工作。在好的網路連結情況下,絕不會出現問題。問題是,在沒有網路連線時,我們就會看到錯誤頁面。

image
但是如果我們有一個很慢的網路連線,就會出現很多煩人的情況。頁面似乎一直在載入,而我們看到的是一個空白的頁面。我們只能等,一直等,但是頁面似乎永遠都不會載入完全。這就是PWA來拯救我們的地方。PWA最好的地方就是在網路緩慢連結以及沒有連線的時候你可以獲得最好的使用者體驗(是的,你沒有看錯...)。

為什麼使用PWA是很好的選擇

通過研究發現,平均一個使用者80%的時間只花在有限的三個應用上(對我來說就是Chrome, Quora 和 Medium)。
其他的應用程式大部分時間都閒置在記憶體中。而且,開發一個原生應用要比開發一個相同的web應用多花10倍的時間。如果你要開發並維護基於不同平臺的應用,比如安卓,IOS以及web,那要花費更多的成本。

PWA可以實現的一些原生應用特性

  • 訊息推送
  • 全屏顯示
  • 離線工作
  • 啟動頁有更加類似於原生應用的體驗
    PWA能夠使用更多的類似特性。以上幾點只是用來說明PWA的一些能力。但是,還有一些傳統的特性仍然只能在原生應用上體驗到。

哪些特性是PWA無法實現的

  • 對不同硬體感測器的訪問許可權不高或限制嚴格
  • 鬧鐘
  • 通訊錄訪問
  • 修改系統設定
    PWA的發展非常快速,我們可以期待很快我們就可以在PWA上實現這些特性了。

PWA的兩個主要部分

APP Manifest

它是一個用來定義應用圖示的JSON檔案,怎樣安裝應用(獨立,全屏,在瀏覽器裡等等。)以及其它相關資訊。它位於您的應用程式的根目錄中。每個頁面都需要一個連結來呈現該檔案。
將它新增在HTML檔案的head部分:

<link rel=”manifest"href="/manifest.json">

Service Worker

Service Worker就是創在PWA神奇的原因。它只不過是JavaScript程式碼,充當可程式設計代理,負責攔截和響應網路請求。因為它只是充當一個代理,並且可以很容易的被修改,所以應用必須使用HTTPS請求以保證資料安全。
值得注意的是,service worker儲存實際的響應,不只是響應資料,還包括HTTP響應頭。這意味著您的應用程式可以簡單地生成網路請求並處理響應,而無需任何特定的程式碼來處理快取。

怎樣開始構建一個PWA

好訊息是開始構建一個PWA比你想象的要容易的多。事實上,以後現存的這些網站很有可能都要轉為PWA模式。如果你打算開發PWA,我強烈建議大家看一下這個視訊

相關文章