Capacitor: Push notifications in PWA

Created on 1 Mar 2019  路  7Comments  路  Source: ionic-team/capacitor

Folks thank you for capacitor.

Push notifications seem to be supported only in iOS and Android, but not Web, is there any reason for this? Web has notifications API

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Kindly enlighten.

web high pwa

Most helpful comment

@mlynch @jcesarmobile, any chance this issue and the PR I submitted be discussed soon?

All 7 comments

If I would have to take a guess it is currently missing because of the required service worker. I guess a lot of projects already have a service worker. Our projects for example use the ngsw-worker from @angular/pwa, however, other projects may use totally different service workers so capacitor cannot assume if there is one and if so which one it is.

Like stated on https://capacitor.ionicframework.com/docs/basics/progressive-web-app/ writing service workers from scratch is complex. And "forcing" projects to use a certain one or even a new capacitor maintained service worker wouldn't be very good imho.

However, since I also would like to see Push Notification support for PWAs my suggestion would be to write a "smallest possible" service worker "extension", which only implements everything required for Push Notifications. Such a mini service worker could be included in the actual service worker file simply with importScripts('./capacitor-push-notifications-sw.js');.
We have quite good experience with using just a 2 lines service worker "container" file which first imports the native Angular service worker and then our custom service worker. This method is agnostic to which "main" service worker is used and updates of the main service worker or its build process. But it would still require some manual setup (adding the importScripts and maybe registering they new "container" service worker). Still I think it could be worth it.

Agreed, we need to figure out a good solution for service workers (likely what Ionic does: a basic implementation using workbox) and then add push support. Marking this as high priority.

@mlynch Is there any branch currently that has development started on this task? I could probably help contribute to get this out sooner since I'm dealing with this now in an Ionic+Capacitor project.

@mlynch @jcesarmobile, any chance this issue and the PR I submitted be discussed soon?

Ionic team, please proceed as all tests passed and no conflicts.

@mlynch Since this is still open, I am moving ahead using Workbox separate from Capacitor. In case this gets implemented, I hope the migration process would be smooth for me. Thanks.

shouldn't this be as easy as using web-push package (and/or just SwPush) and VAPID / subscription management on the server side?
https://blog.angular-university.io/angular-push-notifications/

side note - full integration with Firebase (like the need to create firebase project and wire it into the PWA) sounds to me like an unnecessary overkill in many cases

Was this page helpful?
0 / 5 - 0 ratings