当前位置: 首页 > 知识库问答 >
问题:

如何使用Service Worker从一开始就处理读取事件?

袁志专
2023-03-14

我正在尝试构建一个基本的服务人员来处理从我的网站发送的所有AJAX请求。

服务工作者已订阅获取事件。我可以处理所有发送的请求,但在第一次安装service worker时,该请求不起作用。

一旦安装了服务工作者,如果我刷新网页,那么获取事件处理程序就会工作。

我希望我的服务人员从一开始就获取所有请求。有可能吗?

这是我的代码:

指数html

<!DOCTYPE html>
<html>
<body>
<h2>Service Worker Demo Page</h2>
<script type="text/javascript">

  if (navigator.serviceWorker) {

    navigator.serviceWorker.register('./sw.js')
      .then(function (registration) {
        console.debug('Registration within scope %s. More details %O', registration.scope, registration);
        return fetch('https://www.google.com');
      })
      .then(console.info)
      .catch(console.warn);

  }

</script>

</body>

sw.js

self.addEventListener('fetch', function (e) {
  console.info('%s request to %s. More details: %o'
    , e.request.method
    , e.request.url
    , e
  );
});

共有3个答案

轩辕乐邦
2023-03-14

非常感谢所有的答案,最后这是代码。

我不认为这是最好的解决方案,但它是有效的。即使刷新网页,Service Worker也会从一开始就处理所有请求。

HTML:

<!--index.html-->
<!DOCTYPE html>
<html>
<body>
<h2>Service Worker Demo Page</h2>
<script type="text/javascript">

  function init() {
    fetch('https://www.google.com');
  }

  function subscribeToSWMessages() {
    navigator.serviceWorker.onmessage = function (event) {
      console.info("Broadcasted message received: %s", event.data.message);

      if (event.data.command == "swActive") {
        init();
      }
    };
  }

  if (navigator.serviceWorker) {

    subscribeToSWMessages();

    navigator.serviceWorker.register('./sw.js')
      .then(function (registration) {
        console.debug('Registration within scope %s. More details %O', registration.scope, registration);
        navigator.serviceWorker.controller.postMessage({
          "command": "swRegistrationOk",
          "message": "Service Worker registration ok"
        });
      })
      .catch(console.warn);
  }

</script>

</body>
</html>

服务人员:

// index.js
self.addEventListener('activate', function (event) {
  event.waitUntil(self.clients.claim().then(sendActiveSignalToClients));
});

self.addEventListener('fetch', function (e) {
  console.info('%s request to %s. More details: %o'
    , e.request.method
    , e.request.url
    , e
  );
});

self.addEventListener('message', function (event) {
  console.info("Broadcasted message received: %s", event.data.message);

  if (event.data.command == "swRegistrationOk") {
    event.waitUntil(sendActiveSignalToClients());
  }
});

function sendActiveSignalToClients() {

  self.clients.matchAll().then(function (clients) {
    clients.forEach(function (client) {
      client.postMessage({
        "command": "swActive",
        "message": "Service Worker is active"
      });
    })
  })

}
黄沈浪
2023-03-14

是的,有可能。

为了捕获最开始的请求,Service Worker必须控制在激活请求后调用这些请求的初始页。不幸的是,默认情况下这是不启用的。您仍然需要调用clients.claim来实现这个预期的行为。

self.onactivate = function(event){
  event.waitUntil(self.clients.claim());
};
祝灼光
2023-03-14

的默认行为是,必须先刷新网页,然后才能激活其服务工作程序。因此,您(用户)的“非常开始”与服务人员的“非常开始”不同。

但是,您可以使用客户端来覆盖此默认行为。索赔()。请在MDN上阅读:

// sw.js
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});

注意,对于您的用例,您应该确保在触发任何获取事件之前注册并激活SW。

______

在“service worker lifecycle”博客文章中阅读有关service worker生命周期的更多信息。这里有一些相关的要点。。。

  • 在成功完成安装并处于活动状态之前,服务工作人员不会接收到读取和推送之类的事件。
  • 默认情况下,页面的读取不会通过服务工作者,除非页面请求本身通过服务工作者。因此,您需要刷新页面以查看服务辅助程序的效果。clients.claim()可以覆盖此默认值,并控制非受控页面。
 类似资料:
  • 请告诉我,每次我运行消费者时,如何从一开始就使用Kafka消费者API阅读消息。

  • 我想用html制作datalist这里是一个例子 但是当我搜索“go”时,它会显示两个结果 null 我必须在MySQL中存储的5000多条记录上实现这一点。

  • 问题内容: 我需要知道如何从python文件中读取行,以便首先读取最后一行并以这种方式继续进行操作,直到光标到达文件的开头为止。有任何想法吗? 问题答案: 通过至少三种方法可以解决此问题的一般方法,即按行反向反向读取文本文件。 普遍的问题是,由于每行的长度可以不同,因此您无法事先知道文件中每行的起始位置,也不知道其中有多少行。这意味着您需要对问题应用一些逻辑。 通用方法#1:将整个文件读入内存 使

  • 问题内容: 我对此有一个文件模拟:… 我想从存在“ HDK1001”字样的行开始阅读,并在世界“ HDK7564”字样处结束阅读 我尝试使用此代码,但无法执行限制 请帮帮我 问题答案: 试试这个代码。

  • 我正在尝试重新实现malloc,我需要理解对齐的目的。据我所知,如果内存对齐,代码将执行得更快,因为处理器不必采取额外步骤来恢复被剪切的内存位。我想我理解64位处理器读取64位逐64位内存。现在,让我们想象一下,我有一个有序的结构(没有填充):一个char、一个short、一个char和一个int。为什么short会错位?我们有区块中的所有数据!为什么地址必须是2的倍数。整数和其他类型的问题是一样

  • 因此,我有一个扫描仪,它可以使用while(file.hasNext())读取多行的文本文件,但是在它到达文本文件的末尾之后,我该如何制作它,以便在单独的while循环中重新开始读取行?