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

PWA, IWA, Electron: What’s the future of web-ba...

PWA, IWA, Electron: What’s the future of web-based app deployment?

If your app needs very deep native integration, there's currently 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. On the other hand, there are Progressive Web Apps (PWA), that became 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 Electron 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

April 26, 2023
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

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

    Christian Liebel @christianliebel Consultant
  2. Hello, it’s me. PWA, IWA, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron What's the future of web-based app deployment? Progressive Web Apps
  13. The Problem (1) PWA, IWA, Electron What's the future of

    web-based app deployment? Isolated Web Apps
  14. The Problem (1) PWA, IWA, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron What's the future of web-based app deployment? Isolated Web Apps
  20. Deployment PWA, IWA, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, not implemented yet PWA, IWA, Electron What's the future of web-based app deployment? Isolated Web Apps
  27. Deployment PWA, IWA, Electron What's the future of web-based app

    deployment? Electron JS HTML CSS .exe .app ELF Single-Page Application
  28. PWA, IWA, Electron 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, Electron 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, Electron 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, Electron 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) – Potentially better performance – Cross-platform: support for iOS und Android planned for version 2 PWA, IWA, Electron 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, Electron What's the future of web-based app deployment? Tauri
  34. PWA, IWA, Electron 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 an Electron or Tauri 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, Electron What's the future of web-based app deployment? Recap