0

当浏览器打开时,Gcm 推送通知消息正在正确发送到端点:json 文件中的通知消息。

serviceWorker.js

    'use strict';
self.addEventListener('install', function(event) {
    self.skipWaiting();
    console.log('Installed', event);
});

    self.addEventListener('activate', function(event) {

    console.log('Activated', event);
});
self.addEventListener('push', function(event) {
    console.log('Started', self);
    self.addEventListener('install', function(event) {
        self.skipWaiting();
    });

    self.addEventListener('activate', function(event) {
        console.log('Activated', event);
    });

    self.addEventListener('push', function(event) {
        var url = "http://localhost/pntest/gmpush1.json?param="+Math.random();
        event.waitUntil(
            fetch(url).then(function(response) {
                if (response.status !== 200) {
                    console.log('Problem. Status Code: ' + response.status);
                    throw new Error();
                }
                // Examine the text in the response
                return response.json().then(function(data) {

                    if (data.error || !data.notification) {
                        console.error('The API returned an error.', data.error);
                        throw new Error();
                    }

                    var promises = [];
                            for(var i=0; data.notification && i < data.notification.length; i++) {
                                promises.push(self.registration.showNotification(data.notification[i].title, {
                                    body: data.notification[i].body,
                                    'renotify': true,
                                    icon: data.notification[i].icon
                                    //tag: notification.tag
                                }));
                            }
                            return Promise.all( promises );
                });
            })
        );
    });

    self.addEventListener('notificationclick', function(event) {
        console.log('Notification click: tag ', event.notification.tag);
        event.notification.close();
        var newurl = event.notification.data.newurl;
        console.log(newurl.updatedurl);
        var url = newurl.updatedurl;
        event.waitUntil(
            clients.matchAll({
                type: 'window'
            })
            .then(function(windowClients) {
                console.log(url);
                for (var i = 0; i < windowClients.length; i++) {
                    var client = windowClients[i];
                    if (client.url === url && 'focus' in client) {
                        return client.focus();
                    }
                }
                if (clients.openWindow) {
                    return clients.openWindow(url);
                }
            })
        );

    });
});    

gcmpush1.json

{"notification": [{"body": "Test data", "url": "https://www.google.com/", "icon": "http://www.wired.com/wp-content/uploads/2015/09/google-logo-1200x630.jpg", "title": "Test Notification"}]}

打开浏览器时,显示原始消息

测试通知

如果客户端浏览器在我的 curl 触发时处于脱机状态(未打开)。重新打开客户端浏览器时,我想得到原始消息,但我得到的是

网站已在后台更新

在我的 curl 通话中,我使用了 'time_to_live' = 2419200。

4

1 回答 1

1

每当通知无法加载数据以显示在 chrome 通知窗口上并且“PUSH”事件成功生成时。它将显示“网站已在后台更新”。(与 Curl 的通知传递无关。可能没问题)

来自您的服务人员代码的一些观察:

1)。您正在使用 localhost 路径来获取数据,在 localhost 将离线时加载通知数据会产生问题。

 var url = "http://localhost/pntest/gmpush1.json?param="+Math.random();

2)。您在 SW 中使用了两个“PUSH”事件代码。可以将工作包装在一个功能中。

self.addEventListener('push', function(event) {...

您可以参考下面的 URL 来创建简单的 service worker 来获取推送通知的动态数据。

https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en

于 2016-08-09T07:32:57.570 回答