javascript - 即使代码在 Aurelia 中是正确的，Service Worker 也在工作

Question

我需要一个 Aurelia 中服务 worker 的示例。我尝试了多个代码示例，但没有人调用安装、激活和获取方法。

Service Worker 被激活，但从未达到安装工作或激活的程度。

我需要一些帮助来理解主要问题。 我还注意到 addEventListener“加载”到窗口没有响应，因此我使用了“aurelia-composed”。

服务 worker .js

// installing & Activating & fetching 

    self.addEventListener("install", event => {
      console.log("====> service worker is installed ", event);

        })
      );
    });

    self.addEventListener("activate", event => {
      console.log(" ====> service worker is activated", event);
    });
    self.addEventListener("fetch", event => {
      console.log("====> service worker is fetched ", event);
    });

索引.ejs

// placing the service worker in HTML

    <script>

        if (navigator.serviceWorker) {
          console.log("<== service worker supported ==>");

          window.addEventListener("aurelia-composed", () => {
            console.log("#### window loaded ######");
            navigator.serviceWorker
              .register("./service-worker.js")
              .then(reg => {
                console.log(" ++++  SW registered +++++++",reg);
              })
              .catch(err => {
                console.log(` error in registering worker`,err);    

              });
          });
        }
      </script>

Answer 1

对于这个问题，我可以观察到两件事: 1) 确保 service-worker.js 位于“src”文件夹之外(aurelia 扫描代码的位置)。 Service Worker 代码必须是一个普通的 js 文件，并且不能被捆绑。 此外，service-worker.js 文件中可能存在语法错误。附件是我自己的版本:

self.addEventListener("install", event => {
  console.log("====> service worker is installed ", event);

});

self.addEventListener("activate", event => {
  console.log(" ====> service worker is activated", event);
});

self.addEventListener("fetch", event => {
  console.log("====> service worker is fetched ", event);
});

2) service worker 文件的加载可以放在 main.ts 或 main.js aurelia 文件的末尾，在应用运行后:

    await aurelia.start();
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
        .then(function (registration) { return registration.update(); })
        .catch(console.error);
    }
    return aurelia.setRoot('app');

完成所有这些后，在我的 chrome 控制台中:

瞧!

最好的问候。