# 你不知道的神奇的Web API（一）

随着技术的快速变化，开发人员正在获得令人难以置信的新工具和API。但我们发现，在100 多个 API中，只有5%  被开发者积极使用。

让我们来看看一些有用的Web API，它们可以帮助您将网站推上月球！🌕🚀

Web Speech API

Web Speech API 使您能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

// Speech Synthesis
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance("Hello World");
synth.speak(utterance);

// Speech Recognition
const SpeechRecognition =
  window.SpeechRecognition ?? window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.start();
recognition.onresult = (event) => {
  const speechToText = event.results[0][0].transcript;
  console.log(speechToText);
};

• 尽管语音合成受到所有主流浏览器的支持，覆盖率达到 96% ，但语音识别在生产中使用还为时过早，覆盖率仅为 86% 。
• 如果没有用户交互，则无法使用API（例如： click、keypress等）。

更多功能和兼容性详见MDN

Document.visibilityState

Document.visibilityState （只读属性）, 返回document的可见性，即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后，或是不可见的隐藏的标签页，或者 (正在) 预渲染。可用的值如下：

• 'visible' : 此时页面内容至少是部分可见。即此页面在前景标签页中，并且窗口没有最小化。
• 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
• 'prerender' : 页面此时正在渲染中，因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态。注意：浏览器支持是可选的。

document.visibilityState允许您检查页面是否对用户可见。当您想要暂停视频时，这非常有用。 有 2 种方法可以执行此检查：

// Method 1
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    document.title = "Visible";
    return;
  }
  document.title = "Not Visible";
});

// Method 2
window.addEventListener("blur", () => {
  document.title = "Not Visible";
});
window.addEventListener("focus", () => {
  document.title = "Visible";
});

更多功能和兼容性详见MDN

Accelerometer

• 传感器API的加速计接口在每次读取时提供沿所有三个轴施加到设备的加速度。这可以用来创建使用设备的运动控制的游戏，或者在用户摇动设备时添加交互，有很强的可玩性！

• 要使用此传感器，用户必须通过权限API授予“加速计”设备传感器权限。

• 此功能可能被服务器上设置的权限策略阻止。

const acl = new Accelerometer({ frequency: 60 });

acl.addEventListener("reading", () => {
  const vector = [acl.x, acl.y, acl.z];
  const magnitude = Math.sqrt(vector.reduce((s, v) => s + v * v, 0));
  if (magnitude > THRESHOLD) {
    console.log("I feel dizzy!");
  }
});

acl.start();

获得加速计的许可

navigator.permissions.query({ name: "accelerometer" }).then((result) => {
    if (result.state === "granted") {
      // now you can use accelerometer api
    } 
  });

更多功能和兼容性详见MDN

Geolocation

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许网站或应用基于用户的地理位置提供定制的信息。

带有此接口的对象可以用由 Navigator 实现的属性 NavigatorGeolocation.geolocation 来获得。

如果您正在构建与地图或基于位置的服务相关的任何内容，这将非常有用。

navigator.geolocation.getCurrentPosition(({ coords }) => {
  console.log(coords.latitude, coords.longitude);
});

您可以使用以下方式请求地理位置许可：

navigator.permissions.query({ name: "geolocation" }).then((result) => {
    if (result.state === "granted") {
      // now you can use geolocation api
    } 
  });

更多功能和兼容性详见MDN

Web Workers

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管 responseXML 和 channel 属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理器（反之亦然）。

Web Workers可以在与 Web 应用程序的主执行线程分开的后台线程中运行脚本操作。这样做的优点是可以在单独的线程中执行繁重的处理，从而允许主（通常是UI）线程运行而不会被阻塞/减慢。

// main.js
const worker = new Worker("worker.js");
worker.onmessage = (e) => console.log(e.data);
worker.postMessage([5, 3]);

// worker.js
onmessage = (e) => {
  const [a, b] = e.data;
  postMessage(a + b);
};

更多功能和兼容性详见MDN

ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。

当您有可调整大小的侧边栏时，它非常有用。

const sidebar = document.querySelector(".sidebar");
const observer = new ResizeObserver((entries) => {
  const sidebar = entries[0];
  //Do something with the element's new dimensions
});
observer.observe(sidebar);

更多功能和兼容性详见MDN

requestPermission

Notification 接口的 requestPermission()  静态方法向用户为当前来源请求显示通知的权限。

安全上下文:  此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

备注：  Safari 仍然使用回调函数语法来请求权限。使用 Notifications API 的例子说明了如何检测需使用回调函数语法的情况并以适当的方式运行代码。

通知烦人的小弹窗（或多巴胺弹窗），通过API的名字也能看出来是允许你发通知来惹恼用户，发的越多越容易惹恼哦。

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    new Notification("Hi there!", {
      body: "Notification body",
      icon: "https://tapajyoti-bose.vercel.app/img/logo.png",
    });
  }
});

更多功能和兼容性详见MDN

上面提到的一些API仍处于实验阶段，并非所有浏览器都支持。因此，如果您想在生产中使用它们，您应该检查浏览器是否支持它们