Cross-Platform mit Capacitor und deiner Web-App

Was bedeutet Cross-Platform und was ist eine hybride Anwendung? Wie profitieren wir von Capacitor und wo unterscheidet es sich von anderen Technologien wie Flutter?

In dieser Session zeigt Max Marschall, wie du mit einer bestehenden Web-App über die APIs und das Plug-in-System von Capacitor neue Plattformen erschließen kannst – ohne große App-Anpassungen und mit den bekannten Mitteln der Webentwicklung.

Dabei werden die Vor- und Nachteile einer hybriden App betrachtet und an einem Beispiel aus der Praxis bewertet.

Du lernst anhand von Live-Coding, wie du deine Web-App in eine Hybrid-App verwandeln kannst.

Transcript

1. Cross-Platform mit Capacitor und deiner Web-App Max Marschall @MaxOSchulte Consultant
2. enterJS Cross-Platform mit Capacitor und deiner Web-App
3. Cross-Platform mit Capacitor und deiner Web-App enterJS ➡
4. Max Marschall max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und Engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic / Capacitor und Babylon.js enterJS Cross-Platform mit Capacitor und deiner Web-App
5. Ionic Capacitor & Hybrid-Apps enterJS Java, C++, C#, VB Swing, Qt, XAML Cross-Platform mit Capacitor und deiner Web-App
6. Ionic Capacitor & Hybrid-Apps enterJS Java, C++, C#, VB Swing, Qt, XAML Cross-Platform mit Capacitor und deiner Web-App
7. Ionic Capacitor & Hybrid-Apps enterJS Ionic t Java, C++, C#, VB Swing, Qt, XAML Cross-Platform mit Capacitor und deiner Web-App
8. Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-Focused Capacitor vs Cordova Capacitor • Higher-Level-APIs • Plattform-Bridge • Includes commonly used plugins • Supports Cordova-Plugins enterJS Cross-Platform mit Capacitor und deiner Web-App
9. • Open Source Cross-Plattform Framework • Production-Ready • Tooling für Entwicklung und Produktion • Capacitor (und Cordova und Electron) als Plattform-Bridge • Enterprise & Community Plugins für Capacitor and Cordova Ionic Framework enterJS Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption Cross-Platform mit Capacitor und deiner Web-App
10. Layers WebView Capacitor UI (Ionic) HTML / CSS / JS enterJS Plattform Cross-Platform mit Capacitor und deiner Web-App
11. • Web Components (Stencil) • Android- / iOS-like Look-And-Feel • Optimiert für mobile Plattformen • Theme-Support mit CSS variablen UI-Layer UI (Ionic) HTML / CSS / JS WebView Capacitor enterJS Cross-Platform mit Capacitor und deiner Web-App
12. • iOS: WKWebView • Android: Chromium-based WebView for Android • Displaying content in apps • Served by an in app optimised HTTPS-server • PWAs are not inside a WebView WebView-Layer WebView Capacitor UI (Ionic) HTML / CSS / JS enterJS Cross-Platform mit Capacitor und deiner Web-App
13. • Bridge to platform-features • Toast & Camera etc. • Camera, Fingerprint, Storage • One API for all platforms • Supports Cordova plugins • Standalone Capacitor-Layer Capacitor WebVIew UI (Ionic) HTML / CSS / JS enterJS Cross-Platform mit Capacitor und deiner Web-App
14. enterJS Cross-Platform mit Capacitor und deiner Web-App
15. iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE enterJS Debugging Cross-Platform mit Capacitor und deiner Web-App
16. Get File Input Hidden DOM Read File & Convert enterJS Cross-Platform mit Capacitor und deiner Web-App
17. Main. Use Capacitor plugins with UI main.ts Usage enterJS Cross-Platform mit Capacitor und deiner Web-App
18. Unsolved • SDK Management • Many different devices • Kotlin / Java Cross-Plattform • macOS • Swift / Objective-C • Speacial features (3D Touch, Radar) • Play Store & App Store access • Vendor policies • Testing • Deployment / Testing • Access Rights & Permissions enterJS Cross-Platform mit Capacitor und deiner Web-App
19. Electron, Cordova …. enterJS Cheat Sheets Cross-Platform mit Capacitor und deiner Web-App https://www.thinktecture.com/digital-content/electron-cordova- pwa/
20. Ionic, Capacitor … enterJS Cheat Sheets Cross-Platform mit Capacitor und deiner Web-App https://www.thinktecture.com/digital-content/ionic-fuer-web- apps/
21. https://www.thinktecture.com/max-marschall Max Marschall @MaxOSchulte Architect / Consultant Vielen Dank