一個簡單的服務人員

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);
});