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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

December 05, 2019
Tweet

Transcript

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

    Liebel @christianliebel Consultant
  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
  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
  4. Application Models Mac Catalyst Progressive Web Apps Progressive Web Apps

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

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

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

    UI pwapraxis.liebel.io
  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
  12. Responsive Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus

    PWA Features
  13. Frameworks • Angular Material • ngx-admin • Bootstrap • Foundation

    • Framework7 • Custom-tailored solution Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus Responsive
  14. Linkable Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus

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

    PWA Features
  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 <link rel="manifest" href="manifest.webmanifest"> Discoverable Cross-Plattform-Apps über iOS und macOS hinaus Progressive Web Apps
  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
  19. Apple-Proprietary Styling Status Bar Style <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> Home Screen

    Icon <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png"> Launch Screen <link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel- ratio: 2)" href="/apple-launch-2048x2732.png"> Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus Web App Manifest
  20. Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus Title

    provided by Web App Manifest Icon provided by apple-touch-icon
  21. https://webkit.org/status/#specification-web-app-manifest Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus

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

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

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

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

    PWA Features
  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
  27. Native Look & Feel Progressive Web Apps Cross-Plattform-Apps über iOS

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

    hinaus PWA Features
  29. App Assets Service Worker Structured Data IndexedDB Progressive Web Apps

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

    Connectivity Independent
  34. IndexedDB Browser Support Progressive Web Apps Cross-Plattform-Apps über iOS und

    macOS hinaus Connectivity Independent 10 7.1 4 11
  35. Fresh Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus

    PWA Features
  36. Update Process Progressive Web Apps Cross-Plattform-Apps über iOS und macOS

    hinaus Fresh V1 V2 V2 V1 V1 V2 Server Browser
  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
  38. Safe Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus

    PWA Features
  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
  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
  41. Re-engageable Progressive Web Apps Cross-Plattform-Apps über iOS und macOS hinaus

    PWA Features
  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
  43. Push API Progressive Web Apps Cross-Plattform-Apps über iOS und macOS

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

    PWA Features
  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
  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
  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
  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
  53. Payment Request API Progressive Cross-Plattform-Apps über iOS und macOS hinaus

    Progressive Web Apps 15 11.1 64 61
  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
  55. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com