Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Local Notification with Angular Service Worker

I'm building a PWA using the latest version of Angular.

I'm making use of the Angular Mobile Toolkit and I want to send Local Notifications using angular/service-worker. But I can't make it work.

I'm able to subscribe and send notification from a server, but I would like to send a notification from my app itself. I tried using angular2-notifications, it works well on a desktop, but the constructor

new Notification(title, options) 

from the Notification API doesn't work anymore on Android, so it doesn't suit me.

Is there any way to use angular/service-worker to send local notifications on Android (Chrome)? Or maybe another alternative.

EDIT

Maciej answer pointed me to the right direction, I was able to make it work using the following piece of code

navigator.serviceWorker.getRegistration() 
         .then((reg) => { 
                reg.showNotification(title, noti); 
           });

P.S.: Be aware that I used this together with angular/service-worker. I used angular/service-worker to register the service-worker and the code above uses the registered service-worker. Also, be aware that for the service-worker to work you need a secure connection.

like image 925
Pedro Bernardo Avatar asked Feb 05 '26 03:02

Pedro Bernardo


1 Answers

Chrome on Android is not compatible with the Notification API from HTML5, so you won't be able to send local notifications.

As far as I can see in the @angular/service-worker source code, for displaying notifications, they are using following method:

this.worker.showNotification(desc['title'], options);

this.worker is an object of type VersionWorker.

So probably there is some way to reuse this.worker for your use.

Full code of Push plugin written by Angular team, can be found here: https://github.com/angular/mobile-toolkit/blob/master/service-worker/worker/src/plugins/push/index.ts

Example repo for service-worker plugin can be found here: https://github.com/maciejtreder/ng-http-sw-proxy (catalog plugin).

like image 126
Maciej Treder Avatar answered Feb 06 '26 18:02

Maciej Treder



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!