漸進式web應用(progressive Web app) 是現代web應用的一種新形式。它利用了最新的web功能，結合了原生移動應用的獨特特性與web的優點，為使用者帶來了新的體驗。

一：傳統web端開發及現有移動端領域

04-05年之間，ajax出現，讓傳統的web開發有了一種新的體驗，在我們很早之前都是在後端jsp,php等這些後端語言使用form表單提交一些簡單的資料，html由後端拼接輸出，但是自從有了ajax以後，改變了我們對web的理解，我們需要有更好的使用者體驗，因此這個時候有了前端這個行業，前後端分離了，前端負責使用者體驗及頁面的事情，而後端則專注於業務邏輯的開發。

幾年之後，移動優先原則 出現了，它標誌著我們對web開發的看法發生了改變。徹底了讓我們有了一種新的方式來使用網路，在我們很早之前都是使用者坐在臺式機前，用20英寸顯示器和一根連結到牆上的電纜上網的時代已經結束了。移動領域出現後，讓我們有更好的方式是使用網際網路。

在07年的時候，第一款iphone被推出的時候，我們那個時候就可以使用手機來瀏覽我們的網站。

但是Web它具有高階影象技術、地理位置識別、訊息推送、離線可用性、主螢幕圖示等這些特性。這些技術在當時web領域中存在限制，因此使用者體驗得不到提升。因此這個時候原生應用就出現了，來解決這些事情。

但是這種趨勢也正在改變，雖然我們大部分時間都花在手機應用上，比如玩遊戲，看網頁，平時裝了很多很多應用app，但是我們平時經常用到的應用並不多，因此使用者安裝應用變少了，並且平時經常用的app就那麼幾個，我們平時安裝一個app是這麼一個流程，首先我要通過一些網頁知道有這個app, 然後去我們手機的應用商店搜尋該app，然後進行下載並安裝，安裝完成後，我們需要啟動該應用app。然後就是使用該app.

讓使用者安裝一個app應用程式是一個昂貴的選擇，但是它相對於傳統web端開發的優勢是，原生應用並不僅僅使用者首次開啟該app到離開這些短暫的時間，一旦安裝完成後，那麼原生應用就會在我們的手機主螢幕中顯示一個app圖示，並且佔據了我們手機的記憶體空間，但是如果該App有內容更新的時候，它可以隨時通過訊息推送的技術來告訴使用者，相對於傳統的web開發，使用者體驗會得到一個提升。

但是隨著漸進式web應用的到來，這些曾經在原生應用有的技術，現在我們的web也能做這些事情了，下面我們可以看下我們的漸進式web應用有哪些優勢。

二：漸進式web應用的優勢

漸進式web應用可以做如下事情：

1. 無連線狀態下的可用性。

2. 載入速度會更快。
3. 推送訊息技術可以實現。
4. 可以在主螢幕上顯示快捷方式。
5. 可以媲美原生應用。

2.1 無連線狀態下的可用性

漸進式web應用它不依賴於使用者的連線狀態，當用戶訪問一個漸進式web應用時，它會註冊一個service worker。 service worker可以檢測並響應使用者連線狀態的變化。無論使用者是離線、線上、還是處理網路斷開的狀態下，它都可以提供完整的使用者體驗。

2.2 載入速度會更快

使用service worker技術，我們可以建立一個瞬間執行的網站，無論使用者的網速是很快，還是說使用者的網路是2g網路，或者說使用者根本就沒有網路的連結狀態，網站都可以在幾毫秒內加載出來。這比我們的web要快很多，甚至比原生應用還快。

2.3 推送訊息技術可以實現

漸進式web應用開發可以向用戶傳送訊息，這些推送訊息提供了一個好機會，可以重新吸引使用者，並且提醒他們重新回到我們的網頁。漸進式web應用的通知是完全原生化的，和原生應用推送訊息沒有區別的。

2.4 可以在主螢幕上顯示快捷方式

一旦使用者表現出對漸進式web應用感興趣的話，瀏覽器就會自動建議使用者新增快捷方式到主螢幕上，它和原生應用是完全一致的。

2.5 可以媲美原生應用

漸進式web應用從主螢幕啟動的過程中可以完全原生化，和原生應用非常相似。在載入過程中我們可以顯示啟動畫面，可以全屏模式執行，擺脫瀏覽器和手機系統的UI介面，甚至我們可以鎖定螢幕方向。

如上實現我們所有的關鍵技術就是 service worker，service worker它是一種指令碼，可以通過註冊它來控制我們站點中的一個或多個頁面，一旦我們註冊完畢後，service worker就會獨立存在，它不屬於某個視窗或瀏覽器標籤頁的。

service worker 可以監聽並響應在其控制下的所有頁面事件，比如向web請求檔案等事件，它可以修改請求中的響應，可以攔截，修改，傳遞並返回給頁面。如下所示：

如上圖所示，service worker 在web應用和伺服器層之間，它可以響應請求，無論網路的連結狀態如何，service worker它甚至可以在使用者離線的情況下正常工作。它可以檢測到離線狀態或者伺服器響應慢的情況，它可以返回快取內容取而代之。

它還可以當用戶關閉我們的瀏覽器中的所有標籤頁，service worker依然可以和伺服器進行通訊，它可以接收並顯示推送通知。

這就是我們service worker的優點。它是我們漸進式web應用的核心。它彌補了web應用的缺失環節。在過去我們只能使用原生來做的事情了，現在我們也可以通過web來做這些事情了。

service worker對於我們學校的成本來講也是非常低的，它只是簡簡單單的javascript檔案。對於我們前端開發來講學習沒有任何難度。如上就是漸進式web應用的原理，接下來我們可以慢慢來學習我們的service worker技術了。

service worker的相容性

最後我們來看看service worker 在我們瀏覽器和移動端的相容性如下圖所示：

相關推薦