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
   

   View Slide

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
   

   View Slide

3. PWA, TWA, Capacitor, Electron
   Which one should I choose?
   

   View Slide

4. Progressive
   Web Apps
   Trusted Web
   Activities
   Capacitor Electron
   PWA, TWA, Capacitor, Electron
   Which one should I choose?
   

   View Slide

5. PWA, TWA, Capacitor, Electron
   Which one should I choose?
   Responsive Linkable Discoverable Installable App-like
   Connectivity
   Independent
   Fresh Safe Re-engageable Progressive
   

   View Slide

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
   

   View Slide

7. Install Experience
   PWA, TWA, Capacitor, Electron
   Which one should I choose?
   Progressive Web Apps
   

   View Slide

8. Web Native
   Web App Gap
   PWA, TWA, Capacitor, Electron
   Which one should I choose?
   Progressive Web Apps
   Web App Gap
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. PWA, TWA, Capacitor, Electron
    Which one should I choose?
    Project Fugu
    https://fugu-tracker.web.app/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. https://paint.js.org
    PWA, TWA, Capacitor, Electron
    Which one should I choose?
    LIVE DEMO
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Progressive
    Web Apps
    Trusted Web
    Activities
    Capacitor Electron
    PWA, TWA, Capacitor, Electron
    Which one should I choose?
    

    View Slide

19. PWA, TWA, Capacitor, Electron
    Which one should I choose?
    TWA
    

    View Slide

20. Bubblewrap
    PWA, TWA, Capacitor, Electron
    Which one should I choose?
    TWA
    https://github.com/GoogleChromeLabs/bubblewrap
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Progressive
    Web Apps
    Trusted Web
    Activities
    Capacitor Electron
    PWA, TWA, Capacitor, Electron
    Which one should I choose?
    

    View Slide

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
    

    View Slide

26. PWA, TWA, Capacitor, Electron
    Which one should I choose?
    https://appfigures.com/top-sdks/development/all
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Progressive
    Web Apps
    Trusted Web
    Activities
    Capacitor Electron
    PWA, TWA, Capacitor, Electron
    Which one should I choose?
    

    View Slide

31. PWA, TWA, Capacitor, Electron
    Which one should I choose?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. PWA, TWA, Capacitor, Electron
    Which one should I choose?
    Target Platforms
    PROGRESSIVE WEB APPS
    CAPACITOR
    ELECTRON
    + cars, smart fridges, …
    

    View Slide

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
    

    View Slide

37. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide