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
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