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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Motivation
   Progressive Web Apps with Angular
   Angular Heidelberg
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

8. Angular Heidelberg
   Progressive Web Apps with Angular
   

   View Slide

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
   

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

20. Add to Homescreen
    Progressive Web Apps with Angular
    Angular Heidelberg
    

    View Slide

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
    
    Discoverable
    Angular Heidelberg
    Progressive Web Apps with Angular
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. Progressive Web Apps with Angular
    Angular Heidelberg
    PWA & Windows Store
    

    View Slide

28. Offline Capability
    Progressive Web Apps with Angular
    Angular Heidelberg
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. IndexedDB
    Progressive Web Apps with Angular
    Angular Heidelberg
    Offline Capability
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

47. Application Shell
    Progressive Web Apps with Angular
    Angular Heidelberg
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

52. Push Notifications
    Progressive Web Apps with Angular
    Angular Heidelberg
    

    View Slide

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
    

    View Slide

54. Push API
    Progressive Web Apps with Angular
    Angular Heidelberg
    Push Notifications
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. Payment
    Progressive Web Apps with Angular
    Angular Heidelberg
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. Q&A
    Progressive Web Apps with Angular
    Angular Heidelberg
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide