Electron, Cordova, PWA – was, wann, wie und warum

Electron, Cordova, PWA – was, wann, wie und warum

Write once, run anywhere – dieser alte Java-Traum ist dank Webtechnologien längst Realität geworden. Neuerdings haben Cross-Platform-Entwickler aber die Wahl zwischen altbewährten Ansätzen wie Apache Cordova und GitHub Electron, bei denen Web-Apps in native Container verpackt werden, und den neuen Progressive Web Apps (PWA), bei denen eine Webanwendung aus dem Browser heraus installiert wird. Optisch geben sich beide Methoden nicht viel, doch sie unterscheiden sich hinsichtlich der Verteilung und im Funktionsumfang. Electron-Experte Thorsten Hans und PWA-Professional Christian Liebel erklären Ihnen, für welche Anwendungsfälle sich PWAs eignen und wann Sie ergänzend oder alternativ zu Electron oder Cordova greifen sollten.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

September 24, 2020
Tweet

Transcript

  1. Electron, Cordova, PWA Was, wann, wie und warum Thorsten Hans

    @ThorstenHans Consultant Christian Liebel @christianliebel Consultant
  2. Hello, it’s me. Electron, Cordova, PWA Was, wann, wie und

    warum Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. Focus: Cloud Native & Infrastructure as Code Consultant @ Thinktecture

    AG thorsten.hans@thinktecture.com thorsten.hans@gmail.com thinktecture.com thorsten-hans.com https://thns.io/slides @ThorstenHans Thorsten Hans Was, wann, wie und warum Electron, Cordova, PWA
  4. The image part with relationship ID rId12 was not found

    in the file. The image part with relationship ID rId12 was not found in the file. Special Day “Cross-Plattform” Thema Sprecher Datum, Uhrzeit Figma, Storybook und Angular: Toolchain für plattformunabhängige User Interfaces Andreas Wissel Do, 24. September 2020, 09.00 bis 10.00 Cross-Plattform-Apps für Desktop, Mobile und Web mit Electron, Cordova & Angular Fabian Gosebrink Do, 24. September 2020, 10.30 bis 11.30 Electron.NET: Cross-Plattform- Desktop-Software mit ASP.NET Core Gregor Biswanger Do, 24. September 2020, 12.00 bis 13.00 Electron, Cordova, PWA – was, wann, wie und warum Christian Liebel, Thorsten Hans Do, 24. September 2020, 15.45 bis 16.45 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Max Schulte Do, 24. September 2020, 17.15 bis 18.15
  5. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  6. Electron, Cordova, PWA Was, wann, wie und warum BASTA! Spring

    2013 »Cross-platform and cross- device development will become the norm in the next few years.« Christian Weyer
  7. In 2020, the cross-platform story still works out – and

    it’s better than ever! Electron, Cordova, PWA Was, wann, wie und warum Today One team One codebase Maximum reach
  8. Electron, Cordova, PWA Was, wann, wie und warum

  9. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  10. Electron, Cordova, PWA Was, wann, wie und warum Responsive Linkable

    Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  11. Architecture Overview & Deployment Electron, Cordova, PWA Was, wann, wie

    und warum Progressive Web Apps Browser Internet Single-Page Application Cache fetch JS HTML CSS Server Service Worker
  12. Install Experience Electron, Cordova, PWA Was, wann, wie und warum

    Progressive Web Apps
  13. Web Native Web App Gap Electron, Cordova, PWA Was, wann,

    wie und warum Progressive Web Apps Web App Gap
  14. Project Fugu Electron, Cordova, PWA Was, wann, wie und warum

    Progressive Web Apps »Let’s bring the web back – API by API« Thomas Steiner, Google
  15. Project Fugu Electron, Cordova, PWA Was, wann, wie und warum

    Progressive Web Apps Contacts Picker Screen Wake Lock API Picture in picture File System Access API Capability missing? http://bit.ly/new-fugu-request
  16. Electron, Cordova, PWA Was, wann, wie und warum Project Fugu

    https://goo.gle/fugu-api-tracker
  17. Fugu Example: File System Access API if ('showOpenFilePicker' in window)

    { const handle = await window.showOpenFilePicker(); const file = await handle.getFile(); // do something with the file } else { // use fallback API or disable feature in app } Electron, Cordova, PWA Was, wann, wie und warum Progressive Web Apps Feature Detection Browser takes care of calling OS-level APIs
  18. Browser Cross-Platform Web APIs Electron, Cordova, PWA Was, wann, wie

    und warum Progressive Web Apps window.showOpenFilePicker(); Intent.ACTION_GET_CONTENT IFileDialog … NSOpenPanel
  19. https://paint.js.org Electron, Cordova, PWA Was, wann, wie und warum LIVE

    DEMO
  20. Store Deployments (Simplified) Electron, Cordova, PWA Was, wann, wie und

    warum Progressive Web Apps https://example.com .appx .apk Server Microsoft Store Play Store Source Files
  21. Advantages - One single codebase, maximum reach - No app

    store, installation, third-party software, … required - No app store approvals required - Super easy deployment (SFTP is enough, no redeployment via MSI, …) - Latest app version is always available - App Store support for Microsoft Store, Google Play Store (Trusted Web Activity, TWA), Samsung Galaxy Store (currently US only) - Fully backwards compatible Electron, Cordova, PWA Was, wann, wie und warum Progressive Web Apps
  22. Disadvantages - No Apple App Store support (uploading PWAs is

    discouraged) - Web App Gap - not all native APIs are available on the web platform - expected to get smaller thanks to Project Fugu - not all web APIs are available in every browser - No control over execution environment - Requires an up-to-date browser If that’s an issue, web apps are still an option! Electron, Cordova, PWA Was, wann, wie und warum Progressive Web Apps
  23. Deployment Electron, Cordova, PWA Was, wann, wie und warum Electron/Cordova

    JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Application Cordova Electron
  24. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  25. Electron, Cordova, PWA Was, wann, wie und warum

  26. Electron, Cordova, PWA Was, wann, wie und warum Electron Architecture

    Desktop OS Electron Renderer Process (Chromium) Electron Main Process (Node.js) macOS Windows Linux Single-Page Application Electron API Custom Node.js Modules IPC Remote Node.js Electron- App
  27. Advantages - Many desktop target platforms - Windows 7+, macOS

    10.10+, Ubuntu, Debian, Fedora - macOS App Store, Microsoft Store, Snapcraft - Access to all native APIs - Well-defined runtime environment (Chromium and Node.js) - Integration scenarios with native applications Electron, Cordova, PWA Was, wann, wie und warum Electron
  28. Disadvantages - Wrapper is large in size (“hello world” starts

    with ~100 MB) - Outdated Node.js & Chromium versions may pose security risks to users – developers have to take care of regular updates of the wrapper - Each Electron instance leads to RAM overhead (e.g. Slack) Electron, Cordova, PWA Was, wann, wie und warum Electron
  29. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  30. Electron, Cordova, PWA Was, wann, wie und warum https://appfigures.com/top-sdks/development/all

  31. Electron, Cordova, PWA Was, wann, wie und warum Cordova Architecture

    Cordova Application Single-Page Application HTML JS CSS Assets Cordova Plugins Geolocation Notifications Media Camera Custom Plugins HTML Rendering Engine (WebView) Cordova Native APIs Cordova APIs HTML APIs Mobile OS Android iOS Windows 10 UWP and more… OS APIs OS APIs
  32. Alternative: Capacitor – Provided by Ionic – Different Workflow: native

    projects are source assets instead of build assets – Backwards-compatible with Cordova (and many of its plug-ins) Electron, Cordova, PWA Was, wann, wie und warum Cordova
  33. Advantages - Supports app development for iOS, Android, macOS, UWP

    (+ Electron, Web) - Access to all native APIs - Official App Store deployments Electron, Cordova, PWA Was, wann, wie und warum Cordova
  34. Disadvantages - Plug-ins are often outdated - Cordova’s web and

    Electron platforms are inconvenient to use - Dependent on guidelines and goodwill of platform provider - App/update validation can take several hours or days Electron, Cordova, PWA Was, wann, wie und warum Cordova
  35. Electron, Cordova, PWA Was, wann, wie und warum https://medium.com/quark-works/why-our-app-got-removed-from-the-google-play-store-how-we-fixed-it-4c8d430eafa0 https://www.nytimes.com/interactive/2019/09/09/technology/apple-app-store-competition.html

    https://www.theverge.com/2019/1/30/18203551/apple-facebook-blocked-internal-ios-apps
  36. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  37. Electron, Cordova, PWA Was, wann, wie und warum Target Platforms

    PROGRESSIVE WEB APPS CORDOVA ELECTRON + cars, smart fridges, …
  38. - Developers should aim for Progressive Web Apps - If

    required, web apps can be (additionally) wrapped in a Cordova or Electron container à your web app investment always pays off! - Consider Cordova and Electron as “uber-polyfills” that might become increasingly irrelevant in the future - Feature-detect modern web APIs and use them, fall back to Electron/Cordova APIs or alternatives if unavailable - Report your use cases and missing web capabilities to browser vendors Electron, Cordova, PWA Was, wann, wie und warum Recap
  39. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com

    Thorsten Hans @ThorstenHans thorsten.hans@thinktecture.com PWA/Electron/Cordova Cheat Sheet