Fugu Update 2022: These are the New PWA Interfaces

Progressive Web Apps are a cross-platform, web-based application model. Once written, these apps run everywhere from mobile to desktop. Project Fugu, a collaboration around Chromium contributors Google, Microsoft, and Intel, wants to add more capabilities to web apps—thanks to new web platform APIs. Access to the clipboard and the file system was already added to the web. This year, too, a number of new interfaces are on the agenda: The File Handling API allows you to register your PWA as an editor app for certain file extensions. The Multi-Screen Window Placement API lets you open windows at a precise location on a specific screen. Tabbed Application Mode and Window Controls Overlay further improve the appearance of your PWA on the desktop. Finally, Direct Socket Access allows you to connect with services other than HTTPS and Web Socket—such as SSH or SMTP. PWA expert Christian Liebel from Thinktecture gives an overview of the endeavor and shows you the latest developments in this area.

Transcript

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

   View 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 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 Slide

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

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View 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 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 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 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 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 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 Slide

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

    View 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 Slide

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

    View 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 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
    notes)
    Fugu Update 2022
    These are the new PWA interfaces
    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]
    });
    Fugu Update 2022
    These are the new PWA interfaces
    Multi-Screen Window Placement API
    

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide