Making the Web more capable with Project Fugu

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
7. • Share texts, links, and other content to other applications • Share content through the native share dialog Web Share API
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
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 }
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
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
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