Slide 1

Slide 1 text

Fugu Update 2022 These are the new PWA interfaces Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

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

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 Fugu Update 2022 These are the new PWA interfaces Project Fugu

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces 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 Fugu Update 2022 These are the new PWA interfaces 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 Fugu Update 2022 These are the new PWA interfaces File Handling API

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Fugu Update 2022 These are the new PWA interfaces 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) Fugu Update 2022 These are the new PWA interfaces 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] }); Fugu Update 2022 These are the new PWA interfaces Multi-Screen Window Placement API

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 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 Fugu Update 2022 These are the new PWA interfaces Tabbed Application Mode

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 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); } Fugu Update 2022 These are the new PWA interfaces Window Controls Overlay

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 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 - … https://wicg.github.io/direct-sockets/ Fugu Update 2022 These are the new PWA interfaces Outlook

Slide 45

Slide 45 text

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

Slide 46

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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