Question

我们通过

创建服务工作者

navigator.serviceWorker.register('sw.js', { scope: '/' });

我们可以在没有这样的外部文件的情况下创建新的Workers，

var worker = function() { console.log('worker called'); };
var blob = new Blob( [ '(' , worker.toString() , ')()' ], {
    type: 'application/javascript'
});
var bloburl = URL.createObjectURL( blob );
var w = new Worker(bloburl);

使用blob创建ServiceWorkers的方法，我们将获得Security Error，因为bloburl将是blob:chrome-extension...，并且服务工作者将不支持源。

是否可以在没有外部文件的情况下创建服务工作者，并将范围用作/？

Answer 1

我强烈建议不要试图找到解决服务工作者实现代码存在于独立文件中的要求的方法。服务工作者生命周期updates中非常重要，它依赖于您的浏览器能够定期获取您注册的服务工作者JavaScript资源并进行逐字节比较以查看是否有任何更改

如果您的服务工作者代码中发生了某些变化，那么新代码将被视为installing服务工作者，并且旧服务工作者代码最终将被视为redundant服务工作者所有已注册和卸载/关闭旧代码的页面。

虽然一开始有点难以理解，但如果您关注缓存管理，理解并利用不同的服务工作者生命周期状态/事件非常重要。如果它不适用于此更新逻辑，那么一旦您为给定范围注册了一个服务工作者，它就永远不会放弃控制，如果您的代码中存在错误/需要，您将被卡住添加新功能。

Answer 2

一种hacky方式是使用相同的javascript文件了解上下文并充当ServiceWorker以及调用它的人。

HTML

<script src="main.js"></script>

main.js

if(!this.document) {
    self.addEventListener('install', function(e) {
        console.log('service worker installation');
    });
} else {
    navigator.serviceWorker.register('main.js')
}

为防止将此项维护为大文件main.js，我们可以使用

if(!this.document) {
    //service worker js
    importScripts('sw.js');
else {
    //loadscript document.js by injecting a script tag
}

但它可能会回到使用单独的sw.js文件为服务工作者提供更好的解决方案。如果想要一个单一的入口点，这将是有用的。

如何在没有单独的JS文件的情况下使用ServiceWorker？

2 个答案:

HTML

main.js