ServiceWorkerRegistration.showNotification 在 PWA 中，将应用程序带到前台

Question

我在我的 PWA 中显示通知。它有效并显示通知。但我似乎无法找到如何在您单击通知时将应用程序置于前台（如果可能）？

用例：

当用户在 Facebook 上时，会向他显示一条通知。然后当用户点击通知时，我希望我的应用程序转到前台。

当我不是本机工作时这可能吗？

这是我的测试代码：

 navigator.serviceWorker.register('service-worker.js');
  Notification.requestPermission(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('Notification with ServiceWorker');
      });
    }
  });

Answer 1

您可以在 PWA 中打开 URL。它会在浏览器的新选项卡中打开它，即使您的 PWA 已经打开了一个选项卡。

    handleResponse( event ) {

    console.log( '[Service Worker] Notification click Received. ${event}' );

    if ( event.action && validURL( event.action ) ) {

        clients.openWindow( event.action );

    }

    event.notification.close();

}

Answer 2

所以我的问题是我缺乏知识！我没想到 onclick 处理程序应该放在 service-worker.

我在这里找到了很好的帮助：

https://developers.google.com/web/fundamentals/push-notifications

https://web-push-book.gauntface.com/demos/notification-examples/

ServiceWorkerRegistration.showNotification 在 PWA 中，将应用程序带到前台

ServiceWorkerRegistration.showNotification in PWA, bring app to foreground

notifications

service-worker

progressive-web-apps