Wie kann ich eine PWA (progressive Webanwendung) öffnen, die durch einen Klick auf eine Push-Benachrichtigung geöffnet wird?

Question

Following this example, sehe ich, wie PWA URLs öffnen kann, aber wie kann ich Push-Benachrichtigungen verwenden, um die App selbst zu starten? Nicht im Browser, sondern die Vollbildversion PWA.

Answer 1

Dies ist eine Marotte in Chrome.

Wenn ein Benutzer eine Web-App zu seinem Startbildschirm mit "Standalone" in seinem Manifest hinzufügt, wenn der Benutzer auf das Web Apps-Symbol klickt, wird es ohne die URL-Leiste geöffnet.

Wenn eine Push-Nachricht empfangen wird und die gleiche Web-App geöffnet wird, wird die URL-Leiste nicht angezeigt, wenn der Benutzer die Web-App über das Startbildschirm-Symbol (aktuell in den letzten 10 Tagen) geöffnet hat. Wenn der Benutzer das Home-Symbol innerhalb dieses Zeitraums nicht verwendet hat, wird ein Benachrichtigungsklick mit der angezeigten URL-Leiste geöffnet.

Sehen Sie dieses Problem auf Chrome für weitere Informationen: https://bugs.chromium.org/p/chromium/issues/detail?id=541711

Im Einzelnen:

Der Web-App auf dem Startbildschirm hinzugefügt werden muß, in der Lage zu öffnen in Standalone-Modus und ist von der geöffnet Startbildschirm innerhalb der letzten zehn Tage. Wenn eine dieser Bedingungen nicht erfüllt ist, wird die Benachrichtigung auf das vorhandene Verhalten zurückgesetzt.

Es ist auch erwähnenswert, dass PWA vs Browser selbst nicht die richtige Art ist, darüber nachzudenken. Sie starten immer im Browser, nur in verschiedenen Modi, zum Beispiel "Standalone" vs "Browser".

PWA (Progressive Web Apps) ist in erster Linie ein Begriff für die Verwendung einer Reihe von APIs, um eine gute Benutzererfahrung mit neuen Webtechnologien (d. H. Service-Mitarbeiter, Push-, Web-App-Manifest usw.) zu machen.

Answer 2

von Jake Archibalds emojoy Demo Genommen:

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