关闭PWA时如何从Click接收通知数据?

时间:2018-11-02 20:53:23

标签: notifications progressive-web-apps

我的桌面通知在我的渐进式Web应用程序(PWA)中运行良好。在PWA打开的情况下,当我单击通知时,便能够接收通知的data属性。当PWA关闭时,当我单击通知时,PWA打开了,但是我的onclick处理程序从未执行,也没有看到一种在启动Web应用程序时从通知中接收数据的方法。

当前未运行PWA时如何接收通知数据属性?

在PWA中出现2条通知时,我想知道关闭PWA时单击了哪个PWA。看着Notification API,我看不到检查网络应用程序启动的方法。

这是我的代码:

if ('Notification' in window) {
    const options = {
        icon: 'https://i.imgur.com/l8qOen5.png',
        image: 'https://i.imgur.com/l8qOen5.png',
        requireInteraction: true,
    };

    if (Notification.permission === 'granted') {
        const desktopNotification = new Notification('My Title', {
            ...options,
            body: 'My body text',
            data: 'A string I want to receive when PWA is opened',
            tag: 'A unique identifier',
        });

        desktopNotification.onclick = (e) => {
            // Not received when PWA is closed and then opened on click of notification
            const data = e.currentTarget.data || {};
            console.log('desktopNotification clicked!', e, data);
        };
    }
}

谢谢你

1 个答案:

答案 0 :(得分:1)

首先,即使PWA应用程序已关闭,也必须运行Service Worker。如果您不熟悉Service Worker API,请在这里Introduction to Push Notifications看看一个好例子 从技术上讲并回答您的问题,您需要订阅notificationclick内的Service Worker事件(也可以使用其他几个事件,例如notificationclose

这是一个简短的示例,您需要在serviceworker.js内添加以下内容:

self.addEventListener('notificationclick', function(e) {
  var notification = e.notification;
  var primaryKey = notification.data.primaryKey;
  var action = e.action;

  if (action === 'close') {
    notification.close();
  } else {
    clients.openWindow('http://www.example.com');
    notification.close();
  }
});