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

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

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

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

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

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

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

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

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

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

PWA, IWA, Tauri What's the future of web-based app deployment? Project Fugu https://fugu-tracker.web.app/

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

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

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

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

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

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

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

– 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

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

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

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

- 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

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]