仅针对新客户端更新ServiceWorker

问题描述：

我正在尝试更新ServiceWorker的工作。仅针对新客户端更新ServiceWorker

我有一个老服务员，有些窗口在它的控制下。现在有一个ServiceWorker的新版本。它得到正确安装。但它不会为新页面激活。我的目标是保留旧页面的旧页面和每个新页面/页面的新页面。

任何想法如何做到这一点？

编辑：

是我如何检查新的服务人员未更新：

我有一个的sendMessage方法：

sendMessage(message): Promise { 
    const channel = new MessageChannel(); 
    const p1 = channel.port1; 
    const result = new Promise(resolve => { 
     p1.onmessage = ({ data }) => { 
     resolve(data); 
     }; 
    }); 
    serviceWorker.controller.postMessage(message, [channel.port2]); 
    return result; 
    }

然后，我用它来检查页面开始

this.ready = this.sendMessage('version') 
    .then(version => { 
    if (version !== process.env.BUILD_NUMBER) { 
     console.log('$$ Version mismatch, reinstalling service worker'); 
     throw new Error('build mismatch'); 
    } 

    return serviceWorker.controller; 
    });

而我在ServiceWorker中回答

self.addEventListener('message', ({ data, ports }) => { 
    const client = ports[0]; 
    if (data === 'version') { 
    client.postMessage(process.env.BUILD_NUMBER); 
    } 
});

编辑

添加：

event.waitUntil(self.clients.claim());

帮助，但它激活ServiceWorker还为老客户。

感谢

*“但它不会被激活新页面。*”：让我们咨询我们的水晶球，找出原因;或者换句话说：您应该为我们提供一些具体的信息/代码，以了解为什么您的新服务未启用新页面。 – trincot

我添加了有关如何检查版本不匹配的信息。我尝试强制更新（）并重新加载页面时，版本不匹配，但我最终在一个无限循环。 –

答

调用一个服务人员的install事件处理程序中self.skipWaiting()会造成新安装的服务人员立即激活，即使有现有的旧服务人员这是目前其他客户端激活。如果没有self.skipWaiting()，新安装的服务人员将保持waiting状态，直到以前服务人员的所有其他客户端都关闭。

调用从activate事件处理中self.clients.claim()有时用为好，但前提是你要新激活的服务人员把已经开放客户端或者是失控的，或由一个旧版本的服务控制的控制工人。在你的情况下，这听起来像你不要想要的行为，所以你不应该打电话self.clients.claim()。

通过测试（在Chrome中的本地主机上），似乎'skipWaiting（）'本身会导致*新激活的服务工作人员控制已经打开的客户机，这些客户机是不受控制的，或者是由旧版本的服务人员控制的* ？ –

仅针对新客户端更新ServiceWorker

相关推荐