Tweet
Tweet

Slide 1

Slide 1 text

Christian Liebel @christianliebel Consultant Progressive Web Apps (PWA) with Angular Angular Heidelberg

Slide 2

Slide 2 text

Hello, it’s me. Progressive Web Apps with Angular Angular Heidelberg Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain

Slide 3

Slide 3 text

1. Motivation 2. Add to Homescreen 3. Offline Capability 4. Application Shell 5. Push Notifications 6. Payment 7. Q&A Progressive Web Apps with Angular Angular Heidelberg Talking Points

Slide 4

Slide 4 text

Motivation Progressive Web Apps with Angular Angular Heidelberg

Slide 5

Slide 5 text

Windows Mobile 5 Apps in 2005… Angular Heidelberg Progressive Web Apps with Angular

Slide 6

Slide 6 text

Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Angular Heidelberg Progressive Web Apps with Angular

Slide 7

Slide 7 text

And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. — Steve Jobs, June 11, 2007 Angular Heidelberg Progressive Web Apps with Angular

Slide 8

Slide 8 text

Angular Heidelberg Progressive Web Apps with Angular

Slide 9

Slide 9 text

Let me just say it: We want native third party applications on the iPhone, and we plan to have an SDK in developers’ hands in February. — Steve Jobs, October 17, 2007 Angular Heidelberg Progressive Web Apps with Angular

Slide 10

Slide 10 text

App Stores Apps Today… Angular Heidelberg Progressive Web Apps with Angular

Slide 11

Slide 11 text

Web Goes Native • No app stores anymore! • Web App = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Apps Tomorrow… Angular Heidelberg Progressive Web Apps with Angular

Slide 12

Slide 12 text

Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview Angular Heidelberg Progressive Web Apps with Angular

Slide 13

Slide 13 text

Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive “Uber Pattern” Angular Heidelberg Progressive Web Apps with Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/

Slide 14

Slide 14 text

Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive “Uber Pattern” Angular Heidelberg Progressive Web Apps with Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Add to Homescreen Offline Availability Push Notifications Application Shell Payment Requests

Slide 15

Slide 15 text

Device Support Mobile Devices Recent Android devices (4.1+) with recent Chrome versions (40+) Apple iOS 11.3+ (Safari 11.1+) PWA Status Quo Browsers Google Chrome Mozilla Firefox Microsoft Edge 17+ Apple Safari 11.1+ Angular Heidelberg Progressive Web Apps with Angular

Slide 16

Slide 16 text

The Power of the Modern Web Web Share API Gamepad API Payment Request API Generic Sensor API Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Angular Heidelberg Progressive Web Apps with Angular 16

Slide 17

Slide 17 text

What about Angular & PWA? Angular Heidelberg Progressive Web Apps with Angular

Slide 18

Slide 18 text

It all starts with a new Angular CLI project… ng new my-pwa --routing @angular/pwa LIVE DEMO Angular Heidelberg Progressive Web Apps with Angular

Slide 19

Slide 19 text

For new and existing projects ng add @angular/pwa @angular/pwa LIVE DEMO Angular Heidelberg Progressive Web Apps with Angular

Slide 20

Slide 20 text

Add to Homescreen Progressive Web Apps with Angular Angular Heidelberg

Slide 21

Slide 21 text

Distinguish Web Apps from Websites How to distinguish websites from apps? Idea: Add a file with metadata for apps only Advantage: Apps can be identified by search engines, app store providers etc. Web App Manifest Discoverable Angular Heidelberg Progressive Web Apps with Angular

Slide 22

Slide 22 text

