Day4-PWA 初體驗 - PWA 架構(二)

前言

這一篇將會介紹 PWA 的核心，也就是 Service Workers。

Service Workers

Service Workers 中文又稱 服務工作線程，它之所以是 PWA 核心關鍵最主要原因莫過於它有強大的 Offline Caching (離線快取)，當然它還有其他強大的功能，可是我個人覺得對於網頁開發者來講能夠 Offline Caching 是一件多麼強大的事情，前面某一篇就有講到過一般我們網頁一旦失去網路就會發生小恐龍事件 ↓

當我們發生網頁離線 or 網頁連線不穩定時該怎麼辦呢? 那就只好點一下小恐龍，然後開始玩超級小恐龍打發時間吧

那 Service Workers 就是要來避免你玩 超級小恐龍玩到膩 而出現的技術，在前面也有講到 Service Workers 強大在於可以離線快取圖片、JS 等等，這邊以我先前製作的 Vue 作品 RagnarokShopV3 來當範本，就可以看到許多東西都被快取儲存於瀏覽器中 ↓

另外 Service Workers 是一個 JavaScript 檔案。

Service Workers 生命週期

你完全沒看錯，Service Workers 有屬於自己的生命週期，雖然 Service Workers 是屬於 JavaScript 的一種，但是它並不能像原本的 JavaScript 一樣去操作 DOM，Service Workers 會比較像是運行於後台的一個腳本(當然如果你要操作 DOM 也是可以，但這邊不介紹。)，所以它完全是一個獨立的 JavaScript 檔案。

另外這邊官方文件也有註明使用 Service Workers 的一些注意事項，這邊我也不再重複打直接貼上來：

• 它是一種 JavaScript 工作線程，無法直接訪問 DOM。 服務工作線程通過響應 postMessage 接口發送的消息來與其控制的頁面通信，頁面可在必要時對 DOM 執行操作。
• 服務工作線程是一種可編程網絡代理，讓您能夠控制頁面所發送網絡請求的處理方式。
• 它在不用時會被中止，並在下次有需要時重啓，因此，您不能依賴於服務工作線程的 onfetch 和 onmessage 處理程序中的全局狀態。如果存在您需要持續保存並在重啓後加以重用的信息，服務工作線程可以訪問 IndexedDB API。
• 服務工作線程廣泛地利用了 promise，因此如果您不熟悉 promise，則應停下閱讀此內容，看一看 Promise 簡介。

最後

最後我覺得還是透過實際開發來了解 Service Workers 的生命週期以及該如何撰寫會比較快，所以這一篇就不再介紹 Service Workers 內能與生命週期，只是若要使用 Service Workers 必須注意主要兩個重點：

• 瀏覽器支援
  • 目前 Service Workers 陸續開始被其他瀏覽器給支援，依照官方說明目前 Firefox、Opera 已經開始支援，而 Microsoft Edge 也公開表示願意支持(是支持不是支援)，那 Safari 呢?雖然並沒有公開表示，但似乎也暗示未來將會進行相關開發，最後你可能會問 IE 呢?IE 已經被微軟老爸放棄了，所以就不用擔心 IE 啦~(微軟表示：不要再把 IE 用來當瀏覽器了)。
• HTTPS
  • Service Workers 必須在 HTTPS 環境下才可以運行，當然 localhost 也可以(否則該怎麼開發呢?)，所以如果您的伺服器是 HTTP 那就只能麻煩您改轉用 HTTPS 囉~

參考文獻

服務工作線程：簡介