Angular: Browser webpush- og desktop notifikationer

(Last Updated On: 18. februar 2019)

Dette er mine noter om implemententering af push- og desktop notifikationer i en Angular 7 PWA. Se den fulde beskrivelse på engelsk her: Angular Push Notifications – a Complete Step-by-Step Guide

Web Push notifikationer: Notifikationer der sendes fra en server til en browser, også når hjemmesiden ikke har fokus og endda når browseren er helt lukket. Dette er en pendant til de notifikationer man også bruger til at sende notifikationer til app’s i mobile enheder.

Desktop/browser notifikationer: Browserens notifikationssystem. Når brugeren har sagt ja til at modtage meddelelser via browseren kan dette system bruges til at vise notifikationer via browserens brugerflade.

Således bruges Push til at sende beskeden til browseren og Desktop til at vise beskeden når den modtages i browseren.

Start med at installere web-push globalt:

# npm install web-push -g

1	# npm install web-push -g

Generér VAPID nøgler med følgende kommando:

$ web-push generate-vapid-keys --json

1	$ web-push generate-vapid-keys --json

Den offentlige nøgle publicKey bruges til at identificere den service brugeren abonnerer på beskeder fra, dvs. din backend. Den private nøgle privateKey bruges af serveren ved udsendelse af beskeder. Sidstnævnte skal naturligvis opbevares bag lås og slå.

I app.module.ts:

export class AppComponent {

  readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo";

  constructor(
    private swPush: SwPush,
    private newsletterService: NewsletterService) {}

  subscribeToNotifications() {

    this.swPush.requestSubscription({
      serverPublicKey: this.VAPID_PUBLIC_KEY
    })
    .then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())
    .catch(err => console.error("Could not subscribe to notifications", err));
  }
}

export class AppComponent {

readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo";

constructor(

private swPush: SwPush,

private newsletterService: NewsletterService) {}

subscribeToNotifications() {

this.swPush.requestSubscription({

serverPublicKey: this.VAPID_PUBLIC_KEY

})

.then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())

.catch(err => console.error("Could not subscribe to notifications", err));

}

Nu kan du lave en knap eller lign. i din PWA der ved tryk kalder subscribeToNotifications(). Dette vil få browseren til at spørge om brugeren vil tillade browser beskeder.
I then blokken tilføjer du det der skal ske, når brugeren har bekræftet og forespørgslen til browserudbyderens push service er lykkedes.

Variablen sub indeholder et json objekt med alt det du fremover skal bruge, for at kunne sende notifikationer til brugeren. Dette er brugerenes ‘abonnement’ på din push service. Det er derfor vigtigt at gemme disse informationer centralt i en backend. Hver browser (Chrome, Safari, Internet Explorer, Firefox m.fl) har sin egen push service server. Når brugeren tager din PWA i brug i en ny browser, skal vedkommende derfor igen acceptere notifikationer, og ‘abonnementet’ gemmes i backend.

Når en push besked sendes, skal den sendes til alle de browsere hvor brugeren har ‘abonnement’ på push beskeder. Samtidig gemmer du information om hvornår abonnementet sidst var aktivt således at du kan ignorere og i sidste ende fjerne inaktive abonnementer. Der er jo ikke grund til at bruge kræfter på at sende til en browser brugeren ikke har benyttet i måneder.

Min strategi vil være som følger:

Brugeren tilgår app’en for første gang i den aktuelle browser.
Brugeren bekræfter modtagelse af notifikationer
Abonnementet gemmes i backend, eller overskrives hvis der i forvejen ligger et abonnement med samme endpoint.
App’en bekræfter dette endpoint med jævnlige intervaller.
Efter 1 år hvor et endpoint ikke er bekræftet, fjernes det fra databasen.