Sebastien Vasylets

junior Frontend Developer in Artcom Venture

@SebastienV - telegram

@shoulddomore - twitter

Angular Push Notifications

Service Worker

Web Workers:

Dedicated Workers (Выделенные воркеры)​

Shared Workers (Разделяемые воркеры)

Service Workers (Сервис-воркеры)

Web

Service Worker

Application

  • Angular 5.0.0 or later.
  • Angular CLI 1.6.0 or later.

To use Angular service workers you need:

ng new my-project --service-worker
------------------------------------
npm install @angular/service-worker
yarn add @angular/service-worker
------------------------------------
ng set apps.0.serviceWorker=true
------------------------------------

Adding a service worker to a new application:

import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { NgModule } from '@angular/core';

import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { 
     enabled: environment.production
    })
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})

export class AppModule { }
{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Push notifications

Voluntary Application Server Identification (VAPID)

npm install web-push -g
-------------------------------------
web-push generate-vapid-keys --json
{
  "publicKey": "BDnxGjzarKt3lrZaBGP7QCcYJ_aL69ls3aWrMXAaZ3Jn1
                WdPBBbRjpaf-mPNkfCmkp8SopE1fW1tFHd7a1rOhWM6Asc",
  "privateKey": "b1nf8bjfQN-9_2nmjfnH4eo_ade72E04J-SUvvtBtlu_Gk"
}

Permissions

Get PushSubscription

Send PushSubscription to app server

Send PushNotifications

How it can be done ?

Personal Backend (NodeJS, C# etc...)

1.

2.

This is the end

Beautiful friend

This is the end

My only friend

The end

Angular Push Notifications

By Sebastien Vasylets (SebastienV)

Angular Push Notifications

Slides for Angular Meetup Kyiv #5 by Sebastien Vasylets about Angular Push Notifications

  • 735