Save 37% off PRO during our Black Friday Sale! »

Project Fugu: Progressive Web Apps, Superpowered

Project Fugu: Progressive Web Apps, Superpowered

Over the last decade, the web has advanced to be a robust application platform. Most recently, Progressive Web Apps have brought native capabilities to the web. But that’s not the end of the story! Project Fugu, a cross-vendor initiative by Google, Microsoft, and Intel, aims to bring even more native capabilities to the web—native file system and clipboard access, accelerated shape detection in images, home screen icon badges and shortcuts included! Christian Liebel, PWA specialist at Thinktecture, shows you the objective of Project Fugu and demonstrates some of its APIs.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

November 24, 2021
Tweet

Transcript

  1. Project Fugu Progressive Web Apps, Superpowered Christian Liebel @christianliebel Consultant

  2. Project Fugu Progressive Web Apps, Superpowered Web App Manifest Service

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

    System Access Raw Clipboard Access Local Font Access Project Fugu Progressive Web Apps, Superpowered
  4. Project Fugu Progressive Web Apps, Superpowered

  5. Cross-Vendor Initiative Led By… Project Fugu Progressive Web Apps, Superpowered

    Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  6. https://paint.js.org LIVE DEMO Project Fugu Progressive Web Apps, Superpowered

  7. Project Fugu Progressive Web Apps, Superpowered Project Fugu https://goo.gle/fugu-api-tracker P

  8. Project Fugu Progressive Web Apps, Superpowered Project Fugu Browser navigator.share({

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

    }); } else { // Fallback method } Project Fugu Progressive Web Apps, Superpowered Project Fugu
  10. Badging API Project Fugu Progressive Web Apps, Superpowered

  11. 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 Progressive Web Apps, Superpowered Badging API
  12. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Project

    Fugu Progressive Web Apps, Superpowered Badging API
  13. Shortcuts Project Fugu Progressive Web Apps, Superpowered

  14. Web App Manifest Extension { "shortcuts": [ { "name": "Direct

    Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Project Fugu Progressive Web Apps, Superpowered Shortcuts
  15. Screen Wake Lock Project Fugu Progressive Web Apps, Superpowered

  16. 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 Progressive Web Apps, Superpowered Screen Wake Lock API
  17. 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 Progressive Web Apps, Superpowered Screen Wake Lock API https://web.dev/wake-lock/
  18. Async Clipboard API Project Fugu Progressive Web Apps, Superpowered

  19. 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 Progressive Web Apps, Superpowered Async Clipboard API
  20. File System Access API Project Fugu Progressive Web Apps, Superpowered

  21. 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 Progressive Web Apps, Superpowered File System Access API
  22. 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 Progressive Web Apps, Superpowered File System Access API
  23. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Project Fugu Progressive Web Apps, Superpowered File System Access API
  24. File System Handling API Project Fugu Progressive Web Apps, Superpowered

  25. 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 Progressive Web Apps, Superpowered File System Handling API
  26. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png":

    [".png"] } }] } Project Fugu Progressive Web Apps, Superpowered File System Handling API
  27. API if ('launchQueue' in window) { launchQueue.setConsumer(async params => {

    const [handle] = params.files; // do something with the handle }); } Project Fugu Progressive Web Apps, Superpowered File System Handling API
  28. Project Fugu Progressive Web Apps, Superpowered Summary P

  29. 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 Progressive Web Apps, Superpowered Summary
  30. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com