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.

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
    christian.liebel@thinktecture.com
    

    View Slide