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

Progressive Web Apps – Hands on!

Progressive Web Apps – Hands on!

Stellen Sie sich vor, Sie schreiben Ihre moderne Businessanwendung genau einmal – und sie läuft auf Windows, macOS, Linux, Android, iOS und im Browser. Diese Anwendungen werden per Fingertippen aus dem Browser auf dem Gerät installiert, können Pushbenachrichtigungen empfangen und funktionieren auch dann, wenn das Wi-Fi im Zug gerade mal wieder nicht funktioniert. Das klingt fantastisch? Dank Progressive Web Apps (PWA) wird all das Wirklichkeit. Mit Hilfe moderner Webtechnologien wird aus einer Webanwendung eine App, die einer nativen App in nichts nachsteht. In diesem Workshop zeigt Ihnen Christian Liebel die Grundlagen der PWA-Entwicklung. Und Sie können aktiv mitentwickeln!

Christian Liebel
PRO

March 23, 2021
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Progressive Web Apps
    Hands on!
    Christian Liebel
    @christianliebel
    Consultant

    View Slide

  2. Hello, it’s me.
    Progressive Web Apps
    Hands on!
    Christian Liebel
    Twitter:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Angular & PWA
    Slides:
    thinktecture.com
    /christian-liebel

    View Slide

  3. Things NOT to expect
    - Blueprint for PWA
    development
    - No 1:1 support
    Things TO EXPECT
    - Extensive/up-to-date insights
    into PWA and Angular’s PWA
    support
    - A PWA use case that works on
    your (comparably modern)
    smartphone & desktop PC
    - Lots of fun
    Hands on!
    Progressive Web Apps

    View Slide

  4. Progressive Web Apps
    Hands on!
    - Das PWA-Anwendungsmodell
    - Web App Manifest
    - Service Worker und Cache API
    - Workbox: Toolkit für PWAs
    - Angular-Unterstützung für PWAs
    - Natives Look & Feel
    - Migrieren & veröffentlichen
    - Payment Request API & Apple Pay
    www.rheinwerk-verlag.de/4707

    View Slide

  5. 13:30–15:00 Block 1
    15:00–15:30 Break
    15:30–17:00 Block 2
    Timetable
    Hands on!
    Progressive Web Apps

    View Slide

  6. Progressive Web Apps
    Hands on!
    https://blogs.windows.com/windowsdeveloper/2019/11/25/developing-for-the-new-category-of-dual-screen-devices-built-for-mobile-productivity/

    View Slide

  7. Progressive Web Apps
    Hands on!
    Cross-Platform Sample
    https://pwapraxis.liebel.io

    View Slide

  8. - The next best to-do list app
    - Create & read to-dos
    - Progressive Web App: installable
    - Responsive: one size fits all
    - Offline-first: synchronize to-do list with
    backend using IndexedDB & Dexie.js
    - No user context, sorry
    Demo Use Case
    Hands on!
    Progressive Web Apps

    View Slide

  9. Setup
    Node.js: https://nodejs.org (v12+)
    Angular CLI: npm i -g @angular/cli
    Google Chrome
    Editor
    Let’s get started
    Hands on!
    Progressive Web Apps

    View Slide

  10. ng new my-pwa --routing --style css
    cd my-pwa
    Angular CLI
    LAB #1
    Hands on!
    Progressive Web Apps

    View Slide

  11. Hands on!
    Progressive Web Apps
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive

    View Slide

  12. Platform Support
    PWA Status Quo
    Hands on!
    Progressive Web Apps
    17
    11.1
    44
    40 4.1
    Chrome 40
    11.3

    View Slide

  13. Responsive
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  14. One size fits all
    A single website layout for different screen
    resolutions (typically related to the
    screen’s width)
    Definition of trigger points at which the
    layout changes
    Mobile first: Create (minimal) mobile views
    first, then proceed with larger screens, so
    all devices get the best experience
    Key technologies: CSS3 Media Queries,
    CSS Flexible Box Layout, CSS Grid Layout
    Progressive Web Apps
    Hands on!
    Responsive

    View Slide

  15. Frameworks
    • Angular Material
    • ngx-admin
    • Bootstrap
    • Foundation
    • Framework7
    • Custom-tailored solution
    Progressive Web Apps
    Hands on!
    Responsive

    View Slide

  16. ng add @angular/material
    Responsive
    LAB #2
    Hands on!
    Progressive Web Apps

    View Slide

  17. Linkable
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  18. Reference Apps and Internal App States
    Goal: Directly link to applications or application states/views (deep link)
    Key technology for references in the World Wide Web: Hyperlinks
    Schema for hyperlinks: Uniform Resource Locator (URL)
    Solved in Angular via Routing (for views and states)
    Linkable
    Hands on!
    Progressive Web Apps

    View Slide

  19. ng g c todos
    ng g c about

    Linkable
    LAB #3
    Hands on!
    Progressive Web Apps

    View Slide

  20. Discoverable
    Progressive Web Apps
    Hands on!
    PWA Features

    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
    Hands on!
    Progressive Web Apps

    View Slide

  22. manifest.webmanifest
    {
    "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 Age Rating
    Additional Config
    Description
    Related Apps
    Hands on!
    Progressive Web Apps

    View Slide

  23. manifest.webmanifest
    {
    "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
    Hands on!
    Progressive Web Apps

    View Slide

  24. Angular CLI & PWA Schematic
    ng add @angular/pwa
    Web App Manifest
    LAB #4
    Hands on!
    Progressive Web Apps

    View Slide

  25. Shortcuts (upcoming)
    Progressive Web Apps
    Hands on!
    Web App Manifest

    View Slide

  26. Badging API (upcoming)
    Progressive Web Apps
    Hands on!
    Web App Manifest

    View Slide

  27. Installable
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  28. manifest.webmanifest
    {
    "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
    Hands on!
    Progressive Web Apps

    View Slide

  29. Progressive Web Apps
    Hands on!

    View Slide

  30. Progressive Web Apps
    Hands on!
    Installable

    View Slide

  31. Web App Manifest
    Adjust the Web App Manifest
    (manifest.webmanifest) to your needs
    Run ng build --prod
    Test it by adding the app to your
    home screen
    Installable
    LAB #5
    Hands on!
    Progressive Web Apps

    View Slide

  32. App-Like
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  33. 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
    WebXR
    WebRTC
    WebGL
    Speech Synthesis
    Web Cryptography API
    IndexedDB
    Geolocation
    Canvas
    Media Capture and Streams
    Hands on!
    Progressive Web Apps

    View Slide

  34. Native look & feel
    Progressive Web Apps
    Hands on!
    App-like

    View Slide

  35. ng generate @angular/material:nav nav
    Progressive Web Apps
    Hands on!
    Generate Navigation
    LAB #6

    View Slide

  36. Connectivity
    Independent
    Part 1
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  37. Progressive Web Apps
    Hands on!
    Offline capability with Service Worker
    System
    Website
    HTML/JS
    Cache
    Storage
    Remote
    storage
    Server
    Internet
    fetch HTTP
    Service
    Worker

    View Slide

  38. Overview
    Implements a “one-size-fits-all” service worker
    Instrumented via ngsw-config.json
    Restricted feature set (e.g., no communication between app and SW)
    • Initial caching of static content
    • Caching external content
    • Dynamic Caching
    • Push notifications
    @angular/service-worker
    Hands on!
    Progressive Web Apps

    View Slide

  39. Debugging
    More information on installed
    service workers can be found on
    • chrome://serviceworker-
    internals (Google Chrome)
    • about:serviceworkers
    (Mozilla Firefox)
    Progressive Web Apps
    Hands on!
    Service Worker

    View Slide

  40. Debugging
    Debug Service Workers using
    Chrome Developer Tools
    Progressive Web Apps
    Hands on!
    Service Worker
    LAB #7

    View Slide

  41. Fresh
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  42. 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.
    Progressive Web Apps
    Hands on!
    Fresh

    View Slide

  43. @angular/service-worker Update Process
    Progressive Web Apps
    Hands on!
    Fresh
    V1 V2 V2
    V1 V1 V2
    Server
    Browser

    View Slide

  44. 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.
    Progressive Web Apps
    Hands on!
    Fresh

    View Slide

  45. App-like, Connectivity Independent, Fresh
    Check for application updates
    swUpdate.available.subscribe(() => …);
    Progressive Web Apps
    Hands on!
    Fresh
    LAB #8

    View Slide

  46. Connectivity
    Independent
    Part 2
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  47. Orthogonal to Service Workers
    The web platform has different techniques to store arbitrary data (e.g.
    application state) offline:
    • Web Storage API (Local Storage/Session Storage—synchronous!)
    • Cookies (inconvenient)
    • IndexedDB
    Progressive Web Apps
    Hands on!
    Offline Capability

    View Slide

  48. IndexedDB
    Progressive Web Apps
    Hands on!
    Offline Capability

    View Slide

  49. 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
    Hands on!
    Offline Capability

    View Slide

  50. Dexie.js
    Dexie is a minimalistic wrapper for IndexedDB
    Operations are based on promises instead of callbacks
    Near native performance (also for bulk inserts)
    Open-source
    Progressive Web Apps
    Hands on!
    Offline Capability

    View Slide

  51. IndexedDB
    Model
    { "id": "2db0d3e5-…", "title": "Angular lernen", "done": false }
    Install packages
    npm i dexie uuid --save-dev
    Dexie.js Table API
    Implement a TodoService with getAll & add methods
    Progressive Web Apps
    Hands on!
    Offline Capability LAB #9

    View Slide

  52. Safe
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  53. 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
    Problem: TLS certificates are required (costs/renewal)
    Safe
    Hands on!
    Progressive Web Apps

    View Slide

  54. Free with automatic renewal
    Initiative of the Linux Foundation
    Automatic domain validation (Class 1)
    Website/Webservice has to be public available
    Period of validity: Comparatively short (90 days)
    Usage of TLS/SSL as easy as possible
    Plugins are available for IIS, Apache, Microsoft Azure, Plesk, … free!
    Let’s Encrypt
    Hands on!
    Progressive Web Apps

    View Slide

  55. Re-engageable
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  56. Get the user back with notifications
    Progressive Web Apps
    Hands on!
    Re-Engageable
    Ä
    Peter and 12 other people like your
    photo.
    SOCIAL NETWORK 08:12
    Only today! 350 golden diamonds 💎
    for $3.49!!
    PAY TO WIN GAME 11:19

    View Slide

  57. Push API
    Progressive Web Apps
    Hands on!
    Re-Engageable
    17

    44
    44

    View Slide

  58. Limitations
    Not supported by Apple Safari on desktop and mobile
    - Safari Push Notfications: an alternative for the desktop platform
    - No information on whether or when push will be supported
    BUT: You can make a difference!
    Let the WebKit team know what you want to build with Push API:
    https://liebel.io/pushbug
    Progressive Web Apps
    Hands on!
    Re-Engageable

    View Slide

  59. Progressive
    Progressive Web Apps
    Hands on!
    PWA Features

    View Slide

  60. Advance with Progressive Enhancement
    Idea: Use available interfaces and functions of a system
    Users with modern, feature-rich browsers are getting better experience
    Apps are available on older browsers but with limited functionality
    Concept: Browser feature support grows over time—thereby more users
    can enjoy an increasing number of app features
    Progressive Web Apps
    Hands on!
    Progressive

    View Slide

  61. Progressive Web Apps
    Hands on!

    View Slide

  62. Progressive Web Apps
    Hands on!
    PWAs & App Stores
    (US)

    View Slide

  63. Native App Packaging
    Hands on!
    Progressive Web Apps
    JS
    HTML
    CSS
    .ipa
    .exe .app ELF
    .apk .appx
    Single-Page
    Application
    Cordova
    Electron

    View Slide

  64. Progressive Web Apps
    Hands on!
    Where’s the Web Heading to?

    View Slide

  65. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    [email protected]

    View Slide