Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To add browser push notifications to an Angular app, you enable Angular’s service worker, serve the app over HTTPS, ask the user for permission through SwPush, send the resulting subscription to your own server, and have that server push messages to the browser. Angular handles the browser side. It does not send push messages itself, so the server component is always your responsibility.
This guide covers that full path, shows where each step lives in the code, and explains when Firebase Cloud Messaging is the better fit instead.
What Angular provides and what it leaves to you
Angular’s service worker can display push notifications and handle notification click events. In an application that uses the worker, SwPush from @angular/service-worker is the documented API for requesting a subscription and for listening to incoming messages and notification interactions. The Angular push notifications guide describes the payload and click-handling model, and the SwPush API reference lists its members and rejection conditions.
Three responsibilities are split across the stack:
- Browser and Angular client: enable the service worker, request permission, create the
PushSubscription, and respond to clicks. - Your application server: store each subscription, hold the VAPID private key, and send a push message to each subscription endpoint.
- Browser push service: delivers the message to the device, even when the tab is closed, as long as the service worker is registered.
Requirements before you start
- An Angular CLI project. The Angular getting-started guide on service workers covers the setup, and it recommends current Angular and Angular CLI versions. The sources used for this article do not name a specific Angular release, so check the guide against the version your project uses.
- An HTTPS origin for deployment. Angular service workers require HTTPS, and
localhostis the development exception. The service workers overview states both points. - A VAPID key pair. The public key goes into the client, and the private key stays on your server.
- A server endpoint that accepts and stores subscription objects, and a sender that can deliver messages to them.
Step-by-step implementation
-
Add service-worker support. Run the following in the project root:
#1 Best Overall
ng add @angular/pwaThis adds the service-worker package and configures build support and registration. Confirm that the generated
ngsw-config.jsonand the service-worker registration appear in the project before continuing. The getting-started guide documents the setup. -
Deploy over HTTPS and check support at runtime. Deploy the build to an HTTPS host. Before you rely on any push behavior, check
SwPush.isEnabled. Angular recommends that the application keep working when service workers are unsupported, so show the normal UI and hide the notification controls when the value isfalse. -
Request a subscription from a user action. Call
requestSubscription()from a button click, not on page load, and pass your public VAPID key. The method prompts for permission and returns a browserPushSubscription. A minimal client sketch looks like this:Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.import { Component, inject } from '@angular/core'; import { SwPush } from '@angular/service-worker'; const VAPID_PUBLIC_KEY = 'YOUR_PUBLIC_VAPID_KEY'; export class NotificationsComponent { private swPush = inject(SwPush); subscribe() { if (!this.swPush.isEnabled) { return; } this.swPush.requestSubscription({ serverPublicKey: VAPID_PUBLIC_KEY }) .then(sub => this.sendToServer(sub)) .catch(err => console.error('Push subscription failed', err)); } sendToServer(sub: PushSubscription) { // POST the subscription JSON to your server for storage. } }Handle the promise rejection. The user can deny permission, and the call also fails when the browser does not support the Push API. Angular’s example stops at sending the subscription to the server; the backend that stores it and sends messages is outside the Angular API.
-
Store the subscription on your server. Save the subscription JSON, which includes the endpoint and the keys, and associate it with the signed-in user. Remove a subscription when a send attempt reports that it is no longer valid.
-
Send a payload with a notification object. Your server sends a message whose body contains a
notificationobject. Angular documentstitleas the only required property:{ "notification": { "title": "Order shipped", "body": "Your order is on its way.", "data": { "onActionClick": { "default": { "operation": "focusLastFocusedOrOpen", "url": "/orders" } } } } }The
data.onActionClickblock controls what happens when the user clicks the notification. Check the operation names against the push notifications guide for your Angular version before you rely on them.Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Listen for incoming messages and interactions. Subscribe to the
SwPushobservables where your application needs them, for example to show an in-app banner when a message arrives while the page is open, or to log clicks and closes for analytics.
Handling notification clicks
Click behavior comes from the payload, so you can change it per message without a client release. Angular supports opening or focusing a page, navigating an existing window, and sending a simple GET request. Set the url deliberately. Action URLs are resolved relative to the service-worker registration scope when that applies, so a relative path such as /orders behaves differently from an absolute URL on another origin. Test each operation in a browser that is running your deployed HTTPS build, not only on a development server.
Firebase Cloud Messaging as an alternative
Firebase Cloud Messaging (FCM) is a separate web integration. It uses Firebase’s own web SDK, its own permission flow, and Firebase delivery services, rather than Angular’s SwPush API. The Firebase web get-started guide documents the setup, and Firebase states that its web SDK is supported on pages served over HTTPS.
| Decision axis | Angular SwPush |
Firebase Cloud Messaging (web) |
|---|---|---|
| Client integration | Angular service-worker API and SwPush observables (SwPush API) |
Firebase Messaging JavaScript API and Firebase app setup (FCM web guide) |
| Service worker | Angular’s service worker, registered by the Angular PWA setup | A firebase-messaging-sw.js file, unless an existing worker is configured for the integration |
| Subscription and targeting | Browser PushSubscription; your server stores and targets it |
Firebase installation identifiers designate recipients |
| Sender | Your own server | Firebase delivery services |
| Operational constraint | HTTPS except localhost; service-worker support required | HTTPS required for the web SDK and service workers |
Do not assume the two workers can be combined without deliberate configuration. If your application already runs Angular’s service worker, decide first which one owns push events before you add the Firebase messaging worker, and test that a notification clicked while the app is closed still reaches the correct handler.
Limits of Angular’s built-in service worker
The service workers overview describes the built-in worker as a basic caching utility with a limited feature set. The documentation states: “The Angular Service Worker is a basic caching utility for simple offline support with a limited featureset,” and adds: “We will not be accepting any new features other than security fixes.” Use the push features it documents, and if your project needs capabilities beyond them, evaluate browser APIs directly or a separate integration such as FCM.
Troubleshooting common failures
- The permission prompt never appears. Confirm that the call runs from a user gesture and that
SwPush.isEnabledistrue. Check that the site is served over HTTPS, not from a plain-HTTP staging host. - The user denied permission.
requestSubscription()rejects. Show a short explanation and a way to retry from browser settings. Do not repeatedly prompt. - No service worker is registered. Verify the production build and the registration output after
ng add @angular/pwa. Service workers are not active on development servers unless you are onlocalhost. - The notification appears, but clicking does nothing. Check that the payload includes
onActionClickwith a valid operation and URL, and that the URL is in the scope your service worker controls. - Sends start failing for some users. The stored subscription may have expired or been revoked. Remove invalid subscriptions from your server rather than retrying indefinitely.
Choosing an approach
Choose Angular’s SwPush when your application already uses Angular’s service worker and you want to own the sender and subscription storage. Choose Firebase Cloud Messaging when your team already uses Firebase services and wants Firebase to handle delivery and targeting. The sources used for this article document both setup paths but do not include a benchmark, a cost comparison, or evidence that one is universally better.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
