Progressive Web Application Day03 — 隱藏工具人 Service Worker

3 min readMar 21, 2018

上篇文章（ Progressive Web Application Day02 — 到底什麼是 Manifest ）中提到了什麼是 Manifest ，接著要來討論在 PWA 中也佔據非常重要地位的：隱藏工具人— Service Worker 。

在 PWA 中可以做到許多以前是 Native App 的專屬功能，像是：推播訊息、離線瀏覽……等，因為有了 Service Worker 在背景的執行，才能讓這些功能也能在 Web App 上執行。

什麼是 Service Worker

Service Worker 有幾項特色：

能夠在背景執行，即便使用者不開啟網站，也能夠與網站互動（例：使用者關閉網站後，還是能夠接收推播訊息）。
是 JavaScript Worker ，因此不能夠直接操作 DOM ，但是可以透過 postMessage 與頁面溝通，讓頁面代替 Service Worker 操作 DOM 。
可以操作與控制頁面上的 Request 。
以非同步的概念去設計，使用 Promise 作為非同步的流程控制。
可以在背景執行，在安全的考量下，需要執行在 localhost 或是 HTTPS 的環境中。

基本上 Service Worker 就是在背景默默去幫你做許多事情，也是因為有了這個工具人，讓 Web App 可以達成許多原本專屬於 Native App 的功能。

Service Worker 的一生

生命週期在 Service Worker 中屬於比較複雜的部分，但是只要搞懂了，就能夠了解各個週期中該做的事情是什麼。

Parsed

呼叫 register() 後，將會下載與解析 Service Worker ，成功後就會進入到此階段，但如果下載與解析中發生錯誤，此 Service Worker 將會被捨棄。

Install

Service Worker 的第一個觸發的事件是 install ，這個會在 Service Worker 執行時被觸發， install 事件每個 Service Worker 只會被觸發一次，但是當你修改了 Service Worker ，將會視為不同的 Service Worker ，此事件將會再次被觸發。

在這個階段，很適合拿來快取頁面中所需要的檔案。

Activate

此階段 Service Worker 已經準備好處理 push 或是 sync ……等各種事件，在這階段也會收到 activate 的事件，此階段適合拿來清理舊的快取，或是搬移資料庫。

後記

最近想說把 PWA 的部分，拿來當鐵人 30 來寫，不過因為這個東西也還不是非常熟悉，需要花蠻多時間的……，如果文章更新的時間不太固定，還請多多見諒啊啊啊。

2018–03–15 在好想工作室有分享 PWA — 簡單介紹這個主題，雖然活動已經結束，但還是放上活動簡報，如果對於 PWA 有興趣的話，都歡迎聯絡我或是在底下留言給我。