Progressive Web Apps: Cross-Plattform-Apps über iOS und macOS hinaus

Stellen Sie sich vor, Sie schreiben Ihre App einmal – und sie läuft nicht nur auf macOS und iOS, sondern auch noch auf Windows, Android, Linux, Chrome, Safari, Firefox und Edge! Der alte Java-Traum "Write once, run anywhere" wird mit den Progressive Web Apps endlich Wirklichkeit.

Christian Liebel stellt Ihnen das neue Anwendungsmodell abseits des App Store einschließlich seiner technologischen Grundlagen vor, und zeigt, was es leisten kann und wo die Grenzen der PWA liegen.

Transcript

1. Progressive Web Apps
   Cross-Plattform-Apps über iOS und
   macOS hinaus
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Hello, it’s me.
   Christian Liebel
   Follow me:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Cross-Platform Development &
   Serverless Cloud Architectures
   Cross-Plattform-Apps über iOS und macOS hinaus
   Progressive Web Apps
   

   View Slide

3. Progressive Web Apps
   Cross-Plattform-Apps über iOS und macOS hinaus
   - 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

4. Application Models
   Mac Catalyst
   Progressive Web Apps
   Progressive Web Apps
   Cross-Plattform-Apps über iOS und macOS hinaus
   Cross-Platform
   ☑ ☑
   ☑ ☑ ☑
   

   View Slide

5. Apps in 2007…
   https://www.youtube.com/watch?v=vN4U5FqrOdQ
   Cross-Plattform-Apps über iOS und macOS hinaus
   Progressive Web Apps
   

   View 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
   Cross-Plattform-Apps über iOS und macOS hinaus
   Progressive Web Apps
   

   View Slide

7. Cross-Plattform-Apps über iOS und macOS hinaus
   Progressive Web Apps
   

   View Slide

8. Progressive Web Apps
   HTML5, JavaScript, CSS3
   Service Worker API
   Fetch API
   Web
   Notifications
   Web Workers Push API
   Web App
   Manifest
   HTTPS
   PWA Technology Overview
   Cross-Plattform-Apps über iOS und macOS hinaus
   Progressive Web Apps
   

   View Slide

9. Platform Support
   PWA Status Quo
   Cross-Plattform-Apps über iOS und macOS hinaus
   Progressive Web Apps
   17
   11.1
   44
   40 4.1
   Chrome 40
   11.3
   

   View Slide

10. Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Cross-Platform UI
    pwapraxis.liebel.io
    

    View Slide

11. Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive
    

    View Slide

12. Responsive
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

13. Frameworks
    • Angular Material
    • ngx-admin
    • Bootstrap
    • Foundation
    • Framework7
    • Custom-tailored solution
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Responsive
    

    View Slide

14. Linkable
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

15. 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)
    • https://facebook.com takes you to Facebook
    • https://facebook.com/profile takes you to your profile
    Approximation in (mobile) operating systems: URI schemes (e.g.
    fb://profile)
    Linkable
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    

    View Slide

16. Discoverable
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

17. 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
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    

    View Slide

18. manifest.webmanifest
    {
    "short_name": "PWA-Demo",
    "name": "Meine PWA-Demo",
    "icons": [
    {
    "src": "assets/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
    }
    ],
    "start_url": "/index.html",
    "display": "standalone"
    }
    Web App Manifest
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    

    View Slide

19. Apple-Proprietary Styling
    Status Bar Style
    content="black-translucent">
    Home Screen Icon
    href="assets/icons/apple-touch-icon.png">
    Launch Screen
    
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Web App Manifest
    

    View Slide

20. Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Title provided by
    Web App Manifest
    Icon provided by
    apple-touch-icon
    

    View Slide

21. https://webkit.org/status/#specification-web-app-manifest
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    

    View Slide

22. Installable
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

23. Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    

    View Slide

24. Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Installable
    

    View Slide

25. App-Like
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

26. Native Functionality
    App-like
    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
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    

    View Slide

27. Native Look & Feel
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    App-like
    

    View Slide

28. Connectivity
    Independent
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

29. App Assets
    Service Worker
    Structured Data
    IndexedDB
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Connectivity Independent
    

    View Slide

30. Service Worker
    Worker snippet is executed in an own thread
    Worker can’t manipulate the parent document’s DOM
    Communication via thin API (postMessage)
    Acts as a controller/proxy/interceptor
    Performs background tasks
    Has to be installed before usage
    Relation: Scope (origin + path)
    Lifetime: Unrelated to tab/window
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Connectivity Independent
    

    View Slide

31. Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Service Worker as a controller/proxy/interceptor
    Service
    Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch
    

    View Slide

32. 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)
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Connectivity Independent
    

    View Slide

