构建未来网站的7个JavaScript Web API，你可能不知道🤯

随着技术的快速发展，开发者们得到了令人难以置信的新工具和 API。但调查发现，超过 100 多个 API 中，只有 5% 的 API 被开发者们积极使用。

让我们来看看一些有用的 Web API，它们可以帮助你的网站直冲云霄！🌕🚀

屏幕捕捉 API#

顾名思义，屏幕捕捉 API 允许你捕获屏幕的内容，使得构建屏幕录像机变得非常容易。你需要一个视频元素来显示捕获的屏幕。点击开始按钮将开始屏幕捕捉。

<video id="preview" autoplay>
  你的浏览器不支持HTML5。
</video>
<button id="start" class="btn">开始</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true,
  });
}

startBtn.addEventListener("click", startRecording);

Web 共享 API#

Web 共享 API 允许你从网页分享文本、链接，甚至文件到设备上安装的其他应用程序。

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "看看我的网站",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

注意：要使用 Web 共享 API，你需要用户的交互。例如，按钮点击或触摸事件。

交叉观察者 API#

交叉观察者 API 允许你检测一个元素何时进入或离开视口。这对于实现无限滚动非常有用。

const MAX_PAGES = 5;

const generateRandomColor = () => {
  const characters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += characters[Math.floor(Math.random() * 16)];
  }
  return color;
};

const Item = ({ children, color, reference }) => {
  return (
    <div className="item" style={{ backgroundColor: color }} ref={reference}>
      {children}
    </div>
  );
};

const App = () => {
  const [items, setItems] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);
  const [hasMore, setHasMore] = React.useState(true);
  const [pages, setPages] = React.useState(0);
  const observer = React.useRef();

  React.useEffect(() => {
    updateItems();
    setPages((pages) => pages + 1);
  }, []);

  const lastItemRef = React.useCallback(
    (node) => {
      if (isLoading) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          if (pages < MAX_PAGES) {
            updateItems();
            setPages((pages) => pages + 1);
          } else {
            setHasMore(false);
          }
        }
      });

      if (node) observer.current.observe(node);
    },
    [isLoading, hasMore]
  );

  const updateItems = async () => {
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 1000));

    setItems((currItems) => {
      const lastItem = currItems.length;
      const updatedItems = [...currItems];
      for (let i = 1; i <= 5; i++) {
        const item = {
          count: lastItem + i,
          color: generateRandomColor()
        };
        updatedItems.push(item);
      }
      return updatedItems;
    });

    setIsLoading(false);
  };

  return (
    <React.Fragment>
      <h1>Infinite Scroll Demo</h1>
      {items.map((item, index) =>
        index + 1 === items.length ? (
          <Item reference={lastItemRef} key={index} color={item.color}>
            {item.count}
          </Item>
        ) : (
          <Item key={index} color={item.color}>
            {item.count}
          </Item>
        )
      )}
      {isLoading && <div className="loader" />}
    </React.Fragment>
  );
};

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

注意：示例使用 React 是因为我个人喜好，但你可以使用任何框架或纯 JavaScript。

剪贴板 API#

剪贴板 API 允许你读取和写入剪贴板数据。这对于实现复制到剪贴板功能非常有用。

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

屏幕唤醒锁定 API#

有没有想过 YouTube 是如何在播放视频时防止屏幕被关闭的？这就归功于屏幕唤醒锁定 API。

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}

注意：只有当页面已经在屏幕上可见时，