javascript - JS Firebase : Service worker unable to nagivate

Question

我正在开发一个使用 firebase 消息传递 的网站，为此，将 firebase 的自定义服务工作线程注册到该网站。

该网站有点像一个网络聊天，它在 firebase 数据库 中同步和存储消息，并且该网站使用 angular-ui-router 从 URL 获取消息 key ，当从客户端收到新消息时，网站会显示一条通知，并且如果单击该通知，则会修改相关消息的 url，但是，当网站不处于焦点位置时，这对于 Service Worker 端来说是一场斗争，因为服务工作人员抛出错误，指出无法导航

服务 worker 代码是这样的:

importScripts('https://www.gstatic.com/firebasejs/4.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.5.0/firebase-messaging.js');

firebase.initializeApp({
    "messagingSenderId": "######"
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload){
    var title = payload.data.title;
    var options = {
        body: payload.data.message,
        icon: "apple-touch-icon.png",
        data: {
            postId: payload.data.postKey
        }
    };

    return self.registration.showNotification(title, options);
});

self.addEventListener("notificationclick", function(evt){
    var postKey   = evt.notification.data.postId;
    var origin    = evt.target.origin;
    var urlTarget = origin + "/#!/" + postKey;

    evt.notification.close();

    evt.waitUntil(
        self.clients.matchAll({
            includeUncontrolled: true,
            type: "window"
        })
        .then(function(clientList) {  
            if(clientList.length > 0){
                var client = clientList[0];

                client.navigate(urlTarget);

                if(client.focus){
                    return client.focus();
                }
            }

            if(self.clients.windowOpen){
                return self.clients.windowOpen(urlTarget);
            }
        }));
});

我期望的行为如下:

焦点:

• 收到消息
• 显示通知
• 点击通知时修改网址

在通知之前点击:https://example.com/#!/

通知后点击:https://example.com/#!/-key

非焦点:

• 收到推送
• 修改用于显示通知的数据
• 显示通知
• 点击通知后聚焦/打开网站
• 焦点/打开时修改url地址

当焦点/打开时:https://example.com/#!/-key

显示焦点通知的代码工作正常，因此我认为没有必要发布代码。

对此的任何帮助表示赞赏，我实际上已经用了我想到的所有替代选项

Answer 1

如per the specification (请参阅 4.2.10，步骤 4)，WindowClient.navigate() 可能会拒绝的原因之一是客户端的事件 Service Worker 与正在执行的当前 Service Worker 不同。代码。换句话说，如果窗口不受当前 Service Worker 控制，则该 Service Worker 无法告诉它导航到给定的 URL。

我建议您使用

self.clients.matchAll({
  includeUncontrolled: false,
  type: 'window'
})

确保您只获取由当前服务工作线程控制的 WindowClient 实例。