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

Das Web wird nativ(er): Progressive Web Apps mit Angular

Das Web wird nativ(er): Progressive Web Apps mit Angular

Progressive Web Apps sind in aller Munde: Hinter diesem Begriff verbergen sich verschiedene Technologien und Vorgehensweisen zur Entwicklung von Webanwendungen mit gewissen Extras. PWAs laufen im Browser und können auf mächtige Features zurückgreifen, die man bis vor wenigen Jahren lediglich nativen Anwendungen zugeschrieben hätte: Pushbenachrichtigungen, Datensychronisation oder Offlinefähigkeit kommen dank Service Worker & co. auch ins Web. Christian Liebel von Thinktecture zeigt Ihnen, wie Sie PWAs mithilfe von Googles Single-Page-Application-Framework Angular entwickeln können. Lernen Sie das Anwendungsmodell der Zukunft kennen.

Christian Liebel

June 26, 2018
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Christian Liebel
    @christianliebel
    Consultant

    View full-size slide

  2. What not to expect
    - Blueprint for PWA
    development
    - Future-proof tutorial for PWA
    development with Angular
    (experimental support)
    What to expect
    - Extensive/up-to-date insights
    into PWA and Angular’s PWA
    support
    - A PWA use case that works on
    your (comparably modern)
    Android phone and
    Chrome/Firefox browsers
    - Latest & greatest software
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  3. Hello, it’s me.
    Christian Liebel
    Follow me:
    @christianliebel
    Blog:
    christianliebel.com
    Email:
    christian.liebel
    @thinktecture.com
    Cross-Platform &
    Cloud & Enterprise
    Blockchain
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  4. Windows Mobile 5
    Apps in 2005…
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  5. Apps in 2007…
    https://www.youtube.com/watch?v=vN4U5FqrOdQ
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  6. 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
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  7. Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  8. 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
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  9. App Stores
    Apps Today…
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  10. 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…
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  11. Progressive Web Apps
    HTML5, JavaScript, CSS3
    Service Worker API
    Fetch API
    Web
    Notifications Web Workers Push API
    Web App
    Manifest
    HTTPS
    PWA Technology Overview
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  12. 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 Insider Build
    17063+ (WIP)
    Apple Safari 11.1
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  13. Native App Packaging
    Real Cross Platform – Get It Today
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  14. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    “Uber Pattern”
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  15. - 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
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  16. https://pwademo.azureedge.net
    Demo Use Case
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  17. What about Angular & PWA?
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  18. Overview
    Implements a “one-size-fits-all” service worker
    Instrumented via ngsw-manifest.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
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  19. 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
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  20. CLI Integration
    Angular CLI supports service worker generation
    Opt-in
    New version 6.x Service Worker requires Angular CLI 6.x or later
    When activated, service worker generation is automatically added to
    the ng build command (for production builds)
    @angular/pwa
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  21. Existing Projects
    ng add @angular/pwa
    Angular CLI & @angular/pwa
    LIVE DEMO
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  22. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  23. Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Responsive

    View full-size slide

  24. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  25. Reference Apps and Internal App States
    Classic (Query String)
    https://myapp.com/profile.php?id=peter.mueller
    Hash Anchor (e.g. SPA)
    https://myapp.com/#/profile/peter.mueller
    HTML5 History (SPA)/Server Rendered
    https://myapp.com/profile/peter.mueller
    Linkable
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  26. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  27. manifest.json
    {
    "short_name": "PWA Demo",
    "name": "My 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 Type Splash Screen
    Additional Config
    Description
    Related Apps
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  28. manifest.json
    {
    "short_name": "PWA Demo",
    "name": "My PWA Demo",
    "icons": [
    {
    "src": "assets/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
    }
    ],
    "start_url": "/index.html",
    "display": "standalone"
    }
    Web App Manifest
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    LIVE DEMO

    View full-size slide

  29. 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
    PWA & Windows Store
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  30. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  31. App Install Banners
    Website suggests installing a related native app
    (e.g. known from iOS, link to App Store)
    PWA: Web app and installed app are one and
    the same
    Showing a banner to pin the website to the
    homescreen
    You’ve seen this before: iOS Add to homescreen,
    IE9 Pinned Websites, Windows 8 Live Tiles etc.
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Installable

    View full-size slide

  32. manifest.json
    {
    "short_name": "PWA Demo",
    "name": "My PWA Demo",
    "icons": [
    {
    "src": "assets/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
    }
    ],
    "start_url": "/index.html",
    "display": "standalone"
    }
    App Install Banner
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    LIVE DEMO

    View full-size slide

  33. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  34. 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
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  35. App Shell
    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
    Technology of the App Shell doesn’t matter
    (Angular, AngularJS, React, jQuery, plain JavaScript, …)
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    App-like

    View full-size slide

  36. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  37. Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Offline capability with Service Worker
    System
    Website
    HTML/JS
    Cache
    Storage
    Remote
    storage
    Server
    Internet
    fetch HTTP
    Service
    Worker

    View full-size slide

  38. Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Caching Strategies
    https://jakearchibald.com/2014/offline-cookbook/

    View full-size slide

  39. {
    "index": "/index.html",
    "assetGroups": [
    // …
    ],
    "dataGroups": [
    // …
    ]
    }
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    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 full-size slide

  40. @angular/service-worker allows static caching
    Cache information has to be added to the ngsw-manifest.json
    Webpack build integration (included in Angular CLI) adds the build
    output artefacts to the manifest automatically
    Service Worker already works for production builds!
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Static Caching

    View full-size slide

  41. {
    "index": "/index.html",
    "assetGroups": [
    {
    "name": "app",
    "installMode": "prefetch",
    "resources": {
    "files": []
    }
    },
    {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
    "files": [],
    "urls": []
    }
    }
    ]
    }
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Static Caching
    Default is prefetch Prefetch: Cache directly
    Lazy: Cache when requested
    Specify files or urls

    View full-size slide

  42. Caching Strategies
    "dataGroups": [
    {
    "name": "my-api",
    "urls": ["/api"],
    "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 30,
    "maxAge": "30m",
    "timeout": "2s"
    }
    }
    ]
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Dynamic Caching
    Maximum cache duration
    freshness: network-first
    performance: cache-first
    Only for freshness
    Maximum amount of
    cached requests

    View full-size slide

  43. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  44. Keep your app up-to-date
    The Service Worker caches a specific version of your application.
    If the user is online, you want to deliver the latest version of your app.
    When new versions become available, you might want to notify the user
    to update the application.
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Fresh

    View full-size slide

  45. @angular/service-worker Update Process
    On every page reload, the
    @angular/service-worker reads the
    ngsw.json file generated by the CLI as a
    part of the build process.
    This file contains information about the
    bundled files and their contents.
    If this file differs from the previous version,
    the Service Worker will refresh your app.
    Hence, it’s sufficient to just reload the
    application after an update.
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Fresh

    View full-size slide

  46. @angular/service-worker Update Process
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Fresh
    V1 V2 V2
    V1 V1 V2
    Server
    Browser

    View full-size slide

  47. 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.
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Fresh

    View full-size slide

  48. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  49. PWAs Require HTTPS!
    Service workers are very powerful
    • Can answer representatively for the server
    • Runs outside of the tab’s/window’s lifecycle
    Installation of service workers is only allowed via a secure connection
    Exception: localhost (for development purposes)
    PWAs can only be delivered via HTTPS à thus: TLS certificates required!
    Solution: Let’s Encrypt, Hoster (Cloudflare, Azure, …), traditional CAs
    Safe
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  50. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  51. Get the user back with notifications
    Idea: Push the users to use the app again
    Known from social networks or games, etc.
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Re-Engageable

    View full-size slide

  52. Sending Push Notifications
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Re-Engageable
    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 full-size slide

  53. SwPush
    @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
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Re-Engageable

    View full-size slide

  54. Responsive Linkable Discoverable Installable
    App-like
    Connectivity
    Independent Fresh Safe
    Re-
    engageable Progressive
    PWA Features
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)
    https://developers.google.com/web/fundamentals/getting-
    started/codelabs/your-first-pwapp/

    View full-size slide

  55. Advance with Progressive Enhancement
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register(…)
    .then(() => {
    /* … */
    });
    }
    In JavaScript: check whether or not an API/feature is available
    If yes—use it!
    Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    Progressive

    View full-size slide

  56. mobile.twitter.com
    Reference Apps
    Progressive Web Apps mit Angular
    Das Web wird nativ(er)

    View full-size slide

  57. Das Web wird nativ(er)
    Progressive Web Apps mit Angular
    PWA & Windows Store

    View full-size slide

  58. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    Consultant

    View full-size slide