gcm push notification: not showing actual message reopen the browser

Question

Gcm push notification message is sending properly to endpoints when browser is open :Notification messages which are in json file.

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"}]}

When browser is open, It's showing original message

Test Notification

If client browser is in offline(not opened) while my curl trigger. When reopening the client browser i suppose to get original message but what i'm getting is

site has been updated in the background

In my curl call, I have used 'time_to_live' = 2419200.

Answer 1

Whenever notification failed to load data to show on chrome notification window and 'PUSH' event generate successfully. It will show "site has been updated in the background". (Nothing to do with notification delivery from Curl. it may be fine)

Couple of observations from you service worker code:

1). You are using localhost path to fetch data, will create problem to load notification data while localhost will be offline.

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

2). You are using two 'PUSH' event code in your SW. can wrap work in one function.

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

You can refer below URL for creating simple service worker to get dynamic data for push notification.

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