Project Fugu 2022: Das sind die neuen PWA-Schnittstellen

Progressive Web Apps sind ein plattformübergreifendes, webbasiertes Anwendungsmodell. Einmal geschrieben laufen diese Anwendungen überall, von Mobile bis Desktop.

Project Fugu ist ein Zusammenschluss der Chromium-Beitragenden Google, Microsoft und Intel, um Webanwendungen dank neuer Web-APIs um weitere Fähigkeiten auszustatten. Dank Fugu kamen zuletzt etwa der Zugriff auf die Zwischenablage oder das Dateisystem ins Web. Auch in diesem Jahr stehen wieder einige neue Schnittstellen auf dem Plan.

PWA-Experte Christian Liebel von Thinktecture gibt eine Übersicht über das Unterfangen und zeigt Ihnen die neuesten Entwicklungen auf diesem Gebiet.

Transcript

1. Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Christian Liebel @christianliebel Consultant
2. 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
3. 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
4. Capabilities Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Project Fugu File System Access Clipboard Access USB, Bluetooth Access
5. Unlocking New Experiences Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Project Fugu Photoshop Web Visual Studio Code Online
6. APIs Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Project Fugu Browser navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
7. Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Project Fugu https://goo.gle/fugu-api-tracker P
8. API Maturity Under Consideration Started Developer Trial Origin Trial Shipped Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Project Fugu
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. File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda
11. 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
12. 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
13. 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
14. 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
15. https://paint.js.org LIVE DEMO Live Demo Project Fugu 2022 Das sind die neuen PWA-Schnittstellen File Handling API
16. Sample Applications - Office applications - Graphics editors - Text and code editors Project Fugu 2022 Das sind die neuen PWA-Schnittstellen File Handling API
17. Flags - about://flags/#file-handling-api - about://flags/#file-handling-icons Project Fugu 2022 Das sind die neuen PWA-Schnittstellen File Handling API
18. File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda
19. 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
20. 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
21. Before Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Multi-Screen Window Placement API
22. Permission Prompt Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Multi-Screen Window Placement API
23. After Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Multi-Screen Window Placement API
24. Demo https://michaelwasserman.github.io/window-placement-demo/ Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Multi-Screen Window Placement API
25. 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
26. Flags - about://flags/#enable-experimental-web-platform-features Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Multi-Screen Window Placement API
27. File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda
28. 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
29. Manifest Display Modes Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Tabbed Application Mode browser minimal-ui standalone fullscreen
30. 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
31. Permission Prompt Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Tabbed Application Mode
32. After Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Tabbed Application Mode
33. Demo https://www.excalidraw.com Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Tabbed Application Mode
34. Sample Applications - Office applications - Code editors - Graphics editors Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Tabbed Application Mode
35. Flags - about://flags/#enable-desktop-pwas-tab-strip Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Tabbed Application Mode
36. File Handling API Multi-Screen Window Placement API Tabbed Application Mode Window Controls Overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Agenda
37. 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
38. Web Application Manifest Extension { "display": "standalone", "display_override": ["window-controls-overlay"] } Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
39. 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
40. Motivation Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
41. Before Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
42. After Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
43. Demo https://window-controls-overlay.glitch.me/ Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
44. Sample Applications - Messengers - Code editors - Office applications Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
45. Flags - about://flags/#enable-desktop-pwas-window-controls-overlay Project Fugu 2022 Das sind die neuen PWA-Schnittstellen Window Controls Overlay
46. 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
47. 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
48. Q&A Project Fugu 2022 Das sind die neuen PWA-Schnittstellen
49. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com