服务工作者已经成功注册，但是serviceworker.js文件中的代码尚未执行

Question

服务工作者已成功注册（已在devtools中显示），但尚未执行serviceworker.js文件中的代码。

我想使用webpack作为构建工具，将服务人员添加到我的Vue项目中。

其他一些有用的信息：

1.Serviceworker.js用作单独的条目文件，请确保文件输出名称仍为servicerworker.js（其他条目文件将通过哈希值重命名）

1. 通过使用某些标志在chrome（特定来源）上通过HTTP启用服务工作者。您可以参考Command line option for whitelisting specific origins to ease development and testing of websites using Secure Origin only features。

   3.WebpackConfig.js：devServer.publicPath为/static/

index.html：

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/static/serviceworker.js', { 
            scope: '/static/' 
        }).then(function (reg) {
            console.log('Registration succeeded. Scope is ' + reg.scope);
        }).catch(function (error) {
            console.log('Registration failed with ' + error);
        });
    }
</script>

serviceworker.js：

console.log('Hello from sw.js')

预期：

1. 我希望服务工作者能够成功注册。

2. 控制台可以打印出：

   “注册成功。范围是myOrigin / static /”

   “来自sw.js的问候”

结果：

1. 从开发人员工具和chrome：// serviceworker-internals /的角度来看，服务工作者已成功注册（很抱歉，我没有足够的声誉来发布图片，因此我将给出两个链接。）

devTool

chrome：// serviceworker-internals /

1. 控制台仅打印出：

   “注册成功。范围是myOrigin / static /”

Answer 1

我假设您的serviceworker.js文件仅包含这么多代码

    console.log('Hello from sw.js');

这不起作用，您需要在serviceworker.js中添加一个事件监听器，然后在其中添加console.log。例如

    self.addEventListener('fetch',function(event){
       console.log('Hello from sw.js');
    })

供参考https://developers.google.com/web/ilt/pwa/introduction-to-service-worker