PWA, IWA, Tauri: The Future of Web-based App Deployment?

If your app needs deep platform-specific integration, there's no way around GitHub's Electron. This wrapper bundles Node.js and Chromium to allow web-based applications to access all interfaces platform-specific applications can. Electron is contested by Tauri, where app bundles are significantly smaller, and application backends can be written in Rust. On the other hand, Progressive Web Apps (PWA) have become ever more powerful over the last couple of years. While the web app gap continues to get smaller, it will never completely go away, as the trust model of the web won't allow some APIs to be made generally available. This is where Isolated Web Apps (IWA) come in. This proposal by Google could make wrappers like Electron or Tauri obsolete, as powerful web apps can be run right inside your browser. This is possible by an additional trust anchor: deploying your app through a store. Christian Liebel from Thinktecture shows you the different application models with their advantages and disadvantages.

Transcript

1. PWA, IWA, Tauri
   What's the future of web-based app
   deployment?
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Hello, it’s me.
   PWA, IWA, Tauri
   What's the future of web-based app deployment?
   Christian Liebel
   Twitter:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Angular & PWA
   Slides:
   thinktecture.com
   /christian-liebel
   

   View Slide

3. PWA, IWA, Tauri
   What's the future of web-based app deployment?
   

   View Slide

4. PWA IWA Tauri
   PWA, IWA, Tauri
   What's the future of web-based app deployment?
   

   View Slide

5. PWA, IWA, Tauri
   What's the future of web-based app deployment?
   Responsive Linkable Discoverable Installable App-like
   Connectivity
   Independent
   Fresh Safe Re-engageable Progressive
   

   View Slide

6. PWA, IWA, Tauri
   What's the future of web-based app deployment?
   

   View Slide

7. Deployment
   PWA, IWA, Tauri
   What's the future of web-based app deployment?
   Progressive Web Apps
   Browser
   Internet
   Single-Page
   Application
   Cache
   fetch
   JS
   HTML
   CSS
   Server
   Service
   Worker
   

   View Slide

8. Install Experience
   PWA, IWA, Tauri
   What's the future of web-based app deployment?
   Progressive Web Apps
   

   View Slide

9. Project Fugu
   PWA, IWA, Tauri
   What's the future of web-based app deployment?
   Progressive Web Apps
   »Let’s bring the web
   back – API by API«
   Thomas Steiner, Google
   

   View Slide

10. Project Fugu
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    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, IWA, Tauri
    What's the future of web-based app deployment?
    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, IWA, Tauri
    What's the future of web-based app deployment?
    Progressive Web Apps
    Feature Detection
    Browser takes care of
    calling OS-level APIs
    

    View Slide

13. Browser
    Cross-Platform Web APIs
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Progressive Web Apps
    window.showOpenFilePicker();
    Intent.ACTION_GET_CONTENT IFileDialog
    …
    NSOpenPanel
    

    View Slide

14. Web Platform-specific
    Web App Gap
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Progressive Web Apps
    Web App Gap
    

    View Slide

15. 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, IWA, Tauri
    What's the future of web-based app deployment?
    Progressive Web Apps
    

    View Slide

16. Disadvantages
    - Web App Gap
    - not all platform-specific APIs are available on the web platform
    - expected to get smaller thanks to Project Fugu
    - but will never fully go away
    - not all web APIs are available in every browser
    - No control over execution environment
    - Requires an up-to-date browser
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Progressive Web Apps
    

    View Slide

17. PWA IWA Tauri
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    

    View Slide

18. The Problem (1)
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

19. The Problem (1)
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    https://blog.cloudflare.com/cloudflare-verifies-code-whatsapp-web-serves-users/
    

    View Slide

20. The Problem (2)
    const remoteAddress = 'example.com';
    const remotePort = 7;
    const options = { noDelay: false, keepAlive: true,
    keepAliveDelay: 720_000 };
    const tcpSocket = new TCPSocket(remoteAddress, remotePort,
    options);
    const { readable, writable } = await tcpSocket.opened;
    // …
    tcpSocket.close();
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

21. The Problem (2)
    – Google wanted to introduce the Direct Sockets API to give web apps
    access to arbitrary external services (beyond HTTP(S), WebSockets
    and WebRTC)
    – Security and privacy concerns were raised
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

22. The Problem (3)
    Can we enable such APIs in a safer context?
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

23. Isolated Web Apps (IWAs) are
    an extension of existing work
    on PWA installation and Web
    Packaging that provide
    stronger protections against
    server compromise and other
    tampering that is necessary
    for developers of security-
    sensitive applications.
    https://chromestatus.com/feature/5146307550248960
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

