Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

April 26, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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