serviceworkers焦点选项卡：通知点击客户端为空 [英] serviceworkers focus tab: clients is empty on notificationclick

问题描述

我有一个常见的serviceworker escenario，我想要捕获通知单击并关注通知来自的标签。然而，客户变量总是空的，它的长度为0。 div class =snippet-code>

console.log（sw startup）; self.addEventListener（'install' ，function（event）{console.log（SW installed）;}）; self.addEventListener（'activate'，function（event）{console.log（SW activated）;}）; self.addEventListener（ （e）{// Android不会自动关闭通知on console.log（e）; e.notification.close（）; //焦点标签如果打开e.waitUntil（clients.matchAll（{type ：'window'}）。then（function（clientList）{console.log（clients：+ clientList.length）; for（var i = 0; i< clientList.length; ++ i）{var client = clientList [i]; if（client.url ==='/'&''focus'in client）{return client.focus（）;} } if（clients.openWindow）{return clients.openWindow（'/'）; }}））; }）;

注册是这样的：

chrome：// serviceworker-internals /输出显示注册和安装都很好。但是，当推送通知时，clientList为空。我试图删除过滤器类型：'窗口'，但结果仍然是一样的。由于客户端为空，总是打开一个新窗口。我在做什么错了？

解决方案

您自己评论中的怀疑是正确的。服务工作人员在导航到服务工作人员注册的来源时控制页面。因此，实际初始化服务工作者的原始页面加载本身并不受其控制。这就是为什么工作人员只有在您访问新选项卡或进行刷新时才会找到您的标签。然而，正如Jeff Posnick在评论中指出的那样，您可以获得不受控制的页面如下： ServiceWorkerClients.matchAll（{includeUncontrolled：true，type：'window'}）。

I have a common serviceworker escenario, where I want catch a notification click and focus the tab where the notification has come from. However, clients variable is always empty, its lenght is 0

console.log("sw startup");
self.addEventListener('install', function (event) {
    console.log("SW installed");
});

self.addEventListener('activate', function (event) {
    console.log("SW activated");
});
self.addEventListener("notificationclick", function (e) {
    // Android doesn't automatically close notifications on click 
    console.log(e);
    e.notification.close();
  
    // Focus tab if open
    e.waitUntil(clients.matchAll({
        type: 'window'
    }).then(function (clientList) {
        console.log("clients:" + clientList.length);
        for (var i = 0; i < clientList.length; ++i) {
            var client = clientList[i];
            if (client.url === '/' && 'focus' in client) {
                return client.focus();
            }
        }

        if (clients.openWindow) {
            return clients.openWindow('/');
        }
    }));
    
});

And the registration is this one:

 this.doNotify = function (notification) {      
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js').then(function (reg) {
               
                requestCreateNotification(notification, reg);
            }, function (err) {
                console.log('sw reg error:' + err);
            });
        }
   ...
   }

chrome://serviceworker-internals/ output shows that registration and installation are fine. However, when a notification is pushed, clientList is empty. I have tried removing the filter type:'window' but the result is still the same. As clients are empty, a new window is always opened. What am I doing wrong?

解决方案

The suspicion in your own comment is correct. A page is controlled by a service worker on navigation to an origin that the service worker is registered for. So the original page load that actually initializes the service worker is not itself controlled. That's why the worker only finds your tab once you visit with a new tab or do a refresh.

However (as Jeff Posnick points out in the comments) you can get uncontrolled pages as follows: ServiceWorkerClients.matchAll({includeUncontrolled: true, type: 'window'}).

这篇关于serviceworkers焦点选项卡：通知点击客户端为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！