如何在KaiOS应用中实现推送通知

Question

我正在尝试在 KaiOS 应用程序中实现推送通知。我只是点击以下链接。

点击所有链接后，推送在浏览器中有效，但在 KaiOS 应用程序中无效。如果有人有任何示例代码或文档，请分享。

如有任何帮助，我们将不胜感激。

Answer 1

我遇到了同样的问题，但我遵循了这个简单的网络推送通知方法，

https://medium.com/@seladir/how-to-implement-web-push-notifications-in-your-node-react-app-9bed79b53f34

我也解决了这个问题，现在它可以正常工作了。请不要忘记将如下权限添加到 manifest.webapp 文件中。

"permissions": {
    "serviceworker": {
        "description": "Needed for assocating service worker"
    },
    "desktop-notification": {
        "description": "Needed for creating system notifications."
    },
    "notifications": {},
    "push": {
        "description": "Required for being updated with new goals in soccer matches"
    },
    "geolocation": {
        "description": "Marking out user location"
    },
    "alarms": {
        "description": "Scheduling alarms"
    }
},

以及请参阅此 kaios 文档以了解运行 kaios 设备上的应用程序。

https://developer.kaiostech.com/getting-started/build-your-first-hosted-app/pwa-to-hosted-app

Answer 2

1) 首先在manifest.webapp

中加入这个权限

    "permissions": {
          "serviceWorker":{
             "description": "required for handle push."
          },
          "push":{
             "description": "New update push."
          },
          "desktop-notification": {
             "description": "New content update notification for the user."
          }
       }

2) service worker 文件 sw.js 代码

self.addEventListener('push', function(event) {
    event.waitUntil(
        self.registration.showNotification('My Push', {
            body: 'Push Activated',
        })
    );
});

self.addEventListener('activate', e => {
    self.clients.claim();
});

3) 在应用启动时添加服务工作者

registerSW : function() {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js').then(function(reg) {
            console.log('Service Worker Registered!', reg);
            reg.pushManager.getSubscription().then(function(sub) {
                if (sub === null) {

                } else {
                    console.log('Subscription object: ', sub);
                }
            });
        }).catch(function(e) {
            console.log('SW reg failed');
        });
    }
}

4) 通过任何 dom 元素如按钮

调用 service worker

registerServiceWorker: function() {
    Notification.requestPermission().then(function(permission) {
        if (permission === 'granted') {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.ready.then(function(reg) {

                    reg.pushManager.subscribe({
                        userVisibleOnly: true
                    }).then(function(sub) {
                        console.log('Endpoint URL: ', sub.endpoint);

                    }).catch(function(e) {
                        if (Notification.permission === 'denied') {
                            console.warn('Permission for notifications was denied');
                        } else {
                            console.error('Unable to subscribe to push', e);
                        }
                    });
                })
            }
        }
    });
}

就是这样。

如何在KaiOS应用中实现推送通知

How to implement push notification in KaiOS app

kaios