manifest.webmanifest { "short_name": "PWA Demo", "name": "Heidelberg PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Title Icons Start URL Display Mode Splash Screen Additional Config Description Related Apps Angular Heidelberg Progressive Web Apps with Angular

Slide 23

Slide 23 text

manifest.webmanifest { "short_name": "PWA Demo", "name": "Heidelberg PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Angular Heidelberg Progressive Web Apps with Angular

Slide 24

Slide 24 text

Display Types 1. fullscreen: App opens in full screen (i.e., without any browser or OS UI, intended for games etc.) 2. standalone: App opens in a native frame (i.e., in an own window on desktop systems and with the status bar/softkeys on mobile systems) 3. minimal-ui: App opens in a native frame with minimal UI attached to it (e.g. browser bar, back/forward/reload buttons) 4. browser: App opens in a browser tab Progressive Web Apps with Angular Angular Heidelberg Web App Manifest

Slide 25

Slide 25 text

Fortunately, the @angular/pwa schematic has created a Web App Manifest and added icons in different sizes to our project. Progressive Web Apps with Angular Angular Heidelberg Web App Manifest LIVE DEMO

Slide 26

Slide 26 text

Self publishing Developer publishes the App in the Microsoft store under his own name Auto indexing (beta) PWAs are automatically discovered, reviewed and published in the store by Bing PWAs & Windows Store Angular Heidelberg Progressive Web Apps with Angular

Slide 27

Slide 27 text

Progressive Web Apps with Angular Angular Heidelberg PWA & Windows Store

Slide 28

Slide 28 text

Offline Capability Progressive Web Apps with Angular Angular Heidelberg

Slide 29

Slide 29 text

Proxy/Controller/Interceptor Service Worker Service Worker Internet Website HTML/JS Cache fetch Angular Heidelberg Progressive Web Apps with Angular

Slide 30

Slide 30 text

Overview Implements a “one-size-fits-all” service worker Instrumented via ngsw.json Restricted feature set (i.e. no communication between app and SW) • Initial caching of static content • Caching external content • Dynamic Caching • Push notifications @angular/service-worker Angular Heidelberg Progressive Web Apps with Angular

Slide 31

Slide 31 text

Fortunately, the @angular/pwa schematic has added a service worker implementation to our project. Progressive Web Apps with Angular Angular Heidelberg Service Worker LIVE DEMO

Slide 32

Slide 32 text

import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Progressive Web Apps with Angular Angular Heidelberg Service Worker

Slide 33

Slide 33 text

ngsw-config.json { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/*.js", ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ ], "urls": [ "http://xy.invalid/1.jpg" ], } } ] } @angular/service-worker Angular Heidelberg Progressive Web Apps with Angular

Slide 34

Slide 34 text

@angular/service-worker allows static caching Cache information has to be added to the ngsw.json Webpack build integration (included in Angular CLI) adds the build output artefacts to the manifest automatically, based on the ngsw- config.json file Service Worker already works for production builds! Progressive Web Apps with Angular Angular Heidelberg Static Caching

Slide 35

Slide 35 text

{ "index": "/index.html", "assetGroups": [ // … ], "dataGroups": [ // … ] } Progressive Web Apps with Angular Angular Heidelberg Static Caching Name of index document Purged for each new app version, e.g. for static caching Survive app versions, e.g. for dynamic caching

Slide 36

Slide 36 text

{ "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [], "urls": [] } } ] } Progressive Web Apps with Angular Angular Heidelberg Static Caching Default is prefetch Prefetch: Cache directly Lazy: Cache when requested Specify files or urls

Slide 37

Slide 37 text

Caching Strategies "dataGroups": [ { "name": "my-api", "urls": ["/api"], "cacheConfig": { "strategy": "freshness", "maxSize": 30, "maxAge": "30m", "timeout": "2s" } } ] Progressive Web Apps with Angular Angular Heidelberg Dynamic Caching Maximum cache duration freshness: network-first performance: cache-first Only for freshness Maximum amount of cached requests

Slide 38

Slide 38 text

@angular/service-worker Update Process Progressive Web Apps with Angular Angular Heidelberg Fresh 38 V1 V2 V2 V1 V1 V2 Server Browser

Slide 39

Slide 39 text

SwUpdate @angular/service-worker offers an SwUpdate service This service provides an available observable that fires when there’s an update. As a result, the user can be prompted to reload the website. swUpdate.available .subscribe(() => …); Progressive Web Apps with Angular Angular Heidelberg Fresh 39

Slide 40

Slide 40 text

@angular/service-worker • One-size-fits-all Service Worker • Angular CLI supports Service Worker generation • Pre-defined functionality, limited customizability Custom Implementation • Individually created Service Worker • Post-process build output of an Angular app • Maximum flexibility, maximum management overhead Alternatives Angular Heidelberg Progressive Web Apps with Angular

Slide 41

Slide 41 text

Orthogonal to Service Workers The web platform has different techniques to store user data (e.g. application state) offline: • Web Storage API (Local Storage/Session Storage—synchronous!) • Web SQL (deprecated) • Cookies (inconvenient) • IndexedDB Progressive Web Apps with Angular Angular Heidelberg Offline Capability

Slide 42

Slide 42 text

IndexedDB Indexed Database (IndexedDB) is a database in the browser capable of storing structured data in tables with keys and value Data is stored permanently (survives browser restarts) Service Worker and website share access to the same IndexedDB database (e.g. for synchronization purposes) IndexedDB can help when storing client data, whereas Service Worker helps caching server data Progressive Web Apps with Angular Angular Heidelberg Offline Capability

Slide 43

Slide 43 text

IndexedDB Progressive Web Apps with Angular Angular Heidelberg Offline Capability

Slide 44

Slide 44 text

IndexedDB let db; const request = indexedDB. open('TestDB'); request.onerror = err => { console.error('boo!'); }; request.onsuccess = evt => { db = request.result; }; IndexedDB API is inconvenient const db = new Dexie('TestDB'); Progressive Web Apps with Angular Angular Heidelberg Offline Capability

Slide 45

Slide 45 text

- The next best to-do list app - Create, read, update and delete to-dos - Progressive Web App: installable - Responsive: one size fits all - Offline-first: synchronize to-do list with backend using IndexedDB & Dexie.js - Web Share API: Share your to-dos with just a tap - No user context, sorry Demo Use Case Angular Heidelberg Progressive Web Apps with Angular

Slide 46

Slide 46 text

https://pwademo.azureedge.net Demo Use Case Angular Heidelberg Progressive Web Apps with Angular

Slide 47

Slide 47 text

Application Shell Progressive Web Apps with Angular Angular Heidelberg

Slide 48

Slide 48 text

PWAs should look app-like Certain parts of the UI are always visible Other parts are dynamic content Idea: Static parts (App Shell) are stored in the cache App Shell works without or bad connectivity Example: Error message if no connection is available App Shell is server-rendered, so it’s instantly available Progressive Web Apps with Angular Angular Heidelberg Application Shell

Slide 49

Slide 49 text

Angular Universal Provided by the Angular team, open-source Pre-renders the website using the same sources that are served Integrates with the CLI Supports Node.js and ASP.NET Core Progressive Web Apps with Angular Angular Heidelberg Application Shell

Slide 50

Slide 50 text

Fortunately, there’s another schematic for creating an Application Shell (requires routing!). ng generate app-shell --client-project my-pwa --universal- project server-app Progressive Web Apps with Angular Angular Heidelberg Application Shell LIVE DEMO

Slide 51

Slide 51 text

Introduces a new route /shell (only accessible for the server) Pre-renders this route when creating the index.html The website does not have to be delivered by Angular Universal (a static file server is sufficient) ng run my-app:app-shell Progressive Web Apps with Angular Angular Heidelberg Application Shell

Slide 52

Slide 52 text

Push Notifications Progressive Web Apps with Angular Angular Heidelberg

Slide 53

Slide 53 text

Get the user back with notifications Idea: Push the users to use the app again Known from social networks or games, etc. Combination of two technologies: • Notifications API • Push API Progressive Web Apps with Angular Angular Heidelberg Push Notifications

Slide 54

Slide 54 text

Push API Progressive Web Apps with Angular Angular Heidelberg Push Notifications

Slide 55

Slide 55 text

Push services Every browser vendor has its own push service Challenge: Every service is used in a different way Ends in several implementations on the server Solution: One protocol that can be used by every push service Web Push Protocol Progressive Web Apps with Angular Angular Heidelberg Push Notifications

Slide 56

Slide 56 text

Web Push Protocol Every push service talks Web Push Protocol Only one server implementation needed To make the push request secure, private and public keys are needed Ready-to-use-packages are available for different servers (e.g. Node, ASP.NET, etc.) Progressive Web Apps with Angular Angular Heidelberg Push Notifications

Slide 57

Slide 57 text

Workflow Progressive Web Apps with Angular Angular Heidelberg Push Notifications Push Service Server 4. Send Message to Push Service endpoint 5. Response (success/fail) 1. Register for push 2. Send push information to client 6. Push to client Client(s) 3. Send push endpoint

Slide 58

Slide 58 text

SwPush Fortunately, @angular/service-worker offers an SwPush service The service provides a requestSubscription promise that returns a new push subscription This subscription includes the push service endpoint That endpoint can be used from the server to send push notifications to the client Progressive Web Apps with Angular Angular Heidelberg Push Notifications

Slide 59

Slide 59 text

Demo Create key pair https://web-push-codelab.glitch.me/ can be used to generate key pairs Register for Push swPush.requestSubscription({ serverPublicKey: "public key" }) .then(subscription => … ); Progressive Web Apps with Angular Angular Heidelberg Push Notifications LIVE DEMO

Slide 60

Slide 60 text

Payment Progressive Web Apps with Angular Angular Heidelberg

Slide 61

Slide 61 text

Progressive Web Apps with Angular Angular Heidelberg No app store, no money?

Slide 62

Slide 62 text

Progressive Web Apps with Angular Angular Heidelberg Let’s use a checkout form!

Slide 63

Slide 63 text

Traditional checkout forms are… Progressive Web Apps with Angular Angular Heidelberg Online Payment repetitive tedious (sometimes) not touch-friendly

Slide 64

Slide 64 text

API const request = new PaymentRequest(methodData, details, options); Progressive Web Apps with Angular Angular Heidelberg Payment Request API

Slide 65

Slide 65 text

Demo https://pwa.liebel.io Progressive Web Apps with Angular Angular Heidelberg Payment Request API

Slide 66

Slide 66 text

Q&A Progressive Web Apps with Angular Angular Heidelberg

Slide 67

Slide 67 text

mobile.twitter.com Reference Apps Angular Heidelberg Progressive Web Apps with Angular

Slide 68

Slide 68 text

More information on installed service workers can be found on • chrome://serviceworker- internals (Google Chrome) • about:serviceworkers (Mozilla Firefox) How many are installed on your system already? Progressive Web Apps with Angular Angular Heidelberg Service Worker 68

Slide 69

Slide 69 text

Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com