How can I initiate a PWA (progressive webapp) open

问题:

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.

回答1:

This is a quirk 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 this issue on Chrome for more info: https://bugs.chromium.org/p/chromium/issues/detail?id=541711

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

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

回答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

:: 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": "000000000000",
    "background_color": "#c8c8c8",
    "theme_color": "#c8c8c8",
    "orientation": "any"
}