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:
This is the runtime configuration file, that the Angular Service worker will use. This file is built based on the ngsw-config. json file, and contains all the information needed by the Angular Service Worker to know at runtime about which files it needs to cache, and when.
At its simplest, a service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them.
Service workers are specialized JavaScript assets that act as proxies between web browsers and web servers. They aim to improve reliability by providing offline access, as well as boost page performance.
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})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With