Push Notifications with Angular & Express

Adding the service worker module

A service worker is a small JavaScript snippet that is registered at the browser when the page loads. Afterward, that snippet is alive all the time. That way our users can get our notifications, even if they are not on the site anymore.

Although the service worker we are going to use is the official one, it is not shipped with angular by default. To add the service worker to project, we can use the new angular schematics, introduced with the angular-cli v6.

Important: As of today, there is a bug with the module we are going to install and the angular-cli. To make things work, we have to downgrade to a previous version of the cli. Use this command to do so:

 yarn add @angular/cli@6.0.8 --dev

To add the module, just use this command:

 ng add @angular/pwa@0.6.8 --project angular-push-notifications

The specified project has to match the project in your angular.json file.

Before we begin, we also need to install some sort of webserver to serve our angular project. This is because the service worker is only generated when building for production.

 yarn global add http-server

Generating a VAPID key-pair

To generate the key-pair we are going to use a tool called web-push that we can download with our package manager.

To install the tool, use:

 yarn global add web-push

Afterward, you can generate a key-pair by using this command:

 web-push generate-vapid-keys --json

Keep the output in mind, we will need it later.

Checking availability

Service workers are a relatively new feature.

Therefore we should check if they are available and running before we try to use them. To do that, the SwPush service provides a flag “isEnabled” that we can simply check for.

 if (swPush.isEnabled) {
}

Requesting a subscription

Now that we know that we can use the service worker, let’s ask it to request a subscription.

Again, this is quite straightforward. We just call its method called “requestSubscription”. This method requires the public VAPID key as a parameter.

import { Component } from '@angular/core'
import { SwPush } from '@angular/service-worker'
 
const VAPID_PUBLIC =
  'BNOJyTgwrEwK9lbetRcougxkRgLpPs1DX0YCfA5ZzXu4z9p_Et5EnvMja7MGfCqyFCY4FnFnJVICM4bMUcnrxWg'
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'angular-push-notifications'
 
  constructor(swPush: SwPush) {
    if (swPush.isEnabled) {
      swPush
        .requestSubscription({
          serverPublicKey: VAPID_PUBLIC,
        })
        .then((subscription) => {
          // send subscription to the server
        })
        .catch(console.error)
    }
  }
}

This method returns a promise that resolves to a PushSubscription object. This subscription contains all the information that we need to send push notification to the client. But before we can do so, we need to send the subscription to our server.

Also, this is probably a good point to test what we have accomplished. As mentioned before, we need to compile the angular app to production for the service worker to be built.

So let’s do that:

 ng build --prod

Afterward, we can serve the build application by starting any webserver:

 http-server dist/angular-push-notifications

When opening the application in the browser (e.g. http://localhost:8080), the browser should ask for permission to subscribe you to push notifications.

Deleting the subscription for debugging

Once you have chosen one of the options in the dialog, the browser will not ask you again. Because we probably want to test our application more that one time, we can revoke our decision by opening the (chrome) browser settings here:

 chrome://settings/content/notifications

Just delete our application from the list.

Calling the service method

Now, all that is left is to use the service in our AppComponent. We are just calling the “sendSubscriptionToTheServer”-method and subscribe to its result.

import { Component } from '@angular/core'
import { SwPush } from '@angular/service-worker'
import { PushNotificationService } from './pushNotification.service'
 
const VAPID_PUBLIC =
  'BNOJyTgwrEwK9lbetRcougxkRgLpPs1DX0YCfA5ZzXu4z9p_Et5EnvMja7MGfCqyFCY4FnFnJVICM4bMUcnrxWg'
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'angular-push-notifications'
 
  constructor(swPush: SwPush, pushService: PushNotificationService) {
    if (swPush.isEnabled) {
      swPush
        .requestSubscription({
          serverPublicKey: VAPID_PUBLIC,
        })
        .then((subscription) => {
          pushService.sendSubscriptionToTheServer(subscription).subscribe()
        })
        .catch(console.error)
    }
  }
}

Also, don’t forget to provide the service in the AppModule. We also have to import the HttpClientModule there:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
 
import { AppComponent } from './app.component'
import { ServiceWorkerModule } from '@angular/service-worker'
import { environment } from '../environments/environment'
import { PushNotificationService } from './pushNotification.service'
import { HttpClientModule } from '@angular/common/http'
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    ServiceWorkerModule.register('/ngsw-worker.js', {
      enabled: environment.production,
    }),
  ],
  providers: [PushNotificationService],
  bootstrap: [AppComponent],
})
export class AppModule {}

Installing dependencies

Now we need to install some dependencies. Our little server will have 4 dependencies.

First, there is express, which is a framework that makes writing web servers a lot easier. Also, there are cors and body-parser that are express plugins. Last but not least there is web-push. We will use it to send push notifications.

Install all of those using this command:

 yarn add body-parser cors express web-push

A basic server

A basic express app always looks the same.

Call express and listen for requests. It’s that easy! Oh, and in between, we are registering some plugins…

const app = express()
 
app.use(cors())
app.use(bodyParser.json())
 
webpush.setVapidDetails('mailto:you@domain.com', PUBLIC_VAPID, PRIVATE_VAPID)
 
app.listen(3000, () => {
  console.log('Server started on port 3000')
})

Also, we are initializing web-push to use the private and public key. It also want’s to know your email address.

This server does nothing at the moment but we can already start it by calling:

 node server.js

Registering routes

Next, we are registering some routers. That way we tell the web server to listen to request to that URL and call our callback in that case.

Essentially, we want to do two things. Take subscription objects from our angular clients and send push notifications to that subscriptions.

For that, we are creating one route each. Both routes are listening on HTTP-POST requests.

app.post('/subscription', (req, res) => {})
 
app.post('/sendNotification', (req, res) => {})