Project Fugu 2022: Das sind die neuen PWA-Schnittstellen

Progressive Web Apps sind ein plattformübergreifendes, webbasiertes Anwendungsmodell. Einmal geschrieben laufen diese Anwendungen überall, von Mobile bis Desktop.

Project Fugu ist ein Zusammenschluss der Chromium-Beitragenden Google, Microsoft und Intel, um Webanwendungen dank neuer Web-APIs um weitere 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 auf diesem Gebiet.

Transcript

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

   View Slide

2. Hello, it’s me.
   Project Fugu 2022
   Das sind die neuen PWA-Schnittstellen
   Christian Liebel
   Twitter:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Angular & PWA
   Slides:
   thinktecture.com
   /christian-liebel
   

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   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. 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

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

    View Slide

12. 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

13. 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

14. 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

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

    View Slide

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

    View Slide

17. 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

18. 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

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

    View Slide

20. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. 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

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

    View Slide

27. 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

28. 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

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

    View Slide

30. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. 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

37. 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

38. 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

39. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. 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

47. 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

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

    View Slide

49. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide