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

Fugu Update 2022: These are the New PWA Interfaces

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.

Christian Liebel
PRO

October 25, 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
  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
  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
  4. Capabilities Fugu Update 2022 These are the new PWA interfaces

    Project Fugu File System Access Clipboard Access USB, Bluetooth Access
  5. Unlocking New Experiences Fugu Update 2022 These are the new

    PWA interfaces Project Fugu Photoshop Web Visual Studio Code Online
  6. APIs Fugu Update 2022 These are the new PWA interfaces

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

    Fugu https://goo.gle/fugu-api-tracker P
  8. API Maturity Under Consideration Started Developer Trial Origin Trial Shipped

    Fugu Update 2022 These are the new PWA interfaces Project Fugu
  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
  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
  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
  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
  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
  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
  15. https://paint.js.org LIVE DEMO Live Demo Fugu Update 2022 These are

    the new PWA interfaces File Handling API
  16. Sample Applications - Office applications - Graphics editors - Text

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

    PWA interfaces File Handling API
  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
  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
  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
  21. Before Fugu Update 2022 These are the new PWA interfaces

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

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

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

    interfaces Multi-Screen Window Placement API
  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
  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
  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
  28. Manifest Display Modes Fugu Update 2022 These are the new

    PWA interfaces Tabbed Application Mode browser minimal-ui standalone fullscreen
  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
  30. Permission Prompt Fugu Update 2022 These are the new PWA

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

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

    interfaces Tabbed Application Mode
  33. Sample Applications - Office applications - Code editors - Graphics

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

    PWA interfaces Tabbed Application Mode
  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
  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
  37. Web Application Manifest Extension { "display": "standalone", "display_override": ["window-controls-overlay"] }

    Fugu Update 2022 These are the new PWA interfaces Window Controls Overlay
  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
  39. Motivation Fugu Update 2022 These are the new PWA interfaces

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

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

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

    interfaces Window Controls Overlay
  43. Sample Applications - Messengers - Code editors - Office applications

    Fugu Update 2022 These are the new PWA interfaces Window Controls Overlay
  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
  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
  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
  47. Q&A Fugu Update 2022 These are the new PWA interfaces

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