Project Fugu: Progressive Web Apps, Taken to The Next Level

12c88a3a10478fa18d0363b3ba3d9df1?s=47 Christian Liebel
October 27, 2020
22

Project Fugu: Progressive Web Apps, Taken to The Next Level

Progressive Web Apps are a great cross-platform application model, even if somewhat restricted in use—until now, that is. Project Fugu is an initiative led by Google, Microsoft, and Intel. Their goal: a more capable web. Home screen icon badges and shortcuts, clipboard access, accelerated shape detection in images and native file system access are only a few examples of Fugu’s powerful APIs. In this session, Christian Liebel, PWA specialist at Thinktecture, shows you the objective of Project Fugu and demonstrates some of its APIs. Are you ready to take your Progressive Web App to the next level?

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

October 27, 2020
Tweet

Transcript

  1. Project Fugu Progressive Web Apps, Taken To The Next Level

    Christian Liebel @christianliebel Consultant
  2. Hello, it’s me. Project Fugu Progressive Web Apps, Taken To

    The Next Level Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. ✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File

    System Access Raw Clipboard Access Font Table Access Project Fugu Progressive Web Apps, Taken To The Next Level
  4. Project Fugu Progressive Web Apps, Taken To The Next Level

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

    To The Next Level Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  6. Project Fugu Progressive Web Apps, Taken To The Next Level

    Project Fugu https://goo.gle/fugu-api-tracker
  7. Process – Write an Explainer (https://github.com/WICG/native-file- system/blob/master/EXPLAINER.md) – Discuss capability

    with developers, browser vendors, standard orgs – Iterate – Compile a design document – W3C TAG Review (https://github.com/w3ctag/design- reviews/issues/390) – Formal spec within Web Incubator Community Group (WICG, https://wicg.github.io/native-file-system/) Project Fugu Progressive Web Apps, Taken To The Next Level Project Fugu
  8. Process – Implementation in Chromium – Launches behind a flag

    (chrome://flags/#enable-experimental-web- platform-features) – Origin Trial (https://developers.chrome.com/origintrials/) – Transfer to W3C Working Group + Recommendation? Project Fugu Progressive Web Apps, Taken To The Next Level Project Fugu
  9. Project Fugu Progressive Web Apps, Taken To The Next Level

    Project Fugu 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 Progressive Web Apps, Taken To The Next Level Project Fugu
  11. Badging API Project Fugu Progressive Web Apps, Taken To The

    Next Level
  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 Progressive Web Apps, Taken To The Next Level Badging API
  13. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Project

    Fugu Progressive Web Apps, Taken To The Next Level Badging API
  14. Shortcuts Project Fugu Progressive Web Apps, Taken To The Next

    Level
  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 Progressive Web Apps, Taken To The Next Level Shortcuts
  16. Web App Manifest Extension { "shortcuts": [ { "name": "Direct

    Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Project Fugu Progressive Web Apps, Taken To The Next Level Shortcuts
  17. Screen Wake Lock Project Fugu Progressive Web Apps, Taken To

    The Next Level
  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 of the screen while the application has the wake lock Project Fugu Progressive Web Apps, Taken To The Next Level 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 Progressive Web Apps, Taken To The Next Level Screen Wake Lock API https://web.dev/wake-lock/
  20. Shape Detection API Project Fugu Progressive Web Apps, Taken To

    The Next Level
  21. Faces Barcodes Text Use Cases Project Fugu Progressive Web Apps,

    Taken To The Next Level Shape Detection API
  22. Face Detection API if ('FaceDetector' in window) { const img

    = document.querySelector('img'); const faceDetector = new FaceDetector(); const faces = await faceDetector.detect(img) faces.forEach(face => { console.log('Face found!', face.boundingBox); }); } Project Fugu Progressive Web Apps, Taken To The Next Level Shape Detection API
  23. https://liebel.io/facedet Project Fugu Progressive Web Apps, Taken To The Next

    Level Shape Detection API DEMO
  24. Project Fugu Progressive Web Apps, Taken To The Next Level

  25. Related: WebML Machine Learning for the Web (WebML) Goal: Low-level

    Web API for machine learning (Web Neural Network API) Microsoft, Google, Apple, Mozilla on board Project Fugu Progressive Web Apps, Taken To The Next Level Shape Detection API
  26. Async Clipboard API Project Fugu Progressive Web Apps, Taken To

    The Next Level
  27. 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, Taken To The Next Level Async Clipboard API
  28. File System Access API Project Fugu Progressive Web Apps, Taken

    To The Next Level
  29. 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, Taken To The Next Level File System Access API
  30. 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, Taken To The Next Level File System Access API
  31. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Project Fugu Progressive Web Apps, Taken To The Next Level File System Access API
  32. https://paint.js.org LIVE DEMO Project Fugu Progressive Web Apps, Taken To

    The Next Level Async Clipboard & FS Access
  33. Project Fugu Progressive Web Apps, Taken To The Next Level

    Summary
  34. - Project Fugu helps the web to become more and

    more capable - Project Fugu APIs could bring many more app experiences to the web (IDEs, productivity apps, etc.) - But: Web is threatened by alternative approaches and platforms, support for modern Web API varies from platform to platform - You can make a difference! - File bugs in browser engine bugtrackers - File Fugu requests: https://goo.gle/new-fugu-request Project Fugu Progressive Web Apps, Taken To The Next Level Summary
  35. Q&A Project Fugu Progressive Web Apps, Taken To The Next

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