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

Project Fugu 2022: Das sind die neuen PWA-Schnittstellen

Project Fugu 2022: Das sind die neuen PWA-Schnittstellen

Progressive Web Apps (PWA) sind ein plattformübergreifendes, webbasiertes Anwendungsmodell. Einmal geschrieben laufen diese Anwendungen überall, von Mobile bis Desktop. Project Fugu ist ein Zusammenschluss um die Chromium-Beitragenden Google, Microsoft und Intel, um Webanwendungen dank neuer Web-APIs mit weiteren Fähigkeiten auszustatten. Dank Fugu kamen zuletzt etwa der Zugriff auf die Zwischenablage oder das Dateisystem ins Web. Auch in diesem Jahr stehen wieder einige neue Schnittstellen auf dem Plan. PWA-Experte Christian Liebel von Thinktecture gibt eine Übersicht über das Unterfangen und zeigt Ihnen die neuesten Entwicklungen in diesem Gebiet.

Christian Liebel

October 12, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Christian Liebel
    @christianliebel
    Consultant

    View full-size slide

  2. Hello, it’s me.
    Fugu Update 2022
    These are the new PWA interfaces
    Christian Liebel
    Twitter:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Angular & PWA
    Slides:
    thinktecture.com
    /christian-liebel

    View full-size slide

  3. Overview
    - Joint effort by Google, Intel, Microsoft,
    and other Chromium contributors
    - Aims to bridge the gap between web
    applications and platform-specific apps
    - Introduces new capabilities to the web
    platform while maintaining the user’s
    security and privacy
    Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu

    View full-size slide

  4. Capabilities
    Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu
    File System Access Clipboard Access USB, Bluetooth Access

    View full-size slide

  5. Unlocking New Experiences
    Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu
    Photoshop Web Visual Studio Code Online

    View full-size slide

  6. APIs
    Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu
    Browser
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View full-size slide

  7. Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu
    https://goo.gle/fugu-api-tracker
    P

    View full-size slide

  8. API Maturity
    Under
    Consideration
    Started
    Developer
    Trial
    Origin
    Trial
    Shipped
    Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu

    View full-size slide

  9. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Fugu Update 2022
    These are the new PWA interfaces
    Agenda

    View full-size slide

  10. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Fugu Update 2022
    These are the new PWA interfaces
    Agenda

    View full-size slide

  11. Overview
    Register your PWA as a
    handler for file extensions
    (new: and define a file icon)
    Requires installing the
    application first
    Declare supported extensions
    in Web Application Manifest
    and add imperative code to
    your application logic
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  12. Web Application Manifest
    Distinguishes web apps from
    websites
    JSON based file containing
    metadata for apps:
    - Name
    - Icons
    - Theme Color
    - Display Mode
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  13. Web Application Manifest
    {
    "file_handlers": [{
    "action": "index.html",
    "accept": {
    "image/jpeg": [".jpg", ".jpeg"]
    },
    "icons": []
    }]
    }
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  14. Imperative API
    if ('launchQueue' in window) {
    launchQueue.setConsumer((launchParams) => {
    // do something with launchParams.files
    });
    }
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  15. https://paint.js.org
    LIVE DEMO
    Live Demo
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  16. Sample Applications
    - Office applications
    - Graphics editors
    - Text and code editors
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  17. Flags
    - about://flags/#file-handling-icons
    Fugu Update 2022
    These are the new PWA interfaces
    File Handling API

    View full-size slide

  18. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Fugu Update 2022
    These are the new PWA interfaces
    Agenda

    View full-size slide

  19. Overview
    Enables application to deal
    with multiple screens
    Allows opening and moving
    child windows on a specific
    screen, at a certain position
    Allows entering fullscreen
    mode on a specific screen (e.g.,
    fullscreen slides and speaker
    nodes)
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  20. API
    // Window extension
    const screenDetails = await window.getScreenDetails();
    console.log(screenDetails.screens);
    // Fullscreen API extension
    await document.body.requestFullscreen({
    screen: screenDetails[0]
    });
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  21. Before
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  22. Permission Prompt
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  23. After
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  24. Demo
    https://michaelwasserman.github.io/window-placement-demo/
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  25. Sample Applications
    - Presentation programs
    - Trading dashboards
    - Situation room dashboards
    - Multi-screen games
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API

    View full-size slide

  26. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Fugu Update 2022
    These are the new PWA interfaces
    Agenda

    View full-size slide

  27. Overview
    Allows PWAs to run more than
    one app instance in the same
    window (e.g., for editing
    multiple documents)
    The other instances are
    represented as tabs
    Tabs and tab behavior are
    provided by the browser
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode

    View full-size slide

  28. Manifest Display Modes
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode
    browser minimal-ui standalone fullscreen

    View full-size slide

  29. Web Application Manifest Extension
    {
    "display": "standalone",
    "display_override": ["tabbed"]
    }
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode
    allows specifying custom values
    and a custom fallback chain

    View full-size slide

  30. Permission Prompt
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode

    View full-size slide

  31. After
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode

    View full-size slide

  32. Demo
    https://www.excalidraw.com
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode

    View full-size slide

  33. Sample Applications
    - Office applications
    - Code editors
    - Graphics editors
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode

    View full-size slide

  34. Flags
    - about://flags/#enable-desktop-pwas-tab-strip
    Fugu Update 2022
    These are the new PWA interfaces
    Tabbed Application Mode

    View full-size slide

  35. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Fugu Update 2022
    These are the new PWA interfaces
    Agenda

    View full-size slide

  36. Overview
    Extend the app’s chrome to the
    window’s title bar, e.g. search
    boxes, frequently used controls
    More space for your content
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  37. Web Application Manifest Extension
    {
    "display": "standalone",
    "display_override": ["window-controls-overlay"]
    }
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  38. CSS
    .title-bar-content {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 50px);
    }
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  39. Motivation
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  40. Before
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  41. After
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  42. Demo
    https://window-controls-overlay.glitch.me/
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  43. Sample Applications
    - Messengers
    - Code editors
    - Office applications
    Fugu Update 2022
    These are the new PWA interfaces
    Window Controls Overlay

    View full-size slide

  44. Direct Sockets API
    Allows websites and PWAs to
    open client TCP and UDP ports
    Applications can talk to
    servers and devices that don’t
    support web protocols:
    - SSH
    - FTP
    - …
    https://wicg.github.io/direct-sockets/
    Fugu Update 2022
    These are the new PWA interfaces
    Outlook

    View full-size slide

  45. Isolated Web Apps
    Web apps that are bundled and
    distributed through a store
    This additional trust anchor allows
    exposing even more powerful
    capabilities (e.g., Direct Sockets API or
    Borderless Windows Mode)
    Bundles may even contain native code
    Run on an isolated origin
    APIs will not be proprietary, but
    standardized instead
    Fugu Update 2022
    These are the new PWA interfaces
    Outlook

    View full-size slide

  46. Summary
    Many powerful new capabilities have already shipped, which unlocked
    new experiences on the web (Photoshop, VS Code)
    The current focus is on fine-tuning the desktop experience
    Some APIs have already made their way into other browsers (e.g., Web
    Share)
    Fugu process makes sure that capabilities are implemented in a secure,
    privacy-preserving manner
    Keep an eye out on Isolated Web Apps (IWA)
    Let’s make the web a more capable platform!
    Fugu Update 2022
    These are the new PWA interfaces
    Project Fugu 2022

    View full-size slide

  47. Q&A
    Fugu Update 2022
    These are the new PWA interfaces

    View full-size slide

  48. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    [email protected]
    https://www.thinktecture.com/ueber-uns/karriere/

    View full-size slide