一個簡單的服務人員

main.js

服務工作者是針對原點和路徑註冊的事件驅動的工作者。它採用 JavaScript 檔案的形式，可以控制與之關聯的網頁/網站，攔截和修改導航和資源請求，以及以非常精細的方式快取資源，讓你完全控制應用在特定情況下的行為方式（最明顯的一個是當網路不可用時。）

資料來源： MDN

一些事情：

1. 它是一個 JavaScript Worker，因此無法直接訪問 DOM
2. 它是一個可程式設計的網路代理
3. 它將在不使用時終止，並在下次需要時重新啟動
4. 服務工作者的生命週期與你的網頁完全分開
5. 需要 HTTPS

此程式碼將在 Document 上下文中執行，（或）此 JavaScript 將通過 <script> 標記包含在你的頁面中。

// we check if the browser supports ServiceWorkers
if ('serviceWorker' in navigator) {
  navigator
    .serviceWorker
    .register(
      // path to the service worker file
      'sw.js'
    )
    // the registration is async and it returns a promise
    .then(function (reg) {
      console.log('Registration Successful');
    });
}

sw.js

這是服務工作者程式碼，在 ServiceWorker 全域性範圍中執行。

self.addEventListener('fetch', function (event) {
  // do nothing here, just log all the network requests
  console.log(event.request.url);
});