Progressive Web Apps with Angular

Buzzword Bingo time! For sure, PWA is one of the hottest topics in Web space today. Come and join Thinktecture’s Christian Liebel to learn about how to design and build Progressive Web Apps with Angular. A PWA should feel like a real app we are used to since years, users want an icon on the home screen and native-like performance and functionality. To achieve this, we are going to touch several architectural and feature areas such as application shell, offline capabilities, push notifications and payment. And of course, we will see all of this in action with Angular CLI and accompanying tools. This is surely going to be a lot of fun, not just for mobile devices.

Transcript

1. Christian Liebel @christianliebel Consultant Progressive Web Apps (PWA) with Angular Angular Heidelberg
2. 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
3. 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
4. Motivation Progressive Web Apps with Angular Angular Heidelberg
5. Windows Mobile 5 Apps in 2005… Angular Heidelberg Progressive Web Apps with Angular
6. Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Angular Heidelberg Progressive Web Apps with Angular
7. 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
8. Angular Heidelberg Progressive Web Apps with Angular
9. 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
10. App Stores Apps Today… Angular Heidelberg Progressive Web Apps with Angular
11. 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
12. 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
13. 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/
14. 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
15. 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
16. 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
17. What about Angular & PWA? Angular Heidelberg Progressive Web Apps with Angular
18. 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
19. For new and existing projects ng add @angular/pwa @angular/pwa LIVE DEMO Angular Heidelberg Progressive Web Apps with Angular
20. Add to Homescreen Progressive Web Apps with Angular Angular Heidelberg
21. 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 <link rel="manifest" href="manifest.webmanifest"> Discoverable Angular Heidelberg Progressive Web Apps with Angular
22. 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
23. 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
24. 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
25. 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
26. 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
27. Progressive Web Apps with Angular Angular Heidelberg PWA & Windows Store
28. Offline Capability Progressive Web Apps with Angular Angular Heidelberg
29. Proxy/Controller/Interceptor Service Worker Service Worker Internet Website HTML/JS Cache fetch Angular Heidelberg Progressive Web Apps with Angular
30. 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
31. 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
32. 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
33. 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
34. @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
35. { "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
36. { "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
37. 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
38. @angular/service-worker Update Process Progressive Web Apps with Angular Angular Heidelberg Fresh 38 V1 V2 V2 V1 V1 V2 Server Browser
39. 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
40. @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
41. 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
42. 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
43. IndexedDB Progressive Web Apps with Angular Angular Heidelberg Offline Capability
44. 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
45. - 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
46. https://pwademo.azureedge.net Demo Use Case Angular Heidelberg Progressive Web Apps with Angular
47. Application Shell Progressive Web Apps with Angular Angular Heidelberg
48. 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
49. 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
50. 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
51. 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
52. Push Notifications Progressive Web Apps with Angular Angular Heidelberg
53. 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
54. Push API Progressive Web Apps with Angular Angular Heidelberg Push Notifications
55. 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
56. 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
57. 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
58. 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
59. 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
60. Payment Progressive Web Apps with Angular Angular Heidelberg
61. Progressive Web Apps with Angular Angular Heidelberg No app store, no money?
62. Progressive Web Apps with Angular Angular Heidelberg Let’s use a checkout form!
63. Traditional checkout forms are… Progressive Web Apps with Angular Angular Heidelberg Online Payment repetitive tedious (sometimes) not touch-friendly
64. API const request = new PaymentRequest(methodData, details, options); Progressive Web Apps with Angular Angular Heidelberg Payment Request API
65. Demo https://pwa.liebel.io Progressive Web Apps with Angular Angular Heidelberg Payment Request API
66. Q&A Progressive Web Apps with Angular Angular Heidelberg
67. mobile.twitter.com Reference Apps Angular Heidelberg Progressive Web Apps with Angular
68. 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
69. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com