service worker 是什麼？看這篇就夠了

service worker 是什麼

一句話歸納

一個服務器與瀏覽器之間的中間人角色，若是網站中註冊了service worker那麼它能夠攔截當前網站全部的請求，進行判斷（須要編寫相應的判斷程序），若是須要向服務器發起請求的就轉給服務器，若是能夠直接使用緩存的就直接返回緩存再也不轉給服務器。從而大大提升瀏覽體驗。

如下是一些細碎的描述

• 基於web worker（一個獨立於JavaScript主線程的獨立線程，在裏面執行須要消耗大量資源的操做不會堵塞主線程）
• 在web worker的基礎上增長了離線緩存的能力
• 本質上充當Web應用程序（服務器）與瀏覽器之間的代理服務器（能夠攔截全站的請求，並做出相應的動做->由開發者指定的動做）
• 建立有效的離線體驗（將一些不常更新的內容緩存在瀏覽器，提升訪問體驗）
• 由事件驅動的,具備生命週期
• 能夠訪問cache和indexDB
• 支持推送
• 而且可讓開發者本身控制管理緩存的內容以及版本

如何使用

1. 註冊Service worker 在你的index.html加入如下內容

/* 判斷當前瀏覽器是否支持serviceWorker */
       if ('serviceWorker' in navigator) {
           /* 當頁面加載完成就建立一個serviceWorker */
           window.addEventListener('load', function () {
               /* 建立並指定對應的執行內容 */
               /* scope 參數是可選的，能夠用來指定你想讓 service worker 控制的內容的子目錄。 在這個例子裏，咱們指定了 '/'，表示 根網域下的全部內容。這也是默認值。 */
               navigator.serviceWorker.register('./serviceWorker.js', {scope: './'})
                   .then(function (registration) {
    
                       console.log('ServiceWorker registration successful with scope: ', registration.scope);
                   })
                   .catch(function (err) {
    
                       console.log('ServiceWorker registration failed: ', err);
                   });
           });
       }

1. 安裝worker：在咱們指定的處理程序serviceWorker.js中書寫對應的安裝及攔截邏輯

/* 監聽安裝事件，install 事件通常是被用來設置你的瀏覽器的離線緩存邏輯 */
   this.addEventListener('install', function (event) {
        
       /* 經過這個方法能夠防止緩存未完成，就關閉serviceWorker */
       event.waitUntil(
           /* 建立一個名叫V1的緩存版本 */
           caches.open('v1').then(function (cache) {
               /* 指定要緩存的內容，地址爲相對於跟域名的訪問路徑 */
               return cache.addAll([
                   './index.html'
               ]);
           })
       );
   });
   
   /* 註冊fetch事件，攔截全站的請求 */
   this.addEventListener('fetch', function(event) {
     event.respondWith(
       // magic goes here
         
         /* 在緩存中匹配對應請求資源直接返回 */
       caches.match(event.request)
     );
   });

以上爲一個最簡單的使用例子，更多內部api請查看 mdn service worker

注意事項

Service worker運行在worker上下文 --> 不能訪問DOM

它設計爲徹底異步，同步API（如XHR和localStorage）不能在service worker中使用

出於安全考量，Service workers只能由HTTPS承載

在Firefox瀏覽器的用戶隱私模式，Service Worker不可用

其生命週期與頁面無關（關聯頁面未關閉時，它也能夠退出，沒有關聯頁面時，它也能夠啓動）

兼容狀況

有趣的事

在MDN的兼容狀況中能夠看到Safari 對於Service workers的全線不支持，這是由於經過Service workers能夠在瀏覽器上實現一種相似小程序的功能（PWA）。這將繞過蘋果的app store致使蘋果不能再和開發者37開分紅，因此蘋果不喜歡這項技術。ps:不過仍是在18年開始支持了😂