服务工作者事件监听器 - 获取

Question

我通过下一个代码创建了一个 service worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

并得到很好的答案，并且事件 'install' 在 sw.js 中发出，但是事件 'fetch' 从不发出。

我使用带有 80 (http) 端口的 http-server (node js)，我在 DevTools Chrome 和来自 http-server 的控制台中看到了我的请求，但我的 service worker 没有发出任何。

我的服务人员代码：

self.addEventListener('install', () => {
    console.log("event - install"); // OK
});

self.addEventListener("fetch", (e) => {
    console.log("A"); // BAD
    return e.request;
});

我在正文末尾使用这段代码

setTimeout(() => {
  alert("S");
  fetch("/svg.svg", {
    method: "GET"
  });
}, 10000);

Answer 1

serviceworker 必须运行在 https 协议中，但 http-server 创建一个 http 服务器

Answer 2

好的，我决定我的问题。我忘记删除 DevTools 中的选项 'Disable cache'（在 'Network' 选项卡中）Chrome，我昨天使用过这个选项。

服务工作者事件监听器 - 获取

Service workers event listener - fetch

javascript

fetch

service-worker