漸進式web應用開發---service worker 原理及介紹(一)

龍恩0707發表於2019-07-06

漸進式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 在我們瀏覽器和移動端的相容性如下圖所示:

相關文章