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