Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

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

    Fugu File System Access Clipboard Access USB, Bluetooth Access
  4. Unlocking New Experiences Project Fugu 2022 Das sind die neuen

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

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

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

    Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Project Fugu
  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
  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
  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
  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
  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
  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
  14. https://paint.js.org LIVE DEMO Live Demo Project Fugu 2022 Das sind

    die neuen PWA-Schnittstellen File Handling API
  15. Sample Applications - Office applications - Graphics editors - Text

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

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

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

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

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

    Multi-Screen Window Placement API
  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
  25. Flags - about://flags/#enable-experimental-web-platform-features Project Fugu 2022 Das sind die neuen

    PWA-Schnittstellen Multi-Screen Window Placement API
  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
  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
  28. Manifest Display Modes Project Fugu 2022 Das sind die neuen

    PWA-Schnittstellen Tabbed Application Mode browser minimal-ui standalone fullscreen
  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
  30. Permission Prompt Project Fugu 2022 Das sind die neuen PWA-Schnittstellen

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

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

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

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

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

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

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

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

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

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

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

    PWA-Schnittstellen Window Controls Overlay
  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
  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
  47. Q&A Project Fugu 2022 Das sind die neuen PWA-Schnittstellen

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