什麼是Service Worker？

從一般普通的Javascript開始說，Javascript是在single thread上運行。這意味著，如果我們訪問一個網頁，這個網頁顯然會返回一個執行一些Javascript的HTML頁面，而此頁面載入的Javascript code是在單一thread上運行。即使有多個Javascript File由同一個頁面載入，它們仍然共享一個thread。我們已經知道Javascript Code可以做到像顯示alert、prompt、更改DOM(像是隱藏或添加新元素並執行我們想要的所有邏輯)。
那Service Worker扮演的角色又是什麼呢？
Service Worker也會在單獨一個thread上運行(這非常重要)，它與HTML頁面所載入的普通Javascript Code並不共享相同thread，可以把它想成是一個在後台運行的process。

最初我們可能會透過HTML載入的JS File來註冊Service Worker，但一旦註冊後，它就變成了一個獨立運行於我們網頁的process，另外在註冊時，我們會去定義Service Worker的scope，也就是它能作用的範圍(通常我們就直些設成我們網頁的跟目錄)。

即使用戶關閉瀏覽器中的所有頁面，Service Worker也會繼續作用。因為Service Worker是在後台運行的proccess。這邊要特別說明雖然Service Worker也是用JS來撰寫，但它們的工作方式與普通的Javascript Code完全不同，它無法獲取網頁的DOM，因為它沒有被html載入，而只是在網頁的某個scope內執行。

那Service Worker可以作些什麼？
答案是「監聽事件」。Service Worker可以監聽從JS或是HTML頁面所發出的event(例如網頁推播事件)，並在幾秒鐘內處理和回應這些事件。

用一句話來總結前面這麼多屁話XD --> Service Worker = Background Process

Service Worker監聽哪些事件？

1. Fetch事件：簡單來說就是由網頁發送的每個HTTP請求，可能是CSS的CDN或是JS Code中有使用其他第三方的API等等，如果我們在Javascript中使用普通傳統Ajax Request，它是不會觸發fetch事件。對於監聽到的fetch事件，我們可以針對回傳結果進行想要的處理，這是非常強大的功能。
2. Push Notifications事件：推播通知往往是從另一台server發送的，基本上每個瀏覽器像是Google Chrome和Mozilla Firefox都有自己的推播server。我們可以從自己的server向瀏覽器供應商的推播服務發送請求，他們會將此推送通知發送給我們的PWA的service worker。
3. Notification Interaction事件：當用戶點擊通知，service worker也可以監聽這種事件，並作出相對應的處理如顯示一個頁面、從cache中載入一些東西等等，無論你想做什麼都可以。
4. Background Syn事件：某些瀏覽器支援我們使用背景同步，這意味著當網路不佳時，service worker可以儲存某個操作，如果它現在無法執行，則在重新建立網路連線後就會執行它。
5. Service Worker Lifecycle事件：等一下就會詳細說明service worker的生命週期，這邊就先省略。

Service Worker的生命週期

• 以我的project為例，要爲網頁安裝service worker，需要先在project內的某份JavaScript File(這邊是app.js)中註冊，註冊service worker將會導致瀏覽器在後台啟動service worker thread的install步驟。
• 在install過程中，我們可以在sw.js file中監聽install事件，並做一些暫存某些靜態檔案的工作。如果所有檔案均已成功暫存，那麼service worker就安裝完畢。如果任何檔案下載失敗或暫存失敗，那麼install步驟將會失敗，service worker就無法activate(也就是說不會安裝)。如果發生這種情況，不必擔心，它下次會再試一次。
• 安裝之後，接下來就是activate步驟，service worker將會對其scope內的所有頁面實施控制。
• 若都沒事件觸發service worker會idle並最終terminate以節省記憶體。

Service Worker Browser Support --> 參考連結

來為我的PWA project註冊一個service worker吧

一開始我會將sw.js file新增在public folder底下(也就是我們網頁的root)，瀏覽器會預設將service worker的作用域(scope)設置成service worker js file(sw.js)所在的目錄中，因為目前我希望service worker能對我project中所有的頁面進行控制。

再來將註冊的code寫在app.js中，why?? 因為我不知道用戶之後要進入到project的哪個頁面中，所以為了要讓每個頁面都受到service worker控制，我將app.js導入到每個html file中。以下為app.js的註冊code：

if('serviceWorker' in navigator) {   // 檢查browser有無支援serviceWorker
    navigator.serviceWorker.register('/sw.js').then(function() {   // register會回傳一個Promise
        console.log('Service worker registered!');
    });
}

npm start重新啟動http-server，在chrome dev tools --> Application --> Service Worker，可以看到service worker已經安裝完成並激活了。

(注意：service worker只會在https或是localhost連線下才會作用，若今天你的PWA是使用http，則不會)

今天就先到這，明天來看看要service worker是怎麼處理監聽到的event。

Day04 結束!!