I am trying to redirect to a particular url in progressive web app on notification click but it does not redirect.

Case 1: If the web app is not added to home screen then on notification click the browser window opens up and is redirected to the desired url.

Case 2: If the web app is added to home screen then the landing page is the home page and not the desired url.

self.addEventListener('notificationclick', function(event) {
        event.notification.close();
        event.waitUntil(
                clients.matchAll({
                        type: "window"
                }).then(function(clientList) {
                        console.log(clientList);
                        for (var i = 0; i < clientList.length; i++) {
                                var client = clientList[i];
                                if (client.url == '/' && 'focus' in client)
                                        return client.focus();
                        }
                        if (clients.openWindow) {
                                if (event.notification.tag == 'syncTest') {
                                        console.log(event);
                                        var url = '/#/view-car?start_time=' + getFinalData[0].start_time + '&end_time=' + getFinalData[0].end_time + '&pickup_venue=' + getFinalData[0].pickup_venue;
                                        return clients.openWindow(url);
                                } else {
                                        var url = '/#/list-venues?start_time=' + getFinalData[0].start_time + '&end_time=' + getFinalData[0].end_time + '&car=' + getFinalData[0].car + '&fuel=' + getFinalData[0].fuel;
                                        console.log(url);
                                        return clients.openWindow(url);
                                }
                         }
                })
        );
});

Thanks a tonnn in advance!!.

I am trying to redirect to a particular url in progressive web app on notification click but it does not redirect.

Case 1: If the web app is not added to home screen then on notification click the browser window opens up and is redirected to the desired url.

Case 2: If the web app is added to home screen then the landing page is the home page and not the desired url.

self.addEventListener('notificationclick', function(event) {
        event.notification.close();
        event.waitUntil(
                clients.matchAll({
                        type: "window"
                }).then(function(clientList) {
                        console.log(clientList);
                        for (var i = 0; i < clientList.length; i++) {
                                var client = clientList[i];
                                if (client.url == '/' && 'focus' in client)
                                        return client.focus();
                        }
                        if (clients.openWindow) {
                                if (event.notification.tag == 'syncTest') {
                                        console.log(event);
                                        var url = '/#/view-car?start_time=' + getFinalData[0].start_time + '&end_time=' + getFinalData[0].end_time + '&pickup_venue=' + getFinalData[0].pickup_venue;
                                        return clients.openWindow(url);
                                } else {
                                        var url = '/#/list-venues?start_time=' + getFinalData[0].start_time + '&end_time=' + getFinalData[0].end_time + '&car=' + getFinalData[0].car + '&fuel=' + getFinalData[0].fuel;
                                        console.log(url);
                                        return clients.openWindow(url);
                                }
                         }
                })
        );
});

Thanks a tonnn in advance!!.

• javascript
• angularjs
• service-worker
• progressive-web-apps

• I suggest to give a try with full URL, like 'http://localhost/#/view-car...' – Linh Pham Commented Jun 30, 2016 at 4:23

1 Answer 1

You can use something like:

if (client.url == 'yourUrl' && 'focus' in client)
     return client.focus();
else{
     client.navigate('yourUrl').then(function(c){
           return c.focus();
    });     
}

This worked for me. There can be other ways too.