Question

我正在阅读ServiceWorker入门文档https://developers.google.com/web/fundamentals/getting-started/primers/service-workers。

首先，我们向范围注册我们的ServiceWorker。所以我这样做如下

<!DOCTYPE html>
<html>
<head>
    <title>Getting started with Service Worker</title>
</head>
<body>

<script type="text/javascript">

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

</script>

</body>
</html>

并创建了一个sw.js文件，并在sw.js

中编写了一个console.log

console.log("This is sw.js")

因此，当我第一次访问index.html文件时，执行该console.log并打印ServiceWorker注册成功消息。但是当我第二次刷新页面时，它只会打印消息ServiceWorker注册成功。那么为什么它没有第二次执行sw.js中的console.log。我期待它第二次执行该console.log。我错过了这一点吗？

Answer 1

服务工作者是在注册时基本上执行一次（在后台）的脚本。如果您需要执行一些循环代码，则需要使用service worker API：

服务工作者是针对原点和路径注册的事件驱动工作者。

调用navigator.serviceWorker.register('/sw.js')后，安装事件将被称为异步;这就是为什么它返回Promise，您传递callback函数（内容为console.log('ServiceWorker registration successful ...');的函数）。

Answer 2

服务工作者旨在坐在您的网站和网络之间。因此，当您最初加载页面时，如果您添加了一个事件来监听安装，它会运行一次脚本并安装服务工作者。

完成后，您需要将听众添加到“提取”状态。用于捕获页面内所有请求的事件。所以基本上如果你想在每次发出请求时都使用console.log，你可以执行以下操作：

self.addEventListener('fetch', event => {
  console.log(event);
})

了解ServiceWorker注册

2 个答案: