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

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

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide