8

我们通过以下方式创建服务工作者

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...，并且 Service Workers 将不支持 origin 。

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

4

2 回答 2

12

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

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

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

于 2015-01-16T17:02:07.363 回答
4

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

于 2015-01-16T15:23:41.540 回答