Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Project Fugu: Superkräfte für Progressive Web Apps

Project Fugu: Superkräfte für Progressive Web Apps

Progressive Web Apps (PWA) sind ein großartiges, plattformübergreifendes Anwendungsmodell, auch wenn sie nicht auf sämtliche plattformspezifische Schnittstellen zurückgreifen können – zumindest bis jetzt! Denn Project Fugu, eine gemeinsame Initiative von Google, Microsoft und Intel möchte das Web leistungsfähiger machen. Dazu gehören Zugriff auf die Zwischenablage oder das Dateisystem sowie das Hinterlegen einer PWA als Bearbeitungsprogramm für bestimmte Dateiformate, perfekt für webbasierte Produktivitätsapps.

Und das ist nur ein Ausschnitt der neuen Möglichkeiten, die sich dank Project Fugu im Web eröffnen. In dieser Session zeigt Christian Liebel, PWA-Experte von Thinktecture, worum es bei Project Fugu geht und stellt einige der neuen Web-Plattform-APIs vor. So erlangt auch deine PWA echte Superkräfte!

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

June 23, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Project Fugu Superkräfte für Progressive Web Apps Christian Liebel @christianliebel

    Consultant
  2. Hello, it’s me. Project Fugu Superkräfte für Progressive Web Apps

    Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. Project Fugu Superkräfte für Progressive Web Apps Web App Manifest

    Service Worker
  4. ✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File

    System Access Raw Clipboard Access Local Font Access Project Fugu Superkräfte für Progressive Web Apps
  5. Project Fugu Superkräfte für Progressive Web Apps

  6. Cross-Vendor Initiative Led By… Project Fugu Superkräfte für Progressive Web

    Apps Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  7. https://paint.js.org LIVE DEMO Project Fugu Superkräfte für Progressive Web Apps

  8. Project Fugu Superkräfte für Progressive Web Apps Project Fugu https://goo.gle/fugu-api-tracker

    P
  9. Project Fugu Superkräfte für Progressive Web Apps Project Fugu Browser

    navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  10. Progressive Enhancement if ('share' in navigator) { navigator.share({ text: 'Hi!'

    }); } else { // Fallback method } Project Fugu Superkräfte für Progressive Web Apps Project Fugu
  11. Badging API Project Fugu Superkräfte für Progressive Web Apps

  12. Motivation - Communicate updates without distracting the user (in constrast

    to push notifications) - Typically displays a badge on the home screen, task bar or dock - Appearance varies from platform to platform Project Fugu Superkräfte für Progressive Web Apps Badging API
  13. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Project

    Fugu Superkräfte für Progressive Web Apps Badging API
  14. Shortcuts Project Fugu Superkräfte für Progressive Web Apps

  15. Provide secondary entry points for your application, now also for

    Progressive Web Apps added to the home screen Windows: Jump List iOS: Home Screen Quick Actions Project Fugu Superkräfte für Progressive Web Apps Shortcuts
  16. Web App Manifest Extension { "shortcuts": [ { "name": "Direct

    Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Project Fugu Superkräfte für Progressive Web Apps Shortcuts
  17. Screen Wake Lock Project Fugu Superkräfte für Progressive Web Apps

  18. Motivation - Devices go to sleep in order to reduce

    energy consumption - However, this can get bothersome in some situations (e.g. while watching a movie, while cooking, etc.) - The Screen Wake Lock API prevents the device from turning off the screen while the application has the wake lock Project Fugu Superkräfte für Progressive Web Apps Screen Wake Lock API
  19. API let wakeLockObj; if ('wakeLock' in navigator) { try {

    wakeLockObj = await navigator.wakeLock.request('screen'); console.log('👍', 'Screen Wake Lock', wakeLockObj); } catch (err) { console.error('👎', 'Screen Wake Lock', err); } } Project Fugu Superkräfte für Progressive Web Apps Screen Wake Lock API https://web.dev/wake-lock/
  20. Async Clipboard API Project Fugu Superkräfte für Progressive Web Apps

  21. API Copy Content await navigator.clipboard.writeText('foo'); await navigator.clipboard.write(/* data */); Paste

    Content const content = await navigator.clipboard.readText(); const content = await navigator.clipboard.read(); Project Fugu Superkräfte für Progressive Web Apps Async Clipboard API
  22. File System Access API Project Fugu Superkräfte für Progressive Web

    Apps
  23. Motivation - Currently, websites only have very limited access to

    the file system - Some applications heavily rely on working with files (e.g. Visual Studio Code) - Wouldn’t it be great if your web application could open files or folders from the native file system? Project Fugu Superkräfte für Progressive Web Apps File System Access API
  24. API if ('showOpenFilePicker' in window) { const [handle] = await

    window.showOpenFilePicker(); const file = await handle.getFile(); // do something with the file } else { // use fallback API or disable feature in app } Project Fugu Superkräfte für Progressive Web Apps File System Access API
  25. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Project Fugu Superkräfte für Progressive Web Apps File System Access API
  26. File System Handling API Project Fugu Superkräfte für Progressive Web

    Apps
  27. Motivation Register your PWA as a handler for file extensions

    Requires installing the application first Declare supported extensions in Web App Manifest and add imperative code to your application logic Project Fugu Superkräfte für Progressive Web Apps File System Handling API
  28. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png":

    [".png"] } }] } Project Fugu Superkräfte für Progressive Web Apps File System Handling API
  29. API if ('launchQueue' in window) { launchQueue.setConsumer(async params => {

    const [handle] = params.files; // do something with the handle }); } Project Fugu Superkräfte für Progressive Web Apps File System Handling API
  30. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu VS Code https://vscode.dev/
  31. Photoshop, VS Code & Co How to write web-based productivity

    apps with Project Fugu Photoshop https://creativecloud.adobe.com/cc/photoshop
  32. New powerful APIs regularly ship with new releases of Chromium-based

    browsers Some only add minor finishing touches, others enable whole application categories as productivity apps to finally make the shift to the web Some APIs 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 Superkräfte für Progressive Web Apps Summary
  33. Q&A Project Fugu Superkräfte für Progressive Web Apps

  34. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com