Angular 6 - "Service workers are disabled or not supported" error

Question

I want to push notification subscription with web-push module and angular service worker. I've followed instructions from these links: Angular Push Notifications: a Complete Step-by-Step Guide and Push Notifications with Angular & Express yet the notification prompt was not showing up as it should. I've checked the swPush object and found out that it was not enabled, and I don't know why even I've followed angular/pwa installation instructions exactly as those links said. Hope someone here can help. Thanks a lot!

I run the application with my own Nodejs server, not with http-server module.

Here is my push subcription code:

readonly VAPID_PUBLIC_KEY =
'BIfDkegCvhzctX06rYvwQImhbfAymWYE3wtcog9E4Zj7LOgX6TQFS6fZSqLCt01zBZtc1-jSwpZrZEmTQ2i95V8'; // key generated with web-push

 constructor(
   private user: UserService,
   private httpClient: HttpClient,
   private router: Router,
   private auth: AuthService,
   private swPush: SwPush
 ) {
     this.swPush.requestSubscription({
       serverPublicKey: this.VAPID_PUBLIC_KEY
     })
     .then(subcription => {
       console.log('Send ' + subcription + ' to server');
     })
     .catch(console.error);
}

Error returned:

Error: Service workers are disabled or not supported by this browser at SwPush.push../node_modules/@angular/service-worker/fesm5/service-worker.js.SwPush.requestSubscription (service-worker.js:146) at new DashboardComponent (dashboard.component.ts:40) at createClass (core.js:9311) at createDirectiveInstance (core.js:9186) at createViewNodes (core.js:10406) at createRootView (core.js:10320) at callWithDebugContext (core.js:11351) at Object.debugCreateRootView [as createRootView] (core.js:10838) at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8666) at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3315)

Expected result:

Maybe your browser did not support web-push? Look at this question https://stackoverflow.com/questions/48045748/angular-service-worker-on-the-browsers-that-do-not-support-it — Nico, Sep 27 '18 at 18:36
I ran it on chrome. But I figured out that it is because I ran the app with `ng serve` and the service worker doesn't work with `ng serve`. I ran the app again using `http-server` and it worked fine. — Brother Eye, Sep 28 '18 at 03:10

Brother Eye · Accepted Answer · 2019-03-12T03:12:16.757

17

This error was caused due to the reason that service workers don't work with ng serve. Run with http-server then it works fine. As in Angular service workers said:

Because ng serve does not work with service workers, you must use a separate HTTP server to test your project locally. You can use any HTTP server

edited Mar 12 '19 at 03:12

answered Sep 28 '18 at 03:15

Brother Eye

689
1
11
27

3

.. except on localhost – Amr Eladawy Oct 18 '18 at 13:14
1

is it possible to disable the error on localhost with ng serve? – Florian Ludewig Apr 19 '19 at 14:47
i ran it with http-server but still get the error – Banny Jun 05 '21 at 22:02

user4649102 · Answer 2 · 2020-05-25T21:15:20.507

14

Just set the service worker to work in dev environment also in 'AppModule'

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production})

To

ServiceWorkerModule.register('ngsw-worker.js', { enabled: true})

edited May 25 '20 at 21:15

answered May 25 '20 at 21:03

user4649102

463
6
13

For those like me stumbling across this running `ng serve` (which is *not* actually the scope of the question, I know), see https://stackoverflow.com/questions/55905172/how-to-run-service-worker-locally-with-angular#answer-59785846 for a workaround. – lentschi Dec 27 '21 at 10:01

Angular 6 - "Service workers are disabled or not supported" error

2 Answers2

Linked

Related