PWA, TWA, Capacitor, Electron: Which one should I choose?

Write once, run anywhere—this old Java dream has long become reality thanks to web technologies. However, cross-platform developers have to choose between tried and tested approaches such as Ionic Capacitor and GitHub Electron, where a web application is packaged in a native container, and Progressive Web Apps (PWA), which are installed from the browser. To make the confusion complete, PWA can also be packaged as a native app using Trusted Web Activities (TWA). PWA expert Christian Liebel introduces you to the different technologies, and helps you to decide on the right cross-platform framework based on your requirements.

Transcript

1. PWA, TWA, Capacitor, Electron Which one should I choose? Christian Liebel @christianliebel Consultant
2. Hello, it’s me. PWA, TWA, Capacitor, Electron Which one should I choose? Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. PWA, TWA, Capacitor, Electron Which one should I choose?
4. Progressive Web Apps Trusted Web Activities Capacitor Electron PWA, TWA, Capacitor, Electron Which one should I choose?
5. PWA, TWA, Capacitor, Electron Which one should I choose? Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
6. Architecture Overview & Deployment PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps Browser Internet Single-Page Application Cache fetch JS HTML CSS Server Service Worker
7. Install Experience PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps
8. Web Native Web App Gap PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps Web App Gap
9. Project Fugu PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps »Let’s bring the web back – API by API« Thomas Steiner, Google
10. Project Fugu PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps Contacts Picker Screen Wake Lock API Picture in picture File System Access API Capability missing? http://bit.ly/new-fugu-request
11. PWA, TWA, Capacitor, Electron Which one should I choose? Project Fugu https://fugu-tracker.web.app/
12. 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 } PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps Feature Detection Browser takes care of calling OS-level APIs
13. Browser Cross-Platform Web APIs PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps window.showOpenFilePicker(); Intent.ACTION_GET_CONTENT IFileDialog … NSOpenPanel
14. https://paint.js.org PWA, TWA, Capacitor, Electron Which one should I choose? LIVE DEMO
15. Store Deployments (Simplified) PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps https://example.com .appx .apk Server Microsoft Store Galaxy Store Source Files
16. 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 - Fully backwards compatible - App store support (Microsoft Store, Samsung Galaxy Store) PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps
17. Disadvantages - 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 PWA, TWA, Capacitor, Electron Which one should I choose? Progressive Web Apps
18. Progressive Web Apps Trusted Web Activities Capacitor Electron PWA, TWA, Capacitor, Electron Which one should I choose?
19. PWA, TWA, Capacitor, Electron Which one should I choose? TWA
20. Bubblewrap PWA, TWA, Capacitor, Electron Which one should I choose? TWA https://github.com/GoogleChromeLabs/bubblewrap
21. Advantages - Same easy deployment model as for PWA - App store support for Google Play Store - Keep the existing user base - Helps target older devices PWA, TWA, Capacitor, Electron Which one should I choose? TWA
22. Disadvantages - No Apple App Store support - Web App Gap - No control over execution environment PWA, TWA, Capacitor, Electron Which one should I choose? TWA
23. Deployment PWA, TWA, Capacitor, Electron Which one should I choose? Electron/Capacitor JS HTML CSS .ipa .exe .app ELF .apk Single-Page Application Capacitor Electron
24. Progressive Web Apps Trusted Web Activities Capacitor Electron PWA, TWA, Capacitor, Electron Which one should I choose?
25. – Provided by Ionic – Native projects are source assets (instead of build assets) – Backwards-compatible with Cordova (and many of its plug-ins) PWA, TWA, Capacitor, Electron Which one should I choose? Capacitor
26. PWA, TWA, Capacitor, Electron Which one should I choose? https://appfigures.com/top-sdks/development/all
27. PWA, TWA, Capacitor, Electron Which one should I choose? 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
28. Advantages - Supports app development for iOS, Android - Access to all native APIs - Official App Store deployments PWA, TWA, Capacitor, Electron Which one should I choose? Capacitor
29. 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 PWA, TWA, Capacitor, Electron Which one should I choose? Capacitor
30. Progressive Web Apps Trusted Web Activities Capacitor Electron PWA, TWA, Capacitor, Electron Which one should I choose?
31. PWA, TWA, Capacitor, Electron Which one should I choose?
32. PWA, TWA, Capacitor, Electron Which one should I choose? 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
33. 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 PWA, TWA, Capacitor, Electron Which one should I choose? Electron
34. 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) PWA, TWA, Capacitor, Electron Which one should I choose? Electron
35. PWA, TWA, Capacitor, Electron Which one should I choose? Target Platforms PROGRESSIVE WEB APPS CAPACITOR ELECTRON + cars, smart fridges, …
36. - 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 will become less relevant 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 PWA, TWA, Capacitor, Electron Which one should I choose? Recap
37. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com