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

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

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

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

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

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

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

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

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces Agenda

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces Agenda

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

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

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

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

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

Sample Applications - Office applications - Graphics editors - Text and code editors Fugu Update 2022 These are the new PWA interfaces File Handling API

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

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces Agenda

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

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

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

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

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

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

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

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces Agenda

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

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

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

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

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

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

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

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

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces Agenda

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

Web Application Manifest Extension { "display": "standalone", "display_override": ["window-controls-overlay"] } Fugu Update 2022 These are the new PWA interfaces Window Controls Overlay

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

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

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

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

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

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

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

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

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

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

Thank you for your kind attention! Christian Liebel @christianliebel [email protected] https://www.thinktecture.com/ueber-uns/karriere/