How can I initiate a PWA (progressive webapp) open from a click on a push notification?

Question

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.

Answer 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).

Answer 2

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

Answer 3

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("/");
      })
    );
});

Answer 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('/');
      }
    })
  );
});

Answer 5

Updated version to do this can be found here: https://web.dev/push-notifications-common-notification-patterns/

' When it's possible, we should focus a window rather than open a new window every time the user clicks a notification.

Before we look at how to achieve this, it's worth highlighting that this is only possible for pages on your origin. This is because we can only see what pages are open that belong to our site. This prevents developers from being able to see all the sites their users are viewing.

Taking the previous example, we'll alter the code to see if /demos/notification-examples/example-page.html is already open.'

  const urlToOpen = new URL(examplePage, self.location.origin).href;

  const promiseChain = clients
  .matchAll({
    type: 'window',
    includeUncontrolled: true,
  })
  .then((windowClients) => {
    let matchingClient = null;

    for (let i = 0; i < windowClients.length; i++) {
      const windowClient = windowClients[i];
      if (windowClient.url === urlToOpen) {
        matchingClient = windowClient;
        break;
      }
    }

    if (matchingClient) {
      return matchingClient.focus();
    } else {
      return clients.openWindow(urlToOpen);
    }
  });

event.waitUntil(promiseChain);