Question

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

Answer 1

这是由浏览器控制的。此外，在决定打开一个窗口时，可能值得检查所需的目标网址是否已在另一个标签/窗口中打开，以便您可以对焦或打开它，取决于具体情况。请检查此book here for some code samples。

例如，在Chrome中，如果用户在其清单中将“网络应用”添加到其主屏幕时，只要用户点击了网络应用图标，它就会在没有网址栏的情况下打开。

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

请参阅for more info on this Chrome issue here：

<强>具体地：

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

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

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

Answer 2

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

Answer 3

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

Answer 4

找到了一个对我有用的解决方案，here。

只需将其添加到您的服务人员：

self.addEventListener('notificationclick', function(event) {
  console.log('On notification click: ', event.notification.tag);
  // Android doesn't close the notification when you click on it
  // See: http://crbug.com/463146
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients.matchAll({
      type: "window"
    })
    .then(function(clientList) {
      for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
          return client.focus();
      }
      if (clients.openWindow) {
        return clients.openWindow('/');
      }
    })
  );
});

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

4 个答案: