Documentation

  1. Home
  2. Documentation
Need Help?

Visit the support center for answers to common questions and for ways to get in touch.

Got Feedback?

We'd love to hear what you have to say about our documentation. Let us know how we can improve it.

Angular Setup

Send push notifications to your Angular web app with Pushy.

Note: At any time, you may refer to our Angular.js demo project for a working demo. Also, please make sure to follow our Ionic guide instead, if you're developing with Ionic.

Create an App
Sign up for Pushy Trial to get started, or log in to your existing account

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

Create an app and fill in the Web Push Hostname:

Note: If you have already created an app in the Pushy Dashboard for another platform, simply configure your existing dashboard 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

Install version 1.0.10 of the Pushy Web SDK from npm using the following command: 

npm install pushy-sdk-web babel-polyfill --save

Note: The Pushy Web SDK currently depends on babel-polyfill for ES6 generator support.

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.10/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:

import 'babel-polyfill';
import Pushy from 'pushy-sdk-web';

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
        alert('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) {
        // Notify user of failure
        alert('Registration failed: ' + err.message);
    });
}

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:

Subscribe to Topics