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

Making the Web more capable with Project Fugu

Making the Web more capable with Project Fugu

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

July 24, 2021
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

Transcript

  1. Making the Web more capable with Project Fugu Software Developer,

    Newlogic Arnelle Balane @arnellebalane
  2. Arnelle Balane Software Developer at Newlogic Google Developers Expert for

    Web Technologies I write about Web stuff on my blog, arnellebalane.com @arnellebalane
  3. bit.ly/web-project-fugu

  4. Web Capabilities Project (a.k.a “Project Fugu”) An effort to make

    it possible for Web apps to anything that native and desktop apps can do, while preserving user security, privacy, and other core benefits of the Web.
  5. Web Share API

  6. None
  7. • Share texts, links, and other content to other applications

    • Share content through the native share dialog Web Share API
  8. None
  9. await navigator.share({ title: 'Web Share API', text: 'Share text and

    links using this API', url: 'https:////w.w3.org/TR/web-share' }); Web Share API Sharing text and links
  10. Web Share API Sharing files const filesToShare = [file]; //

    File objects await navigator.share({ text: 'Here is the photo you requested', files: filesToShare });
  11. Web Share API Feature detection if (navigator.share) { await navigator.share({

    //. }); }
  12. Web Share API Feature detection for sharing files if (navigator.canShare

    /& navigator.canShare({ files: filesToShare })) { await navigator.share({ //. }); }
  13. Files • Safari 15 (macOS, iOS) • Chrome 75 (Android)

    • Chrome 89 (ChromeOS, Windows) Text and links • Safari 12 (macOS, iOS) • Chrome 75 (Android) • Chrome 89 (ChromeOS, Windows) Web Share API Browser support
  14. Web Share Target API

  15. None
  16. • Allows websites to receive shared content from Web Share

    API and native applications • Extension to the Web Application Manifest Web Share Target API
  17. Web Share Target API Register app as a share target

    • App needs to meet Chrome’s installability criteria • App needs to be added to the home screen
  18. manifest.webmanifest Web Share Target API Web Application Manifest { "share_target":

    { "action": "/share", "method": "GET", "params": { "title": "title", "text": "text", "url": "link" } } }
  19. Web Share Target API Handle shared content /share?text=check+this+out%21&url=https%3A%2F%2Fw3c.gi thub.io%2Fweb-share-target%2F const

    link = new URL(window.location); const title = url.searchParams.get('title') const text = url.searchParams.get('text') const url = url.searchParams.get('url')
  20. Web Share Target API Support file sharing manifest.webmanifest { "share_target":

    { "action": "/share", "method": "POST", "enctype": "multipart/form-data", "params": { "text": "text", "files": [{ "name": "images", "accept": ["image/png", ".png"] }] } } }
  21. • Precache the action page so that it loads quickly

    and work reliably • Verify the incoming shared data Web Share Target API Additional recommendations
  22. • Chrome and Edge 76 (Android) • Chrome 89 (Chrome

    OS) Web Share Target API Browser support
  23. Async Clipboard API

  24. • Programmatically write to and read from clipboard • Better

    alternative to document.execCommand Async Clipboard API
  25. Async Clipboard API Write text to clipboard const textToCopy =

    'hello clipboard!'; await navigator.clipboard.writeText(textToCopy);
  26. Async Clipboard API Write other formats to clipboard const imageToCopy

    = blob; // Blob object const item = new ClipboardItem({ 'image/png': imageToCopy }); await navigator.clipboard.write([item]);
  27. Async Clipboard API Read text from clipboard const text =

    await navigator.clipboard.readText(); // /> 'hello clipboard'
  28. Async Clipboard API Read other formats from clipboard const items

    = await navigator.clipboard.read(); for (const item of items) { const image = await item.getType('image/png'); // /> Blob object }
  29. None
  30. Async Clipboard API Feature detection if (navigator.clipboard) { await navigator.clipboard.write(//.);

    } else { document.execCommand(//.); }
  31. • Check if a data format is available through clipboardItem.types

    • When writing other formats, include a text version of it in the same clipboard item Async Clipboard API Additional recommendations
  32. • Chrome 66 • Edge 79 • Firefox 63 •

    Safari 13.1 (macOS), Safari 13.4 (iOS) Async Clipboard API Browser support
  33. Media Session API

  34. • Customize media notifications and playback controls • Lets users

    know what’s playing in the browser and control it without going back to the page Media Session API
  35. None
  36. None
  37. navigator.mediaSession.metadata = new MediaMetadata({ title: 'Never Gonna Give You Up',

    artist: 'Rick Astley', album: 'Whenever You Need Somebody', artwork: [{ src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' }] }); Media Session API Customize media notification
  38. Media Session API Customize playback controls navigator.mediaSession.setActionHandler( 'play', () />

    audio.play() ); // try-catch in case the action is not supported
  39. 'play' 'seekbackward' 'pause' 'seekforward' 'previoustrack' 'seekto' 'nexttrack' 'togglemicrophone' 'stop' 'togglecamera'

    'hangup' Media Session API Customize playback controls
  40. navigator.mediaSession.setPositionState({ duration: video.duration, playbackRate: video.playbackRate, position: video.currentTime }); Media Session

    API Set playback position
  41. if (navigator.mediaSession) { navigator.mediaSession.metadata = //.; navigator.mediaSession.setActionHandler(//.); if (navigator.mediaSession.setPositionState) {

    navigator.mediaSession.setPositionState(//.); } } Media Session API Feature detection
  42. • Set metadata and playback position once the media is

    already playing • Unset any media session property by setting to null Media Session API Additional notes
  43. • Chrome 73 (desktop), Chrome 57 (Android) • Edge 79

    • Firefox 82 • Safari 15 (macOS, iOS) Media Session API Browser support
  44. WebOTP API

  45. • Programmatically obtain an OTP from a specially-formatted SMS messages

    • Less friction for users when verifying their phone numbers WebOTP API
  46. None
  47. const otp = await navigator.credentials.get({ otp: { transport: ['sms'] }

    }); OTPCredential { code: '123456', type: 'otp' } WebOTP API Retrieve the OTP
  48. <input type="text" autocomplete="one-time-code" required /> WebOTP API Cross-browser compatibility

  49. const controller = new AbortController(); const otp = await navigator.credentials.get({

    otp: { transport: ['sms'] }, signal: controller.signal }); controller.abort(); WebOTP API Abort the OTP request
  50. Your verification code is 123456. @arnellebalane.com #123456 WebOTP API Format

    the SMS message
  51. if ('OTPCredential' in window) { await navigator.credentials.get(//.); } WebOTP API

    Feature detection
  52. • Verify that the OTP is a valid one •

    Degrade gracefully when an invalid OTP is received WebOTP API Additional recommendations
  53. • Chrome 84 (Android) • Safari on iOS 14 and

    macOS Big Sur ◦ JavaScript API not included WebOTP API Browser support
  54. Shape Detection API

  55. • Detect barcodes, faces, and text from images • Expose

    the operating systems’ built-in feature detection capabilities through JavaScript Shape Detection API
  56. const detector = new BarcodeDetector({ formats: ['qr_code'] }); const barcodes

    = await detector.detect(image); // Argument should be a CanvasImageSource, Blob, // or ImageData object Shape Detection API Barcode detection
  57. DetectedBarcode { rawValue: 'hello world', type: 'qr_code', boundingBox: { //.

    }, cornerPoints: [ //. ] } Shape Detection API Detected barcodes
  58. await BarcodeDetector.getSupportedFormats(); 'aztec' 'code_128' 'code_39' 'code_93' 'data_matrix' 'ean_13' 'ean_8' 'itf'

    'pdf417' 'qr_code' 'upc_e' Shape Detection API Supported barcode formats
  59. if ('BarcodeDetector' in window) { const supportedFormats = await BarcodeDetector.getSupportedFormats();

    if (supportedFormats.includes('qr_code')) { // QR code scanning is supported! } } Shape Detection API Feature detection
  60. • Check out FaceDetector and TextDetector • Not all platforms

    support all features, so check for the specific feature that you need and use the API as a progressive enhancement Shape Detection API Additional recommendations
  61. • Chrome 83 (desktop, Android) ◦ BarcodeDetector is enabled by

    default ◦ FaceDetector and TextDetector are behind a flag Shape Detection API Browser support
  62. • Web Share • Web Share Target • Async Clipboard

    • Media Session • WebOTP • Shape Detection Project Fugu
  63. • Web Share • Web Share Target • Async Clipboard

    • Media Session • WebOTP • Shape Detection Project Fugu • Ambient Light Sensor • Screen Wake Lock • File System Access • Web Bluetooth • WebNFC • WebHID … and many more!
  64. fugu-tracker.web.app

  65. Thank you! Making the Web more capable with Project Fugu

    Arnelle Balane @arnellebalane