如何通过点击推送通知启动PWA（渐进式Web应用程序）？

Posted 2021-05-05

Following this example，我看看PWA如何打开网址，但我如何使用推送通知启动应用程序本身？不在浏览器中，而是全屏版本的PWA。

答案

这是由浏览器控制的。此外，在决定打开一个窗口时，可能需要检查所需的目标URL是否已在另一个选项卡/窗口中打开，以便您可以根据具体情况对其进行聚焦或打开。检查这个book here for some code samples。

例如，在Chrome中，如果用户在其清单中使用“独立”将Web应用添加到其主屏幕，则当用户单击Web应用程序图标时，它将在没有URL栏的情况下打开。

当收到推送消息并且打开相同的Web应用程序时，如果用户“最近”从主屏幕图标（当前在过去10天内）打开了Web应用程序，则不会显示URL栏。如果用户在该时间段内未使用主页图标，则会打开通知单击并显示URL栏。

见for more info on this Chrome issue here：

特别：

必须将Web应用程序添加到主屏幕，能够以独立模式打开，并且在过去十天内已从主屏幕打开。如果不满足任何这些条件，通知将回退到现有行为。

值得注意的是，PWA vs Browser本身并不是正确的思考方式。您总是在浏览器中启动，只是在不同的模式下，例如“独立”与“浏览器”。

PWA（Progressive Web Apps）主要用于描述使用一组API来使用新的Web技术（即服务工作者，推送，Web应用程序清单等）获得良好的用户体验。

另一答案

摘自Jake Archibald的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("/");
      })
    );
});

另一答案

截至2018年10月：

我使用Chrome 69管理它。

在此示例中，它是一个子应用程序（www.example.com/application）。

简而言之：仔细检查路径！

每当我从推送通知启动应用程序时，我都遇到了未加载cookie（登录信息）的问题，它打开正常，但未登录。如果您关闭它并点击之前在主屏幕上添加的应用程序图标，该应用程序将启动已经登录。

我使用以下内容完成了它（见注释）：

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