从Android上的Web推送通知打开时,已安装的PWA冻结

时间:2019-03-29 08:27:28

标签: android push-notification service-worker progressive-web-apps web-push

PWA Web推送通知点击操作问题
如果您通过Chrome中的 A2HS 功能

安装了 PWA ,则会在Android手机上发生->

此处将发生什么:如果收到通知,并且用户点击了操作按钮 下面的事件触发,并尝试以给定的路线打开新客户端 或“重新连接”到现有客户端并导航到给定的路线

问题:如果您正常运行PWA然后将其发送,则此问题仅发生在已安装的PWA上 进入Android手机的后台。 现在,当推送通知到达并且用户单击操作按钮时,它就会发生, PWA打开,您会看到PWA的冻结屏幕。如果您通过上下滑动手动刷新 它会正确重新加载,甚至导航到给定的路线。

这仅在Android手机上发生。在Windows客户端上使用安装了PWA的最新版Chrome进行测试时 还没有这样的问题。


这是我在服务工作者中使用的代码的相关部分:


// Service Worker Event when a Native Web Push Notification is clicked
self.addEventListener('notificationclick', function(event) {
    if (!event.action) return;

    var eventData = event.notification.data;

    // Some paths for my Vue app, this event gets an extra payload of what type it is
    // and then opens the PWA with the matching route
    const views = {
        auftragsdaten: '/auftraege/eigene',
        materialanforderungen: '/warenwirtschaft/materialanforderungen',
        systemnachrichten: '/nachrichten',
    };
    var viewNav = '/';

    switch (event.action) {
        case 'detail-action':
            event.notification.close();

            // if there is an extra payload with the route to use, set it accordingly
            if (eventData.hasOwnProperty('extra') && Array.isArray(eventData.extra)) {
                let lastIndex = eventData.extra.length - 1;
                viewNav = views[eventData.extra[lastIndex]];
            }

            // check for open PWA/Browser clients
            event.waitUntil(
                clients.matchAll({ type: 'window', includeUncontrolled: true }).then(async function(clientList) {
                    if (clientList.length > 0) {
                        let client = clientList[0];

                        // check for any existing and focussed client
                        for (let i = 0; i < clientList.length; i++) {
                            if (clientList[i].focused) {
                                client = clientList[i];
                            }
                        }

                        // focus found client and then navigate to the given route
                        let clientFocus = await client.focus();
                        let clientNavigate = await clientFocus.navigate(viewNav);
                        return clientNavigate;
                    }

                    // if no existing client is found, open a new window OR if the PWA is installed the PWA
                    return clients.openWindow(viewNav);
                })
            );
            break;
        default:
            console.log(`Unknown action clicked: '${event.action}'`);
            break;
    }
});

老实说,我不知道会导致这种行为发生的原因。我的代码有问题还是我偶然发现了一个错误?
无论如何,我将感谢您对此问题的任何见解和帮助!

0 个答案:

没有答案