原連結：https://mp.weixin.qq.com/s/sU0cZg6EvmubC262Asdc3g

Service worker是什麼

伺服器和瀏覽器之間的中間人角色

如果網站中註冊了service worker那麼它可以攔截當前網站所有的請求，進行判斷（需要編寫相應的判斷程式），如果需要向伺服器發起請求的就轉給伺服器，如果可以直接使用快取的就直接返回快取不再轉給伺服器。從而大大提高瀏覽體驗。

HTTP 快取與 Service Worker 快取

• HTTP 快取中，Web 伺服器可以使用 Expires 首部來通知 Web 客戶端，它可以使用資源的當前副本，直到指定的“過期時間”。反過來，瀏覽器可以快取此資源，並且只有在有效期滿後才會再次檢查新版本。使用 HTTP 快取意味著你要依賴伺服器來告訴你何時快取資源和何時過期（當然，HTTP 快取控制還包括 cache-control,last-modified,etag 等欄位）。

• Service Workers 的強大在於它們攔截 HTTP 請求的能力，接受任何傳入的 HTTP 請求，並決定想要如何響應。在你的 Service Worker 中，可以編寫邏輯來決定想要快取的資源，以及需要滿足什麼條件和資源需要快取多久。一切盡歸你掌控！（所以，出於安全考慮，Service Workers 要求只能由 Https 承載）

Service worker 特性

• Service worker 執行在 worker 上下文（self） --> 不能訪問 DOM（這裡其實和 Web Worker 是一樣的）；
• 它設計為完全非同步，同步 API（如 XHR 和 localStorage）不能在 service worker 中使用；
• 出於安全考量，Service workers 只能由 HTTPS 承載；
• 某些瀏覽器的使用者隱私模式，Service Worker 不可用；
• 其生命週期與頁面無關（關聯頁面未關閉時，它也可以退出，沒有關聯頁面時，它也可以啟動）。
• 基於web worker（一個獨立於JavaScript主執行緒的獨立執行緒，在裡面執行需要消耗大量資源的操作不會堵塞主執行緒）
• 在web worker的基礎上增加了離線快取的能力
• 本質上充當Web應用程式（伺服器）與瀏覽器之間的代理伺服器（可以攔截全站的請求，並作出相應的動作->由開發者指定的動作）
• 建立有效的離線體驗（將一些不常更新的內容快取在瀏覽器，提高訪問體驗）
• 由事件驅動的,具有生命週期
• 可以訪問cache和indexDB
• 支援推送
• 並且可以讓開發者自己控制管理快取的內容以及版本