用户故事:
在浏览器上,我在任何URL上都打开了我的Progressive Web App
https://mypwa.com/xxxx
我收到一封邮件,其中包含指向我的PWA页面的链接
https://mypwa.com/post/<postId>
我希望在现有的PWA选项卡中获得焦点并转到URL,而不是在浏览器中打开新选项卡。我既不需要新的标签,也不需要新的PWA启动(在记录下载中花费很多)
使用postMessage,Service Worker可以告诉现有选项卡获取焦点并进入/post/<postId>
路径。可以正常工作,但是从fetch事件中,我在服务工作者中的client.focus()上收到了“ DOM异常”,简而言之:
self.addEventListener("fetch", function(event) {
var requestUrl = new URL(event.request.url);
var pathname = requestUrl.pathname;
if (
event.request.mode === "navigate" &&
requestUrl.origin === location.origin
) {
const rootUrl = new URL("/", location).href;
const mg = pathname.match(regexpPost);
const postId = mg[1];
event.waitUntil(
clients.matchAll().then(matchedClients => {
for (let client of matchedClients) {
if (client.url.indexOf(rootUrl) >= 0) {
return client
.focus() // ***** CRASHING HERE *****
.then(() => {
return sendMessageClient(client, { postId }).then(resp => {
other;
});
});
}
}
})
);
}
});
我还缺少如何关闭新打开的选项卡。我不想保留它:死掉的标签会堆积起来,这不是良好的用户体验。
尝试使用JavaScript window.close();
,但它必须响应用户操作...