Hi Dai Gei Ho~ 我是Winnie ~ 由於在上篇文章中 我們提到了 Backgorund 的運作核心為 Service Worker，而近幾年最廣為人知的 Progressive Web App ，Service Worker也是其運作的核心技術之一。

Progressive Web App 是什麼?
從字面翻為『漸進式』的網應用程式，簡單來說就是 讓網站也可以逐漸具備 應用程式 的優點，對PWA有興趣的朋友可以觀看這一篇 -> 點我看更多

基於個人好奇及想更深入了解Service Worker之下，我把他拉出來作為Background 的番外篇來介紹了。

也許透過 Service Worker 的介紹可以更了解 Background 的特性。

關於 Service Worker 的運行

Service Worker 為一個 事件驅動的 Web Worker， 相較於 JavaScript 是在 「主執行緒」上運行，較專注於 頁面渲染及邏輯的互動，Service Workers 則是運行在其他的執行緒上，採用 非同步的方式來運行，也因為不受限於一般主執行序上，所以當瀏覽器關閉時，可以持續在背後運行相關功能。

相反的，因為無法之直接的存取畫面中DOM，所以只能透過事件監聽來觸發生命週期， 如要與 Browser 端溝通，需透過 Message 方法來進行。

另外， 因為Service Worker 擁有攔截資料請求的能力，但基於安全考量，只能透過 Https 或 localhost 的環境下進行。

Service Worker 生命週期

關於 Service Worker 的 生命週期，因為是透過事件的發生來觸發。

所以在以上示意圖中來看，主要可以分為以下install、Error、Actived、idel、Push/Fetch/Sync、Terminated六個環節:

同時開始使用 Service Worker 前，需在 Browser 端註冊一個Service Worker檔，當註冊完成後 Browser 才會開始執行下一步的安裝。

  //index.js
  
  // 判斷 Browser 是否支援 service Worker
  
    if('serviceWorker' in  navigator ){
    navigator.serviceWorker.register("/sw.js")
      .then( registration => {
          console.log('SW is reqistration', registration)  
      })
      .catch( err => console.log('SW reqistration failed :', err))
  } else {
    console.log('Sw is not supported!')
  }
    

install

接著，當Service Worker 註冊成功後，在 Service Worker 中就會觸發 install 事件，而此事件在每個Service Worker中只會被調用一次。

通常在install階段最常見的應用會進行離線緩存功能，當緩存成功，就會進到下一個生命週期 Activate ，同時在 install 轉為 Activate 的工程中，Service Worker的過程中不會觸發其他功能性事件(Fetch、Push)。

// sw.js
self.addEventListener('install', function (event) {
 	// 離線緩存 我們明天見
});

Activate & Idel & Terminated

接著，當Service Worker 進入 啟動(Actived) 狀態中，但當頁面沒有被使用，Service Worker 會進入停止（Terminated）的狀態，同時也可以節省記憶體的消耗

// sw.js
self.addEventListener('activate', function(event) {
  // do something
});

Push/Fetch/Sync

在Service Worker 主要功能事件中 分別有 Fetch、push及 sync 事件會觸發 Service Worker 的啟動。

以 fetch 事件為例:

在前面我們有介紹過 Service Woker 主要為 瀏覽器 與 Service 之間的網路請求代理(proxy)， 所以當 HTTP 請求發出時，在 Service Woker會針對請求進行攔截 且 觸發 fetch 事件，後續就可以針對請求進行處理。

// sw.js
self.addEventListener('fetch', function(event) {
    // do something
});

假如 Browser 不支援?

如果遇到 Browser 不支援 Service Ｗorker 時， 就會進入 Error 狀態，此時可以在針對需求來執行接下的功能。

總結以上 Service Worker 的運行，我們可以了解到其特性 :

• 無法存取DOM元素，需透過 postMessage溝通
• 主要透過事件發生觸發各生命週期
• 需在 HTTPS 下執行，進行攔截請求
• 大量使用 Promise

有沒有很熟悉 ! 這這就是昨天我們說的 Background 常見特性。

以上就是關於Service Worker 的基本觀念介紹，而在下篇文章中想針對 Service Worker 的常見功能 離線快取 來實際操作每個生命週期。

那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

每日有感而發:

rrrrr!!!
充電器在公司，
電腦現在剩10%
我還有內容沒寫完，以防G掉，只好先送一篇惹

如有奇怪少字的地方，請見諒!!
今天分享一首 -> 自由發揮 - 死定了