Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda

Slide 10

Slide 10 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Web Application Manifest Extension { "display": "standalone", "display_override": ["window-controls-overlay"] } Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]