$30 off During Our Annual Pro Sale. View Details »

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.

Christian Liebel
PRO

September 05, 2018
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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
    [email protected]

    View Slide