kaios

How to implement push notification in KaiOS app


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.


Solution

  • 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.