Maxim Salnikov
Angular GDE
Products from the future
UI Engineer at ForgeRock
AJAX
Static
Dynamic
RWD
PWA
... attempts to combine features offered by most modern browsers with the benefits of mobile experience
... web apps that use the latest web technologies.
v1.0.0-beta.16 - Experimental service worker by the Angular Mobile team
v0.1.0 - App Shell runtime library for Angular Progressive Web Apps
# First, install the Angular Service Worker
$ npm install --save @angular/service-worker
# Enable the SW registration + app shell in Angular CLI
$ ng set apps.0.serviceWorker=true
"apps": [
{
"serviceWorker": true
}
]
# NGSW works only in --prod mode
$ ng build --prod
<script src="sw-register.{HASH}.bundle.js"></script>
{
"static": {
"urls": {
"/index.html": "ae543...",
"/main.bundle.js": "9ff18...",
"/styles.bundle.css": "d6f44...",
"/assets/images/logo.png": "0e33a...",
...
}
}
}
Angular PWA
{
"routing": {
"index": "/index.html",
"routes": {
"/": {
"match": "exact"
},
"/some/routes-group-prefix": {
"match": "prefix"
}
}
}
}
{
"static" : {
...autogenerated
}
}
{
"routing" : {...}
...
}
{
"external": {
"urls": [
{
"url": "https://fonts.gstatic.com/Roboto.ttf"
}
]
}
}
Angular PWA
{
"dynamic": {
"groups": [
{
"name": "api",
"urls": {...},
"cache": {...}
}
]
}
}
cache: {
"optimizeFor": "freshness", // or 'performance'
"networkTimeoutMs": 200,
"maxAgeMs": 1000,
"maxEntries": 2,
"strategy": "fifo" // or 'lru', 'lfu'
}
urls: {
"/api/breakingnews": {
"match": "prefix"
}
},
Angular PWA
Backend
Notification
Push Service
NGSW
App
Backend
Push Service
App
{
"push": {
"showNotifications": true
}
}
import {NgServiceWorker} from '@angular/service-worker';
constructor(public sw: NgServiceWorker) {}
import {ServiceWorkerModule} from '@angular/service-worker'
imports: [
...
ServiceWorkerModule
]
constructor(public sw: NgServiceWorker) {}
sw
.registerForPush({
applicationServerkey: 'H7nef93Mds....'
})
.subscribe(subscriptionObject => {
// Send subscription data to the server
});
import {NgServiceWorker} from '@angular/service-worker';
sw.push.subscribe(notificationPayload => {
// Process notification data
});
Angular PWA
{
"static": {...},
"routing": {...},
"external": {...},
"dynamic": {...},
"push": {...}
}
Angular PWA