progressive angular apps - microsoft...after all, wha t is pwa? progressive web apps use modern web...

in the #YearOfPWAin the #YearOfPWA

Maxim Salnikov@webmaxru

ProgressiveProgressiveAngular AppsAngular Apps

“ How to create AngularHow to create AngularProgressive Web App?Progressive Web App?

“ How to create AngularHow to create AngularProgressive Web App?Progressive Web App?

Using the native toolsUsing the native tools

Maxim SalnikovMaxim Salnikov

@webmaxru@webmaxru

Google Developer Expert, Microsoft MVPGoogle Developer Expert, Microsoft MVP

Angular Angular OsloOslo / / PWA OsloPWA Oslo meetups meetupsorganizerorganizer

ngVikingsngVikings / / Mobile Era Mobile Era conferencesconferencesorganizerorganizer

“ Products from the futureUI Engineer at ForgeRock

http://twitter.com/webmaxru

After all, what is PWA?After all, what is PWA?


Progressive web apps use modern web APIs alongwith traditional progressive enhancement strategyto create cross-platform web applications.

https://developer.mozilla.org/en-US/Apps/Progressive



Progressive web apps use modern web APIs alongwith traditional progressive enhancement strategyto create cross-platform web applications.


These apps work These apps work everywhereeverywhere and provide and provideseveral features that give them the sameseveral features that give them the sameuser experience advantagesuser experience advantages as native apps. as native apps.


#YearOfPWA#YearOfPWA

#YearOfPWA#YearOfPWA

Latest updatesLatest updates

Cross-platform?Cross-platform?


BrowserBrowser


BrowserBrowser

MobileMobile


BrowserBrowser

DesktopDesktop

MobileMobile


BrowserBrowser

DesktopDesktop

MobileMobile

OS


BrowserBrowser

DesktopDesktop

MobileMobile

Flagged

OS

UX advantages?UX advantages?


Smart networking + OfflineSmart networking + Offline



Staying notifiedStaying notified




Other cool thingsOther cool things




Other cool thingsOther cool things}} Service Worker

API



Proper app experienceProper app experience


Other cool thingsOther cool things}} Service Worker

API

Web App Manifest

❤❤

Create Angular PWACreate Angular PWA


Code service worker Code service worker manuallymanually



Use framework-agnostic Use framework-agnostic PWA librariesPWA libraries



Use framework-agnostic Use framework-agnostic PWA librariesPWA libraries

Use Angular Service Worker (Use Angular Service Worker (NGSWNGSW))

Automate it!Automate it!

PWA MVPPWA MVP

Recipe #1Recipe #1

Minimal PWAMinimal PWA


Served via HTTPSServed via HTTPS



Responsive, fast, cross-browserResponsive, fast, cross-browser




App metadata providedApp metadata provided





App loads while offlineApp loads while offline





App loads while offlineApp loads while offline }} PWA schematicsPWA schematics

Apply PWA schematicsApply PWA schematics

$ ng add @angular/pwa



$ ng build --prod



$ ng build --prod


ngsw-worker.jsngsw-worker.js

ngsw.jsonngsw.json

dist/project-namedist/project-name


$ ng build --prod



ngsw.jsonngsw.json


