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.

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?
4. PWA IWA Electron PWA, IWA, Electron What's the future of web-based app deployment?
5. 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
6. PWA, IWA, Electron What's the future of web-based app deployment?
7. 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
8. Install Experience PWA, IWA, Electron What's the future of web-based app deployment? Progressive Web Apps
9. 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
10. 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
11. PWA, IWA, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, Electron What's the future of web-based app deployment? Progressive Web Apps
17. PWA IWA Electron PWA, IWA, Electron What's the future of web-based app deployment?
18. The Problem (1) PWA, IWA, Electron What's the future of web-based app deployment? Isolated Web Apps
19. 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/
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, Electron 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, Electron 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, Electron 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, Electron 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, Electron What's the future of web-based app deployment? Isolated Web Apps
25. 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
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, Electron 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, Electron 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, Electron 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, Electron 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, Electron 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, not implemented yet PWA, IWA, Electron What's the future of web-based app deployment? Isolated Web Apps
32. PWA IWA Electron PWA, IWA, Electron What's the future of web-based app deployment?
33. PWA, IWA, Electron What's the future of web-based app deployment?
34. Deployment PWA, IWA, Electron What's the future of web-based app deployment? Electron JS HTML CSS .exe .app ELF Single-Page Application
35. 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
36. 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
37. 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
38. – 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
39. 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
40. 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
41. 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
42. - 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
43. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com