How can I initiate a PWA (progressive webapp) open from a click on a push notification?
Solution 1
This is controlled by the browser. In addition when deciding to open a window it might be worth checking if the desired target URL is already open in a different tab/window so you can focus or open it, depending on the situation. Check this book here for some code samples.
For example in Chrome, if a user adds a web app to their homescreen with "standalone" in their manifest when ever the user clicks the web apps icon it will open without the URL bar.
When a push message is received and that same web app is opened, the URL bar will not be displayed if the user has "recently" opened the web app from the homescreen icon (Currently in the last 10 days). If the user hasn't used the home icon within that time period, a notification click will open with the URL bar displayed.
See for more info on this Chrome issue here:
Specifically:
The web app must be added to home screen, capable of opening in standalone mode, and have been opened from the home screen within the last ten days. If any of these conditions are not met, the notification will fall back to the existing behaviour.
It's also worth noting that PWA vs Browser itself isn't the right way of thinking of this. You are always launching in the Browser, just in different modes, "standalone" vs "browser" for example.
PWA (Progressive Web Apps) is largely a term to describe a use of a set of API's to make a good user experience with new web technologies (i.e. service workers, push, web app manifest etc).
Solution 2
Taken from Jake Archibald's emojoy demo:
self.addEventListener('notificationclick', event => {
const rootUrl = new URL('/', location).href;
event.notification.close();
// Enumerate windows, and call window.focus(), or open a new one.
event.waitUntil(
clients.matchAll().then(matchedClients => {
for (let client of matchedClients) {
if (client.url === rootUrl) {
return client.focus();
}
}
return clients.openWindow("/");
})
);
});
Solution 3
As of Oct/2018:
I managed it to work using Chrome 69.
In this example, it's a sub-application (www.example.com/application).
In short: double check the paths!
And also I had issues with not loaded cookies (login info) whenever I launched the app from a Push Notification, it opened fine, but not logged in. If you close it and tap the app icon previously added on homescreen, the app is launched already logged in.
I accomplished it using the following (see comments):
1) serviceworker.js
self.addEventListener('notificationclick', function (event)
{
//For root applications: just change "'./'" to "'/'"
//Very important having the last forward slash on "new URL('./', location)..."
const rootUrl = new URL('./', location).href;
event.notification.close();
event.waitUntil(
clients.matchAll().then(matchedClients =>
{
for (let client of matchedClients)
{
if (client.url.indexOf(rootUrl) >= 0)
{
return client.focus();
}
}
return clients.openWindow(rootUrl).then(function (client) { client.focus(); });
})
);
});
2) manifest.json
{
"short_name": "AppNickName",
"name": "ApplicationName",
"icons": [
{
"src": "./icon.png",
"sizes": "36x36",
"type": "image/png",
"density": 0.75
}
],
"start_url": "./", //This matters
"display": "standalone", //This also matters
"gcm_sender_id": "103953800507", //FCM always uses this number (April 2019)
"background_color": "#c8c8c8",
"theme_color": "#c8c8c8",
"orientation": "any"
}
Solution 4
Found a solution that worked for me right here.
Just add this to your service worker:
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(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) {
return clients.openWindow('/');
}
})
);
});
jasan
Updated on June 03, 2022Comments
-
jasan about 2 years
Following this example, I see how PWA can open urls but how can I use push notification to launch the app itself? Not in the browser but the full screen version PWA.
-
jasan almost 8 yearsthanks, i just tried the app. I receive two notifications for any new message , one containing the messgage the other stating the site has been updated in the background.
-
Kevin Farrugia almost 8 yearsI receive a single notification "New chat received" and clicking on it will open the PWA which I had previously installed when adding to homescreen. Note that if you have the chrome tab open, it will focus the tab. -
Matt Gaunt almost 8 yearsWhen you receive the "site has been updated in the background" that means there is a bug in the "push" event code, i.e. they didn't show a notification before the promise passed to event.waitUntil resolved.
-
jasan almost 8 yearsI have successfully added app to home screen and launched the app from home screen , yet the push notification click always opens in browser mode. any thoughts or suggestions?
-
Matt Gaunt almost 8 yearsOnly thing I can think of is checking the chrome version and I assume you have set standalone in your web app manifest?
-
Ahmad about 5 yearshi , why it is opening the link in new window. is it possible to open in same existing app open on desktop because when we click on notification it open another desktop app and display link
-
Joy Chopra almost 4 yearsHi, can you elaborate on what role the start_url plays when you say that it matters?
-
jdmayfield almost 3 yearsThe link to code examples is 404. -
Matt Gaunt almost 3 yearsSorry, I've updated the link: web-push-book.gauntface.com/common-notification-patterns