assets/icons/*.pngassets/icons/*.png

manifest.jsonmanifest.json


$ ng build --prod



ngsw.jsonngsw.json


safety-worker.jssafety-worker.js



worker-basic.min.jsworker-basic.min.js

Running and auditingRunning and auditing

Running and auditingRunning and auditing

$ ng serve --prod

App shell actionsApp shell actions


Generate assets Generate assets (+ hashes)(+ hashes) list list



Register service workerRegister service worker




Load and cache assetsLoad and cache assets





Set up routingSet up routing






Serve assets from the Cache StorageServe assets from the Cache Storage






Serve assets from the Cache StorageServe assets from the Cache Storage

Load and cache the updated assetsLoad and cache the updated assets

NGSW configuration fileNGSW configuration file

NGSW configuration fileNGSW configuration file

ngsw-config.jsonngsw-config.json

{ "index": "/index.html", "assetGroups": [...], "dataGroups": [...] }

App shellApp shell

App shellApp shell

assetGroupsassetGroups

{ "name": "app", "installMode": "prefetch", "resources": {...} }

App shell resourcesApp shell resources

assetGroups / "app" / resourcesassetGroups / "app" / resources

"resources": { }

App shell resourcesApp shell resources

assetGroups / "app" / resourcesassetGroups / "app" / resources

"resources": { }

"files": [ "/favicon.ico", "/index.html", "/*.css", "/*.js" ]

Important!Important!

src/src/


src/src/



src/src/



index.html / <meta name="theme-color" ...>index.html / <meta name="theme-color" ...>


src/src/



index.html / <meta name="theme-color" ...>index.html / <meta name="theme-color" ...>

To be customizedTo be customized

Add more resources to theAdd more resources to theApp ShellApp Shell

Recipe #2Recipe #2

App shell / on-demandApp shell / on-demand


assetGroupsassetGroups

{ "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": {...} }


assetGroups / "assets" / resourcesassetGroups / "assets" / resources

"resources": { }



"resources": { }

"files": [ "/assets/**" ],



"resources": { }

"files": [ "/assets/**" ],

"urls": [ "https://fonts.googleapis.com/**", "https://fonts.gstatic.com/**" ]

Data requests cachingData requests caching

Recipe #3Recipe #3

Runtime cachingRuntime caching


dataGroupsdataGroups

{ "name": "api-freshness", "urls": [ "/api/breakingnews/**" ], }



{ "name": "api-freshness", "urls": [ "/api/breakingnews/**" ], }

"cacheConfig": { "strategy": "freshness", "maxSize": 10, "maxAge": "12h", "timeout": "10s" }



{ "name": "api-performance", "urls": [ "/api/archive/**" ], }



{ "name": "api-performance", "urls": [ "/api/archive/**" ], }

"cacheConfig": { "strategy": "performance", "maxSize": 100, "maxAge": "365d" }

Support API versioningSupport API versioning

Recipe #4Recipe #4



{ "version": 1, "name": "api-performance", "urls": [ "/api/**" ], ... }

App update notificationsApp update notifications

Recipe #5Recipe #5

App version updatesApp version updates

v1v1

v1v1

ServerServer

BrowserBrowser


v1v1 v2v2

v1v1

ServerServer

BrowserBrowser


v1v1 v2v2

v1v1v1v1

ServerServer

BrowserBrowser


v1v1 v2v2

v1v1v1v1 v2v2

ServerServer

BrowserBrowser

v2v2

Notify about updatesNotify about updates


import { SwUpdate } from '@angular/service-worker';

updates.component.tsupdates.component.ts



constructor(updates: SwUpdate) {}





this.updates.available.subscribe(event => { })





this.updates.available.subscribe(event => { })


if (confirm(`New Version is available! OK to refresh`)) { window.location.reload(); }

Subscribing for the PushSubscribing for the Pushnotificationsnotifications

Recipe #6Recipe #6

Push notificationsPush notifications


import { SwPush } from '@angular/service-worker';

push.component.tspush.component.ts



constructor(push: SwPush) {}




constructor(push: SwPush) {}

subscribeToPush() { this.push.requestSubscription({ serverPublicKey: this.VAPID_PUBLIC_KEY }) .then(pushSubscription => { // Pass subscription object to the backend }) }


Push notifications / sendPush notifications / send


{ "notification": { } }

server-side.js / sendNotification payloadserver-side.js / sendNotification payload


{ "notification": { } }

server-side.js / sendNotification payloadserver-side.js / sendNotification payload

"title": "Very important notification", "body": "Angular Service Worker is cool!", "icon": "https://angular.io/assets/logo.png", "actions": [ { "action": "gocheck", "title": "Go and check" } ], ...

Main available featuresMain available features


App shell withApp shell with

automatic updatesautomatic updates



automatic updatesautomatic updatesRuntime data cachingRuntime data caching




Push notificationsPush notificationssubscription and displaysubscription and display




Push notificationsPush notificationssubscription and displaysubscription and display Debugger and kill switchDebugger and kill switch

ProsPros ConsCons

ProsPros

Minimal PWA goesMinimal PWA goesout-of-the-boxout-of-the-box

ConsCons

ProsPros


Essential features areEssential features arecodelesscodeless

ConsCons

ProsPros



Doing things inDoing things inAngular wayAngular way

ConsCons

ProsPros




ConsCons

Intended to play a mainIntended to play a mainservice worker's role inservice worker's role inyour PWAyour PWA

ProsPros




ConsCons

Intended to play a mainIntended to play a mainservice worker's role inservice worker's role inyour PWAyour PWA

There is no way to extendThere is no way to extendthe functionalitythe functionality

bit.ly/go-pwa-slackbit.ly/go-pwa-slack

https://bit.ly/join-pwa-slack

1700+ developers1700+ developers



1700+ developers1700+ developers

Major browsers/frameworks/libs repsMajor browsers/frameworks/libs reps



Thank you!Thank you!

Maxim Salnikov@webmaxru

Questions?Questions?

progressive angular apps - microsoft...after all, wha t is pwa? progressive web apps use modern web...

Documents