Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps with Angular

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

September 05, 2018
Tweet

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