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
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?
4. PWA IWA Tauri PWA, IWA, Tauri What's the future of web-based app deployment?
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
6. PWA, IWA, Tauri What's the future of web-based app deployment?
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
8. Install Experience PWA, IWA, Tauri What's the future of web-based app deployment? Progressive Web Apps
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
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
11. PWA, IWA, Tauri What's the future of web-based app deployment? 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, IWA, Tauri What's the future of web-based app deployment? Progressive Web Apps Feature Detection Browser takes care of calling OS-level APIs
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
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
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
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
17. PWA IWA Tauri PWA, IWA, Tauri What's the future of web-based app deployment?
18. The Problem (1) PWA, IWA, Tauri What's the future of web-based app deployment? Isolated Web Apps
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/
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
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
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
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
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
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
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
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
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
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
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
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
32. Status Quo PWA, IWA, Tauri What's the future of web-based app deployment? Isolated Web Apps
33. PWA IWA Tauri PWA, IWA, Tauri What's the future of web-based app deployment?
34. PWA, IWA, Tauri What's the future of web-based app deployment?
35. Deployment PWA, IWA, Tauri What's the future of web-based app deployment? Electron JS HTML CSS .exe .app ELF Single-Page Application
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
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
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
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
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
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
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
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
44. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com