如何通過點擊推送通知來啓動PWA（漸進式Web應用程序）？

Question

Following this example，我看到PWA如何打開網址，但我該如何使用推送通知，啓動應用程序本身？不是在瀏覽器中，而是全屏版本的PWA。

Answer 1

這是在Chrome瀏覽器怪癖。

如果用戶添加一個web應用程序的主屏幕與當過用戶點擊web應用程序的圖標將沒有地址欄打開他們的表現「獨立」。

當收到推送信息並且打開了相同的網絡應用程序時，如果用戶從主屏幕圖標（最近10天）「最近」打開了Web應用程序，則不會顯示URL欄。如果用戶在該時間段內沒有使用主圖標，則會打開通知點擊，並顯示URL欄。

更多信息，請參閱在Chrome這個問題：https://bugs.chromium.org/p/chromium/issues/detail?id=541711

具體做法是：

的Web應用程序必須添加到主屏幕，能夠在 獨立模式下開啓，並從已被打開主屏幕在 的最後十天內。如果沒有滿足這些條件中的任何一個，則 通知將回退到現有行爲。

值得注意的是，PWA vs Browser本身並不是正確的思維方式。您總是在瀏覽器中啓動，只是以不同的模式，例如「獨立」與「瀏覽器」。

PWA（Progressive Web Apps）在很大程度上是一個術語，用於描述使用一組API來爲新的Web技術（即服務工作者，推送，Web應用程序清單等）提供良好的用戶體驗。

Answer 2

從傑克阿奇博爾德的emojoy演示摘自：

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