33. IndexedDB
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Connectivity Independent
    

    View Slide

34. IndexedDB Browser Support
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Connectivity Independent
    10
    7.1
    4
    11
    

    View Slide

35. Fresh
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

36. Update Process
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Fresh
    V1 V2 V2
    V1 V1 V2
    Server
    Browser
    

    View Slide

37. Update Notification
    Prompt users to reload the website in case there’s an update available.
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Fresh
    

    View Slide

38. Safe
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

39. 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
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    

    View Slide

40. PWAs Require HTTPS!
    Recurring Costs Free
    Manual Renewal Required
    Comodo
    GeoTrust
    Verisign
    DigiCert
    …
    ?
    Automatic Renewal ?
    Third-Party
    (Azure, GitHub, CloudFlare)
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Safe
    

    View Slide

41. Re-engageable
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

42. Get the user back with notifications
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    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

43. Push API
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Re-Engageable
    17
    —
    44
    44
    

    View Slide

44. 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
    Cross-Plattform-Apps über iOS und macOS hinaus
    Re-Engageable
    

    View Slide

45. Send an SMS
    ❌ Neither shows app name nor icon
    ❌ Tapping the notification opens Messages
    Advanced Progressive Web Apps
    Push Notifications Under Control
    “Polyfills” on iOS
    https://support.apple.com/en-us/HT201925
    

    View Slide

46. Wallet Push Notification
    Can show app name and icon
    Requires registering a pass first
    Tapping the notification opens the pass
    Advanced Progressive Web Apps
    Push Notifications Under Control
    “Polyfills” on iOS
    https://support.apple.com/en-us/HT204003
    

    View Slide

47. Native wrapper (Cordova)
    Shows app name and icon
    Tapping the notification opens the app
    Requires App Store distribution (!= PWA)
    Advanced Progressive Web Apps
    Push Notifications Under Control
    “Polyfills” on iOS
    

    View Slide

48. Progressive
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    PWA Features
    

    View Slide

49. 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
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive
    

    View Slide

50. Project Fugu
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive
    Contacts
    Picker
    Wake Lock
    API
    Native File
    System API
    Shape
    Detection API
    

    View Slide

51. Web API Concept (e.g. Web Share API)
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager
    …
    NSSharingServicePicker
    

    View Slide

52. Payment Request API
    Monetize your app with Payment
    Request API
    On Safari, Payment Request API is
    supported in combination with
    Apple Pay only
    Great for In-App Purchases, online
    shops, …
    Progressive
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    

    View Slide

53. Payment Request API
    Progressive
    Cross-Plattform-Apps über iOS und macOS hinaus
    Progressive Web Apps
    15
    11.1
    64
    61
    

    View Slide

54. PWA is a true cross-platform application model that covers all relevant
    platforms, including but not limited to iOS, iPadOS and macOS
    Connectivity independence, installability and monetization are
    supported by the iOS/iPadOS platform
    Push messages and background data synchronization are currently not
    supported
    The web platform currently moves more quickly than Apple keeps up
    (“Safari is The New Internet Explorer”?)
    Progressive Web Apps
    Cross-Plattform-Apps über iOS und macOS hinaus
    Summary
    

    View Slide

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

    View Slide