10 个不那么知名但很实用的 Web API

const manageFullscreen = () => {   document.getElementById('fs_id').requestFullscreen();}

<div className="column">  <div id="fs_id">    <Img fixed={imageData.image.childImageSharp.fixed} alt="santa" />   </div>    <StyledButton          onClick={manageFullscreen}>            Enter Fullscreen with Santa    </StyledButton> </div>

if (document.fullscreenEnabled) {   setSupported(true);} else {   setSupported(false);}

if (navigator.clipboard     && navigator.clipboard.read     && navigator.clipboard.write) {   setSupported(true);} else {   setSupported(false);}

async function performCopy(event) {   event.preventDefault();   try {      await navigator.clipboard.writeText(copyText);      console.log(`${copyText} copied to clipboard`);   } catch (err) {      console.error('Failed to copy: ', err);   }}

async function performPaste(event) {   event.preventDefault();   try {       const text = await navigator.clipboard.readText();       setPastetext(text);       console.log('Pasted content: ', text);   } catch (err) {      console.error('Failed to read clipboard contents: ', err);   }}

<StyledButton id="dumbBtnId">   I am a Dumb Button</StyledButton>

<div>   <input          onChange={(event) => resize(event)}         type="range"          min={minRange}         max={maxRange}         defaultValue={rangeValue} /></div>

const resize = event => {   const value = event.target.valueAsNumber;   setRangeValue(value);   let dumbBtn = document.getElementById('dumbBtnId');   dumbBtn.style.width = `${value}px`; }

useEffect(() => {   try {            let dumbBtn = document.getElementById('dumbBtnId');            var resizeObserver = new ResizeObserver(entries => {                for(const entry of entries) {                    // Get the button element and color it                    // based on the range values like this,                   entry.target.style.color = 'green`;                }      });      resizeObserver.observe(dumbBtn);   } catch(e) {            setSupported(false);            console.log(e);   }}, [rangeValue]);

navigator.mediaDevices.getUserMedia({video: true})  .then(mediaStream => {     document.querySelector('video').srcObject = mediaStream;     const track = mediaStream.getVideoTracks()[0];     setTrack(track);  }).catch(error => {     console.error(` ${error} is not yet supported`);     setError(error);});

const imageCapture = new ImageCapture(track);    imageCapture.grabFrame()      .then(imageBitmap => {          const canvas = document.querySelector('#grabFrameCanvas');          drawCanvas(canvas, imageBitmap);    }).catch(error => {          console.log(error);          setError(error);});

const imageCapture = new ImageCapture(track);    imageCapture.takePhoto().then(blob => createImageBitmap(blob))      .then(imageBitmap => {          const canvas = document.querySelector('#takePhotoCanvas');          drawCanvas(canvas, imageBitmap);    }).catch(error => {          console.log(error);          setError(error);});

const videoOff = () => {   track.stop(); }

const CHANNEL_NAME = "greenroots_channel"; const bc = new BroadcastChannel(CHANNEL_NAME); const message = 'I am wonderful!';

const sendMessage = () => {   bc.postMessage(message);}

const CHANNEL_NAME = "greenroots_channel"; const bc = new BroadcastChannel(CHANNEL_NAME); bc.addEventListener('message', function(event) {    console.log(`Received message, "${event.data}", on the channel, "${CHANNEL_NAME}"`);    const output = document.getElementById('msg');    output.innerText = event.data; });

console.log(performance.memory);

const [entry] = performance.getEntriesByType("navigation");console.table(entry)

navigator.getBattery().then(function (battery) {   // handle the charging change event   battery.addEventListener("chargingchange", function () {      console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));   });   // handle charge level change   battery.addEventListener("levelchange", function () {      console.log("Battery level: " + battery.level * 100 + "%");   });   // handle charging time change   battery.addEventListener("chargingtimechange", function () {      console.log( "Battery charging time: " + battery.chargingTime + " seconds");   });   // handle discharging time change   battery.addEventListener("dischargingtimechange", function () {      console.log("Battery discharging time: " + battery.dischargingTime + " seconds");   });});

console.log(navigator.connection);

useEffect(() => {   if (start) {      // vibrate for 2 seconds      navigator.vibrate(2000);   } else {      // stop vibration      navigator.vibrate(0);   }}, [start]);

navigator.bluetooth.requestDevice({   acceptAllDevices: true}).then(device => {   setDeviceName(device.name);   setDeviceId(device.id)   setDeviceConnected(device.connected);}).catch(err => {   console.log(err);   setError(true);})