Question

我试图在服务工作者中使用fetch事件但他没有为我工作。

self.addEventListener('activate', function(event) {
  console.log('Activated', event);
  fetch('/embed_testing/notification/main.js').then(response => 
          function () {
              console.log(response)
          });
});

self.addEventListener('fetch', function(event) {
    console.log("heyyyo");
  if (event.request.url === new URL('/', location).href) {
    event.respondWith(
      new Response("<h1>Hello!</h1>", {
        headers: {'Content-Type': 'text/html'}
      })
    )
  }
});

为什么它不起作用的任何想法？

Answer 1

从服务工作者内部发出的fetch()请求不会触发相同的服务工作者的fetch事件处理程序。（如果确实如此，您可以轻松想象进入递归循环的场景。）

如果您需要快速测试您的fetch事件处理程序是否正常工作，这似乎就是您在这种情况下所做的事情，最简单的方法可能是在DevTools中打开JavaScript控制台并手动执行一个fetch('/path/to/whatever')。从JavaScript控制台内部创建的fetch()将触发服务工作者的fetch事件处理程序。

如果您对某些不仅仅是测试的内容感兴趣，而是分享在fetch事件处理程序中实现的逻辑，其中代码在处理程序之外运行，那么推荐的方法是重构将代码编入独立函数，然后从fetch事件处理程序内部以及服务工作者中与其相关的任何位置调用该函数。

Answer 2

如果您正在使用Chrome测试您的应用，请尝试取消选中标记＆＃34;绕过网络＆＃34;在开发工具中的应用＆＃34;应用＆＃34;选项卡（选择＆＃34;服务工作者＆＃34;在左侧）

获取不在服务工作者

2 个答案: