How to implement push notification in KaiOS app

Question

I am trying to implement push notification in KaiOS app. I simply follow below links.

• W3C Push API
• Push API introduction
• Service Worker Cookbook - Web Push Payload

After follow all links the push is working in browser but not in KaiOS app. If anybody have any sample code or documents please share.

Any help will be appriciated.

Answer 1

1) First, add this permission in 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 file sw.js code

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

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

3) Add service worker on app start

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) Call service worker by any dom element like button

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);
                        }
                    });
                })
            }
        }
    });
}

That's it.

Answer 2

I had same problem as this, but I followed this simple web push notification method,

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

as well as I fixed that issue and now It work properly. please don't forget to add permissions like below into the manifest.webapp file.

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

and as well as please refer this kaios documention for run the applicaion on kaios device.

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