Slide 1

Slide 1 text

Electron, Capacitor, PWA Was, wann, wie und warum Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

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 Applications Thema Sprecher Datum, Uhrzeit Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung Andreas Wissel DO, 23. September 2021, 09.15 bis 10.15 Realtime Cross-Plattform-Applikationen mit Angular, ASP.NET Core und SignalR Fabian Gosebrink DO, 23. September 2021, 10.45 bis 11.45 Angular & Ionic – Cross-Plattform aus einer Hand Max Schulte DO, 23. September 2021, 12.15 bis 13.15 Electron.NET – Neue Features, Tipps und Tricks Gregor Biswanger DO, 23. September 2021, 15.30 bis 16.30 Electron, Capacitor, PWA – was, wann, wie & warum? Christian Liebel DO, 23. September 2021, 17.00 bis 18.00

Slide 3

Slide 3 text

Hello, it’s me. Electron, Capacitor, PWA Was, wann, wie und warum Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Slide 4

Slide 4 text

Intro Progressive Web Apps Electron Capacitor Summary Electron, Capacitor, PWA Was, wann, wie und warum

Slide 5

Slide 5 text

Electron, Capacitor, PWA Was, wann, wie und warum »Cross-platform and cross-device development will become the norm in the next few years.« Christian Weyer

Slide 6

Slide 6 text

In 2021, the cross-platform story still works out – and it’s better than ever! Electron, Capacitor, PWA Was, wann, wie und warum Today One team One codebase Maximum reach

Slide 7

Slide 7 text

Electron, Capacitor, PWA Was, wann, wie und warum

Slide 8

Slide 8 text

Intro Progressive Web Apps Electron Capacitor Summary Electron, Capacitor, PWA Was, wann, wie und warum

Slide 9

Slide 9 text

Electron, Capacitor, PWA Was, wann, wie und warum Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive

Slide 10

Slide 10 text

Architecture Overview & Deployment Electron, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps Browser Internet Single-Page Application Cache fetch JS HTML CSS Server Service Worker

Slide 11

Slide 11 text

Install Experience Electron, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps

Slide 12

Slide 12 text

Web Native Web App Gap Electron, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps Web App Gap

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Project Fugu Electron, Capacitor, 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

Slide 15

Slide 15 text

Electron, Capacitor, PWA Was, wann, wie und warum Project Fugu https://fugu-tracker.web.app/

Slide 16

Slide 16 text

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, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps Feature Detection Browser takes care of calling OS-level APIs

Slide 17

Slide 17 text

Browser Cross-Platform Web APIs Electron, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps window.showOpenFilePicker(); Intent.ACTION_GET_CONTENT IFileDialog … NSOpenPanel

Slide 18

Slide 18 text

https://paint.js.org Electron, Capacitor, PWA Was, wann, wie und warum LIVE DEMO

Slide 19

Slide 19 text

Store Deployments (Simplified) Electron, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps https://example.com .appx .apk Server Microsoft Store Play Store Source Files

Slide 20

Slide 20 text

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, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps

Slide 21

Slide 21 text

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, Capacitor, PWA Was, wann, wie und warum Progressive Web Apps

Slide 22

Slide 22 text

Deployment Electron, Capacitor, PWA Was, wann, wie und warum Electron/Capacitor JS HTML CSS .ipa .exe .app ELF .apk Single-Page Application Capacitor Electron

Slide 23

Slide 23 text

Intro Progressive Web Apps Electron Capactior Summary Electron, Capacitor, PWA Was, wann, wie und warum

Slide 24

Slide 24 text

Electron, Capacitor, PWA Was, wann, wie und warum

Slide 25

Slide 25 text

Electron, Capacitor, 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

Slide 26

Slide 26 text

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, Capacitor, PWA Was, wann, wie und warum Electron

Slide 27

Slide 27 text

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, Capacitor, PWA Was, wann, wie und warum Electron

Slide 28

Slide 28 text

Alternatives Tauri https://github.com/tauri-apps/tauri Windows: WebView2 macOS: WebKit Linux: WebKitGTK Smaller binaries, but different browser environments Electron, Capacitor, PWA Was, wann, wie und warum Electron

Slide 29

Slide 29 text

Intro Progressive Web Apps Electron Capacitor Summary Electron, Capacitor, PWA Was, wann, wie und warum

Slide 30

Slide 30 text

– Provided by Ionic – Native projects are source assets (instead of build assets) – Backwards-compatible with Cordova (and many of its plug-ins) Electron, Capacitor, PWA Was, wann, wie und warum Capacitor

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Electron, Capacitor, 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

Slide 33

Slide 33 text

Advantages - Supports app development for iOS, Android - Access to all native APIs - Official App Store deployments Electron, Capacitor, PWA Was, wann, wie und warum Capacitor

Slide 34

Slide 34 text

Disadvantages - Plug-ins are often outdated - App store membership required - Dependent on guidelines and goodwill of platform provider - App/update validation can take several hours or days Electron, Capacitor, PWA Was, wann, wie und warum Capacitor

Slide 35

Slide 35 text

Electron, Capacitor, PWA Was, wann, wie und warum https://www.heise.de/news/Epic-Games-CEO-wirft-Apple-Monopolpraktiken-vor-6035278.html (04.05.2021)

Slide 36

Slide 36 text

Intro Progressive Web Apps Electron Capacitor Summary Electron, Capacitor, PWA Was, wann, wie und warum

Slide 37

Slide 37 text

Electron, Capacitor, PWA Was, wann, wie und warum Target Platforms PROGRESSIVE WEB APPS CAPACITOR ELECTRON + cars, smart fridges, …

Slide 38

Slide 38 text

- Developers should aim for Progressive Web Apps - If required, web apps can be (additionally) wrapped in a Capacitor or Electron container à your web app investment always pays off! - Consider Capacitor 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/Capacitor APIs or alternatives if unavailable - Report your use cases and missing web capabilities to browser vendors Electron, Capacitor, PWA Was, wann, wie und warum Recap

Slide 39

Slide 39 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected] PWA/Electron/Cordova Cheat Sheet