Angular PWA swPush.requestSubscription() not working, Error:Service workers are disabled or not supported by this browser

Question

I have an Ionic 5 PWA using Angular 8. I had done Push Notifications using swPush which was working as expected till March. But, from last month, due to some other changes, this stopped working. I am not able to isolate the issue.

swPush.isEnabled() is returning false, even though service worker is registered. Nothing has changed in the code with respect to swPush and its implementations. I tried this unanswered link and did not help as well

When I use PUSH NOTIFICATION API (using PushManager), there are NO errors and everything is working and I am getting subscription object back. Is this a problem with swPush implementation, or my mistake?

notification-service.ts

this.swPush.requestSubscription({
    serverPublicKey: this.VAPIDPublicKey
  })
  .then((sub: PushSubscription) => {
    const keys: SubscriptionObjectKeys = {
      auth: sub.toJSON().keys.auth,
      p256dh: sub.toJSON().keys.p256dh
    };
    const subscriptionObject: SubscriptionObject = {
      endpoint: sub.endpoint,
      expirationTime: 0,
      keys: keys
    };
    resolve(subscriptionObject);
  })
  .catch(err => {
    console.error('Could not subscribe to notifications', err);
    reject(err);
  });

Error in Chrome

Error: Service workers are disabled or not supported by this browser
at e.requestSubscription (service-worker.js:391)
at notification.service.ts:123
at new D (zone-evergreen.js:960)
at t.<anonymous> (notification.service.ts:103)
at Generator.next (<anonymous>)
at tslib.es6.js:73
at new D (zone-evergreen.js:960)
at o (tslib.es6.js:69)
at t.subscribeToSWPush (common-es2015.ffedc7b115b497dcd514.js:1)
at t.<anonymous> (notification.service.ts:61)

I have checked this in macOS and Windows 10 as well, with HTTP Server and SSL. Both shows same problem.

I created a new Ionic app and implemented the same code, which is working fine there. I am not able to isolate the issue.

Any suggestion would be really helpful.

Are you testing with `ng serve`? Service workers doesn't work with `ng serve`. You need to serve using `http-server`. — ruth, May 26 '20 at 09:57
@MichaelD It's not that "service workers _don't_ work with `ng serve`" - it's that your site needs to not be served on `localhost` and that it's served over HTTPS. — Edric, May 26 '20 at 11:20
@Edric: Thanks for the info. In that case, the Angular doc [here](https://angular.io/guide/service-worker-getting-started#serving-with-http-server) should be amended. It states *Because `ng serve` does not work with service workers, you must use a separate HTTP server to test your project locally.* — ruth, May 26 '20 at 11:23
Ahh - I'm not quite sure as to how service workers work exactly in this instance. https://stackoverflow.com/questions/55905172/how-to-run-service-worker-locally-with-angular It seems that service workers _are_ allowed on localhost: https://www.chromium.org/blink/serviceworker/service-worker-faq — Edric, May 26 '20 at 14:58

Manuel Hernandez · Answer 1 · 2021-03-29T18:31:47.023

I am also getting the swPush.requestSubscription Error: Service workers are disabled or not supported by this browser.... Also, swPush.isEnabled is returning false.

I am not using ng serve as I know the service worker won't run there. My Angular PWA is running on a staging server using IIS 10, a domain-name and SSL (using https). Checking chrome debugging (Application > Service Workers) the ngsw-worker.js is #687 activated and is running. My PWA is running perfectly fine (like a desktop app on my windows 10 box), except the swPush issue.

I am using Angular 11.2.7. Have you guys resolved this issue?

Angular PWA swPush.requestSubscription() not working, Error:Service workers are disabled or not supported by this browser

1 Answers1