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]