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!

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
    christian.liebel@thinktecture.com
    

    View Slide