How to implement push notification in KaiOS app

Question

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

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.

@Rohit I am also stuck in the same situation from. several days, if you can share your code or method you implemented it will be very helpful to us — Dulanga, Apr 16 '20 at 13:57

score 4 · Accepted Answer · edited Apr 25 '20 at 10:20

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.

score 1 · Answer 2 · edited Apr 23 '20 at 07:28

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

From Review: Hi, while links are great way of sharing knowledge, they won't really answer the question if they get broken in the future. Add to your answer the essential content of the link which answers the question. In case the content is too complex or too big to fit here, describe the general idea of the proposed solution. Remember to always keep a link reference to the original solution's website. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) — sɐunıɔןɐqɐp, Apr 23 '20 at 06:43

How to implement push notification in KaiOS app

2 Answers2