$30 off During Our Annual Pro Sale. View Details »

Fugu-Update 2022: Neue PWA-Schnittstellen, die Sie im Auge behalten sollten

Fugu-Update 2022: Neue PWA-Schnittstellen, die Sie im Auge behalten sollten

Auch im Jahr 2022 geht die Entwicklung neuer Webschnittstellen durch Project Fugu weiter. Weiterhin befindet sich die Verbesserung der Benutzererfahrung auf dem Desktop im Fokus.

In diesem Webinar wirft PWA-Experte Christian Liebel gemeinsam mit Ihnen einen Blick auf die APIs, die voraussichtlich in diesem Jahr zumindest in den meisten Chromium-basierten Browsern verfügbar gemacht werden: Die File Handling API erlaubt das Hinterlegen einer PWA als Bearbeitungsprogramm für eine bestimmte Erweiterung – neuerdings auch mit eigenem Icon, die Multi-Screen Window Placement API lässt Sie Ihre PWA-Fenster an definierten Positionen auf bestimmten Bildschirmen öffnen und der Tabbed Application Mode sowie Window Controls Overlay können die Darstellung Ihrer PWA-Fenster auf dem Desktop noch ein bisschen weiter verbessern. Zu guter Letzt gibt es einen Ausblick auf die weiteren Entwicklungen im Fugu-Umfeld.

Christian Liebel
PRO

May 11, 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 Slide

  2. 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
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu

    View Slide

  3. Capabilities
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu
    File System Access Clipboard Access USB, Bluetooth Access

    View Slide

  4. Unlocking New Experiences
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu
    Photoshop Web Visual Studio Code Online

    View Slide

  5. APIs
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu
    Browser
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View Slide

  6. Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu
    https://goo.gle/fugu-api-tracker
    P

    View Slide

  7. API Maturity
    Under
    Consideration
    Started
    Developer
    Trial
    Origin
    Trial
    Shipped
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu

    View Slide

  8. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Agenda

    View Slide

  9. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Agenda

    View Slide

  10. 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
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  11. Web Application Manifest
    Distinguishes web apps from
    websites
    JSON based file containing
    metadata for apps:
    - Name
    - Icons
    - Theme Color
    - Display Mode
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  12. Web Application Manifest
    {
    "file_handlers": [{
    "action": "index.html",
    "accept": {
    "image/jpeg": [".jpg", ".jpeg"]
    },
    "icons": []
    }]
    }
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  13. Imperative API
    if ('launchQueue' in window) {
    launchQueue.setConsumer((launchParams) => {
    // do something with launchParams.files
    });
    }
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  14. https://paint.js.org
    LIVE DEMO
    Live Demo
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  15. Sample Applications
    - Office applications
    - Graphics editors
    - Text and code editors
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  16. Flags
    - about://flags/#file-handling-api
    - about://flags/#file-handling-icons
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    File Handling API

    View Slide

  17. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Agenda

    View Slide

  18. 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)
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  19. API
    // Window extension
    const screenDetails = await window.getScreenDetails();
    console.log(screenDetails.screens);
    // Fullscreen API extension
    await document.body.requestFullscreen({
    screen: screenDetails[0]
    });
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  20. Before
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  21. Permission Prompt
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  22. After
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  23. Demo
    https://michaelwasserman.github.io/window-placement-demo/
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  24. Sample Applications
    - Presentation programs
    - Trading dashboards
    - Situation room dashboards
    - Multi-screen games
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  25. Flags
    - about://flags/#enable-experimental-web-platform-features
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Multi-Screen Window Placement API

    View Slide

  26. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Agenda

    View 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
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode

    View Slide

  28. Manifest Display Modes
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode
    browser minimal-ui standalone fullscreen

    View Slide

  29. Web Application Manifest Extension
    {
    "display": "standalone",
    "display_override": ["tabbed"]
    }
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode
    allows specifying custom values
    and a custom fallback chain

    View Slide

  30. Permission Prompt
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode

    View Slide

  31. After
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode

    View Slide

  32. Demo
    https://www.excalidraw.com
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode

    View Slide

  33. Sample Applications
    - Office applications
    - Code editors
    - Graphics editors
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode

    View Slide

  34. Flags
    - about://flags/#enable-desktop-pwas-tab-strip
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Tabbed Application Mode

    View Slide

  35. File Handling
    API
    Multi-Screen
    Window
    Placement API
    Tabbed
    Application
    Mode
    Window
    Controls
    Overlay
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Agenda

    View 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
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  37. Web Application Manifest Extension
    {
    "display": "standalone",
    "display_override": ["window-controls-overlay"]
    }
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View 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);
    }
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  39. Motivation
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  40. Before
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  41. After
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  42. Demo
    https://window-controls-overlay.glitch.me/
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  43. Sample Applications
    - Messengers
    - Code editors
    - Office applications
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  44. Flags
    - about://flags/#enable-desktop-pwas-window-controls-overlay
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Window Controls Overlay

    View Slide

  45. 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
    - …
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Outlook

    View 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
    Let’s make the web a more capable platform!
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen
    Project Fugu 2022

    View Slide

  47. Q&A
    Project Fugu 2022
    Das sind die neuen PWA-Schnittstellen

    View Slide

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

    View Slide