Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

PWA, IWA, Tauri: The Future of Web-based App De...

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.

Christian Liebel

October 25, 2023
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

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

    Christian Liebel @christianliebel Consultant
  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
  3. 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
  4. 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
  5. 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
  6. 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
  7. PWA, IWA, Tauri What's the future of web-based app deployment?

    Project Fugu https://fugu-tracker.web.app/
  8. 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
  9. 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
  10. Web Platform-specific Web App Gap PWA, IWA, Tauri What's the

    future of web-based app deployment? Progressive Web Apps Web App Gap
  11. 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
  12. 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
  13. The Problem (1) PWA, IWA, Tauri What's the future of

    web-based app deployment? Isolated Web Apps
  14. 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/
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. Deployment PWA, IWA, Tauri What's the future of web-based app

    deployment? Electron JS HTML CSS .exe .app ELF Single-Page Application
  28. 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
  29. 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
  30. 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
  31. – 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
  32. 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
  33. 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
  34. 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
  35. - 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