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

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 Errorbloburl blob:chrome-extension...,并且服务工作者将不支持源.

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

Answer 1

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

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

虽然一开始有点难以理解,但如果您关注缓存管理,理解和利用不同的服务工作者生命周期状态/事件是很重要的.如果它不适用于此更新逻辑,一旦您为给定范围注册了一次服务工作者,它就永远不会放弃控制,如果您的代码中存在错误/需要添加新功能,则会陷入困境.

Answer 2

一种巧妙的方法是使用相同的 javascript 文件来理解上下文并充当 ServiceWorker 以及调用它的人。

超文本标记语言

<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为服务工作者使用单独的文件是一个更好的解决方案。如果您想要脚本的单个入口点，这将很有帮助。