24. Rather than being hosted on live web servers and fetched over HTTPS,
    these applications are packaged into Web Bundles, signed by their
    developer, and distributed to end-users through:
    – A raw signed Web Bundle
    – A platform-specific installation package such as an APK, MSI or DMG
    – An operating system, browser or third-party “app store”
    – Enterprise system configuration management infrastructure
    https://github.com/WICG/isolated-web-apps/blob/main/README.md
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

25. Deployment
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    JS
    HTML CSS
    Enterprise
    Deploy
    App
    Store
    MSI,
    APK, …
    Signed Web Bundle
    Platform-
    specific
    

    View Slide

26. Distribution
    All apps need to be signed
    App updates are explicit, i.e. a new version needs to be released
    (with a higher version number/timestamp to prevent downgrade
    attacks)
    All packages must be signed with the same signing key
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

27. URI Scheme
    An isolated URI scheme is used:
    isolated-app://signed-web-bundle-id/path/foo.js?query#fragment
    signed-web-bundle-id matches Base32-coded public key of the app,
    e.g. aerugqztij5biqquuk3mfwpsaibuegaqcitgfchwuosuofdjabzqaaic
    https://github.com/WICG/isolated-web-apps/blob/main/Scheme.md
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

28. Security
    Content-Security-Policy: base-uri 'none';
    default-src 'self';
    object-src 'none';
    frame-src 'self' https: blob: data:;
    connect-src 'self' https:;
    script-src 'self' 'wasm-unsafe-eval';
    img-src 'self' https: blob: data:;
    media-src 'self' https: blob: data:;
    font-src 'self' blob: data:;
    require-trusted-types-for 'script';
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

29. It’s all coming back to me now
    Spec work on the TCP and UDP Socket API wasn’t completed (~2013)
    Firefox OS used a similar packaged app solution (app:// scheme)
    Microsoft allows uploading web-based UWPs to the Windows Store that
    are allowed to access any UWP APIs
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

30. Advantages
    - Stronger security, additional trust anchors
    - Deployed through traditional methods
    - May allow even more powerful APIs to be shipped
    - Still web-based and cross-platform, code may be shared with a PWA
    - Using open standards
    - Without the bloat of electron
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

31. Disadvantages
    - No control over execution environment
    - Deployment is less convenient
    - Limited linkability
    - Very early stages
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

32. Status Quo
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Isolated Web Apps
    

    View Slide

33. PWA IWA Tauri
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    

    View Slide

34. PWA, IWA, Tauri
    What's the future of web-based app deployment?
    

    View Slide

35. Deployment
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Electron
    JS
    HTML
    CSS
    .exe .app ELF
    Single-Page
    Application
    

    View Slide

36. PWA, IWA, Tauri
    What's the future of web-based app deployment?
    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

37. Advantages
    - Many desktop target platforms
    - Windows, macOS, Ubuntu, Debian, Fedora
    - macOS App Store, Microsoft Store, Snapcraft
    - Access to all platform-specific APIs
    - Well-defined runtime environment (Chromium and Node.js)
    - Integration scenarios with platform-specific applications
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Electron
    

    View Slide

38. 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, IWA, Tauri
    What's the future of web-based app deployment?
    Electron
    

    View Slide

39. – Uses the platform-specific web view for rendering the web content
    (WebView2 on Windows, WebKit on macOS, WebKitGTK on Linux)
    – Support for iOS and Android planned for v2
    – Uses Rust for the backend (non-exclusive)
    – Security First: No server required for backend communication, API
    surface can be reduced, …
    – Backed by 1Password, Cloudflare, DigitalOcean, Netlify and others
    – Advanced tooling (self-updater, installer build process, …)
    – CLI: create-tauri-app
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Tauri
    

    View Slide

40. Advantages
    – Using built-in web views reduces bundle size significantly
    (starting at around 600 K)
    – More secure
    – Ahead of time compilation
    – Potentially better performance
    – Cross-platform: support for iOS und Android planned for version 2
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Tauri
    

    View Slide

41. Disadvantages
    - Different web views: platform and API support will vary, additional
    testing effort
    - The new kid on the block
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Tauri
    

    View Slide

42. PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Target Platforms
    PROGRESSIVE WEB APPS
    + cars, smart fridges, …
    ELECTRON
    ISOLATED WEB APPS
    TAURI
    

    View Slide

43. - Developers should aim for Progressive Web Apps
    - If required (due to missing capabilities or security considerations),
    web apps can be (additionally) wrapped in a Tauri or Electron
    container à your web app investment always pays off!
    - Isolated Web Apps may change the game in the future
    - Feature-detect modern web APIs and use them, fall back to
    Tauri/Capacitor/IWA APIs or alternatives if unavailable
    - Report your use cases and missing web capabilities to browser
    vendors
    PWA, IWA, Tauri
    What's the future of web-based app deployment?
    Recap
    

    View Slide

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

    View Slide