Angular Setup


Send push notifications to your Angular web app with Pushy.

Note: Please follow our Ionic guide if you're using Ionic.

Create an App

Note: No credit card needed. Upgrade to the Pro plan when you're ready by setting up Billing.


Note: If you have already created an app in the Pushy Dashboard for another platform, simply configure your existing app with your Web Push Hostname in the App Settings tab and proceed to the next step.

If you're targeting other platforms, please fill in their respective app identifier fields.


Click Create and proceed to the next step.

Enable PWA Support

If you haven't already, enable PWA support for your app by running the following:

ng add @angular/pwa
Get the SDK

Include the latest version of our Web Push SDK by creating a file in the following path:

src/js/pushy-sdk.js

Copy and paste the contents of pushy-sdk.js into this file.


Next, edit angular.json and add src/js/pushy-sdk.js to the list of imported scripts for your project, under projects.*.architect.build.options.scripts:

"scripts": ["src/js/pushy-sdk.js"]
Create Service Worker

Create a file src/service-worker.js with the following contents:

// Pushy Service Worker
importScripts('https://sdk.pushy.me/web/1.0.5/pushy-service-worker.js');

// Angular PWA Service Worker
importScripts('./ngsw-worker.js');

Again, edit angular.json and add src/service-worker.js to the list of imported assets for your project, under projects.*.architect.build.options.assets:

"assets": ["src/service-worker.js"]

Modify src/app/app.module.ts, replacing ngsw-worker.js with service-worker.js in the following line:

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

After modification, the line should read:

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

Users need to be uniquely identified to receive push notifications.

Every user is assigned a unique device token that you can use to push it at any given time. Once the user has been assigned a device token, it should be stored in your application's backend database.


Add the following declaration to the top of the desired component file, such as src/app/app.component.ts, right after the import statements:

declare var Pushy:any;

Add the following code inside the Component class, possibly in ngOnInit(), to register the visitor's browser for push notifications:

ngOnInit() {
    // Register visitor to receive push notifications
    Pushy.register({ appId: 'your-app-id' }).then(function (deviceToken) {
        // Print device token to console
        console.log('Pushy device token: ' + deviceToken);

        // Send the token to your backend server via an HTTP GET request
        // fetch('https://your.api.hostname/register/device?token=' + deviceToken);

        // Succeeded, optionally do something to alert the user
    }).catch(function (err) {
        // Handle registration errors
        console.error(err);
    });
}

Please make sure to populate the appId variable with your Pushy App ID (Pushy Dashboard -> Click your app -> App Settings -> App ID).


Note: Registration will fail if the user declines the Web Push permission dialog, in which case notification preferences for your hostname must be cleared in the browser settings for the dialog to be displayed again:

  • Firefox: Enter about:preferences#content in the address bar
  • Chrome: Enter chrome://settings/content/notifications in the address bar

Build Your App for Prod

At this time, it is not possible to test service worker functionality for your Angular app in ng serve development mode due to Angular platform restrictions. Please build your app for prod and test integration by running:

ng build --prod && npx http-server dist/*/ -o

After clicking Allow in the notification permission dialog, check the DevTools console for the following log indicating successful integration:

Pushy device token: d5c5020f8174f00c59928d
Back to Web Push Docs

Continue following the integration instructions in our Web Push docs: