如何通过点击推送通知启动PWA(渐进式Web应用程序)?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何通过点击推送通知启动PWA(渐进式Web应用程序)?相关的知识,希望对你有一定的参考价值。

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

以上是关于如何通过点击推送通知启动PWA(渐进式Web应用程序)?的主要内容,如果未能解决你的问题,请参考以下文章

通过硬编码开发推送服务

用于Progressive Web Apps的2个按钮的Android推送通知?

iOS上推送通知渐进式网络应用程序

如何通过 JavaScript 显示“PWA Web 应用程序图标”的计数?

为没有 Cordova 插件的 Android PWA 发送本地推送通知

Web 推送通知是不是可以在 Apache Cordova Android 应用程序中使用?