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

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

我想将webpack用作生成工具，将servicer worker添加到我的Vue项目中

其他一些有用的信息：

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

通过使用一些标志在chrome中启用HTTP上的服务工作者（在特定的源上）。你可以参考

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>

预期：

我希望服务人员注册成功

控制台可以打印出：

“注册成功。作用域为myOrigin/static/”

“来自sw.js的你好”

结果:

从开发工具和应用程序的角度来看，服务人员已成功注册chrome://serviceworker-internals/（很抱歉，我没有足够的声誉来发布图片，所以我会提供两个链接。）

devTool

chrome://serviceworker-internals/

控制台仅打印出：

“注册成功。作用域为myOrigin/static/”

---

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

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

如果您需要在serviceworker.js中添加一个eventlistener，然后在其中添加console.log，那么它将不起作用

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

---

作为参考

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

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

如果您需要在serviceworker.js中添加一个eventlistener，然后在其中添加console.log，那么它将不起作用

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

供参考