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

漸進式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 在咱們瀏覽器和移動端的兼容性以下圖所示：