几个你不知道却非常实用的JavaScript APIs

Page Visibility API

这是一个鲜为人知的 web API，在JS现状调查中，它的认知度排名倒数第四。它可以让你知道用户何时离开了页面。准确地说，只要页面的可见性状态发生变化，无论是用户最小化、最大化窗口还是切换标签页，该API都会触发一个事件。

在过去，你不得不使用一些噱头来了解用户是否切换了标签页或最小化了窗口。最流行的方式是使用blur和focus浏览器事件。使用这些事件会导致类似下面情况的发生：

window.addEventListener("focus", function () {
    // User is back on the page
    // Do Something
});

window.addEventListener("blur", function () {
    // User left the page
    // Do Something
});

前面的代码可以工作，但是不符合预期。因为blur事件是在页面失去焦点时触发的，所以当用户点击搜索栏、alert对话框、控制台或窗口边框时，它就会被触发。所以，blur和focus只告诉我们页面是否被激活，但不告诉我们页面的内容是否被隐藏或显示。

什么时候使用

• 一般来说，我们想要使用Page Visibility API，是希望用来停止不必要的程序。比如说当用户没有看到页面时，或者执行后台操作时。具体的场景可以是：
  • 当用户离开页面时暂停视频、图像旋转或动画；
  • 如果页面显示来自API的实时数据，在用户离开时暂时停止实时显示的行为；
  • 发送用户分析报告。

如何使用

Page Visibility API带来了两个属性和一个事件，用于访问页面可见性状态：

• document.hidden：该属性是全局可见并且只读。尽量避免使用该属性，因为现在已经被废弃了。当访问该属性时，如果页面是隐藏状态则返回true，如果页面是可见状态则返回false。

• document.visibilityState：该属性是document.hidden更新后的版本。当访问该属性时，会根据页面的可见性状态返回四个可能的值：

  • visible：该页面是可见的，或者准确地说，它没有被最小化，也不在另一个标签页。
  • hidden：该页面不可见，它是最小化的，或者在另一个标签页。
  • prerender：这是一个可见页面在预渲染时的初始状态。一个页面的可见性状态可以从prerender开始，然后改变到另一个状态，但它不能从另一个状态改变到prerender。
  • unloaded：该页面正在从内存中卸载。

• visibilitychange：这是一个由document对象提供的事件，当页面的visibilityState发生变化时被触发。

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // page is visible
    } else {
        // page is hidden
    }
});

Web Share API

这是什么

Web Share API也是最不为人所知的API之一，但却非常有用。它可以让你访问操作系统的原生分享机制，这对移动端用户特别有用。有了这个API，你可以分享文本、链接和文件，而不需要创建你自己的分享机制或使用第三方的分享机制。

什么时候使用

用途已经不言自明。你可以用它将你的页面内容分享到社交媒体上，或将其复制到用户的剪贴板上。

如何使用

Web Share API赋予我们两个接口来访问用户的分享系统：

• navigator.canShare()：接受你想分享的数据作为参数，并根据其是否可分享，来返回一个布尔参数。

• navigator.share()：返回一个promise，如果分享成功的话，该promise将会resolve。该接口会调用原生分享机制，并接收你想分享的数据作为参数。注意，它只能在用户按下链接或按钮时调用。也就是说，它需要transient activation（瞬时激活）。分享数据是一个可以具有以下属性的对象：

  • url：要分享的链接
  • text：要分享的文本
  • title：要分享的标题
  • files：表示要分享的File对象数组

Broadcast Channel API

这是什么

我想谈论的另一个API是Broadcast Channel API 。它允许浏览器上下文互相发送和接收基本数据。浏览器上下文是指标签页、窗口、iframe等元素，或任何可以显示页面的地方。出于安全考量，浏览器上下文之间的通信是不被允许的，除非它们是同源的并使用Broadcast Channel API。对于两个同源的浏览器上下文，它们的URL必须有相同的协议（如http/https）、域（如example.com）和端口（如:8080）。

什么时候使用

• Broadcast Channel API通常用于在不同的标签页和窗口之间保持页面状态同步，以提高用户体验或出于安全原因考虑。它也可以用来知道一个服务在另一个标签页或窗口中何时完成。使用场景有：
  • 在所有标签页上登录或注销用户。
  • 检测资源何时上传，并在所有页面中展示它。
  • 指示service worker做一些幕后工作。

如何使用

Broadcast Channel API涉及一个BroadcastChannel对象，该对象可用于向其他上下文发送信息。构造函数只有一个参数：作为标识符的字符串，该标识符从其他上下文连接到频道。

const broadcast = new BroadcastChannel("new_channel");

• 一旦我们在两个上下文中创建了具有相同标识符的BroadcastChannel对象，这个新的BroadcastChannel对象将有两个可用的方法来开始进行通信：
  • BroadcastChannel.postMessage()：在所有连接的上下文中发送消息。它接受任意类型的对象作为其唯一的参数，因此你可以发送各种各样的数据。

broadcast.postMessage("Example message");

- BroadcastChannel.close()：关闭通道，向浏览器表明它不会再收到任何信息，这样它就可以把这些信息收集到垃圾回收中。

为了接受信息，BroadcastChannel有一个message事件，我们可以使用addEventListener或其onmessage属性来监听。message事件有一个data属性，包含发送的数据和其他属性，以识别发送消息的上下文，如origin、lastEventId、source和ports。

broadcast.onmessage = ({data, origin}) => {
    console.log(`${origin} says ${data}`);
};

Internationalization API

这是什么

在开发一个网页或应用程序时，需要将其内容翻译成其他语言以覆盖更广泛的受众是非常常见的。然而，仅仅将你的网页文本翻译成你所需要的任何语言，并不足以使你的内容对讲该语言的人可用，因为像日期、数字、单位等东西在不同国家是不同的，可能会给你的用户带来困惑。

• 我们假设你想在你的网页上展示日期"2022年11月8日"，就像"11/8/22"。根据读者所在的国家，这些数据可以用三种不同的方式来阅读：
  • "11/8/2022"或美国用户的MM/DD/YY。
  • "8/11/2022"或欧洲和拉美用户的DD/MM/YY。
  • "2011/8/22"或日本、中国和加拿大用户的YY/MM/DD。

这就是Internationalization API（或I18n API）来解决不同语言和地区的格式问题的地方。I18n API是一个了不起的工具，有多种用途，但我们不会深入研究，以免使本文过于复杂。

如何使用

• I18n API使用locale标识符来起作用。locale标识符是一个字符串，用来表示用户的语言、城市、地区、方言以及其他偏好。准确的说，locale标识符是一个字符串，由连字符分隔的子标签组成。子标签代表了用户偏好，比如语言、国家、地区或文字，并以以下方式格式化：
  • "zh"：中文（语言）；
  • "zh-Hant"：用繁体字（文字）书写的中文（语言）；
  • "zh-Hant-TW"：在台湾（地区）使用的繁体字（文字）书写的中文（语言）。

还有更多的子标签来解决更多用户的偏好（如果你想了解更多，你可以查看RFC[10]对语言标签的定义），但简而言之，I18n API使用这些locale标识符来知道如何格式化所有语言敏感的数据。

• 更确切地说，I18n API提供了一个Intl对象，它带来了一堆专门的构造函数来处理对语言敏感的数据。在我看来，一些对国际化最有用的Intl构造函数是：
  • Intl.DateTimeFormat()：用于格式化日期和时间。
  • Intl.DisplayNames()：用于格式化语言、地区和文字显示名字。
  • Intl.Locale()：用于构建和操作locale标识符标签。
  • Intl.NumberFormat()：用于格式化数字。
  • Intl.RelativeTimeFormat()：用于格式化相对时间描述。

在我们的例子中，我们将重点关注Intl.DateTimeFormat()构造函数，以根据用户的区域设置来格式化引用的dateAdded属性。Intl.DateTimeFormat()构造函数接收两个参数：定义日期格式约定的locale字符串和用于自定义日期格式的options对象。

创建的Intl.DateTimeFormat()对象有一个format()方法，它接收两个参数：我们要格式化的Date对象和用于自定义如何显示格式化日期的options对象。

const logDate = (locale) => {
    const newDate = new Date("2022-10-24"); // YY/MM/DD
    const dateTime = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});
    const formatedDate = dateTime.format(newDate);
    console.log(formatedDate);
};

logDate("en-US"); // 10/24/2022
logDate("de-DE"); // 24.10.2022
logDate("zh-TW"); // 2022/10/24

注意：在Intl.DateTimeFormat构造函数的options参数中，我们将timeZone属性设置为"UTC"，这样日期就不会被格式化为用户的当地时间。在我的例子中，没有timeZone的选项，日期被解析为 "10/23/2022"。

正如你所看到的，dateTime.format()根据locale的日期格式约定改变日期。我们可以使用navigator.language全局属性在引用的日期上实现这一行为，该全局属性具有用户的首选locale设置。为此，我们将创建一个新的函数，接收一个日期字符串（YYYY-MM-DD格式），并根据用户的locale返回格式化的日期。

const formatDate = (dateString) => {
    const date = new Date(dateString);
    const locale = navigator.language;
    const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});

    return dateTimeFormat.format(date);

};

我们可以在getQuote()函数中添加这个函数来解析dateAdded日期。

const getQuote = async () => {
    if (document.visibilityState === "visible") {
        try {
            const response = await fetch("<https://api.quotable.io/random>");
            const {content, author, dateAdded} = await response.json();
            const parsedQuote = `
            <q>${content}</q> <br>
            <p>- ${author}</p><br>
            <p>Added on ${formatDate(dateAdded)}</p>`;
            quote.innerHTML = parsedQuote;
            broadcast.postMessage(parsedQuote);
        } catch (error) {
            console.error(error);
        }
    }
};

有了这个，我们的引用就被本地化为用户的首选语言了！在我的例子中，我的navigator.language值是"en"，所以我的日期被格式化为MM/DD/YY。

Blob API

Blob API 用于处理二进制数据，可以方便地将数据转换为Blob对象或从Blob对象读取数据。

// 创建一个Blob对象
const myBlob = new Blob(["Hello, world!"], { type: "text/plain" });
// 读取Blob对象的数据
const reader = new FileReader();
reader.addEventListener("loadend", () => {
 console.log(reader.result);
});
reader.readAsText(myBlob);

使用场景：在Web应用中，可能需要上传或下载二进制文件，使用Blob API可以方便地处理这些数据。

WeakSet

WeakSet 类似于Set，但可以存储弱引用的对象。这意味着，如果没有其他引用指向一个对象，那么这个对象可以被垃圾回收器回收，而不需要手动从WeakSet中删除。

const myWeakSet = new WeakSet();
const obj1 = {};
const obj2 = {};
myWeakSet.add(obj1);
myWeakSet.add(obj2);
console.log(myWeakSet.has(obj1)); // true
obj1 = null;
console.log(myWeakSet.has(obj1)); // false

使用场景：在某些情况下，可能需要存储一些临时的对象，但又不希望这些对象占用太多的内存。使用WeakSet可以方便地管理这些对象。

TextEncoder 和 TextDecoder

TextEncoder 和 TextDecoder 用于处理字符串和字节序列之间的转换。它们可以方便地将字符串编码为字节序列或将字节序列解码为字符串。

const encoder = new TextEncoder();
const decoder = new TextDecoder();
const myString = "Hello, world!";
const myBuffer = encoder.encode(myString);
console.log(myBuffer); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33]
const decodedString = decoder.decode(myBuffer);
console.log(decodedString); // "Hello, world!"

使用场景：在Web应用中，可能需要将字符串转换为二进制数据，或将二进制数据转换为字符串。使用TextEncoder和TextDecoder可以方便地进行这些转换。

Proxy API

Proxy API 可以用于创建代理对象，可以拦截对象属性的读取、赋值等操作。这个功能可以用于实现元编程、数据劫持等功能。

const myObject = {
 name: "John",
 age: 30,
};
const myProxy = new Proxy(myObject, {
 get(target, property) {
 console.log(`Getting property ${property}`);
 return target[property];
 },
 set(target, property, value) {
 console.log(`Setting property ${property} to ${value}`);
 target[property] = value;
 },
});
console.log(myProxy.name); // "John"
myProxy.age = 31; // Setting property age to 31

使用场景：在某些情况下，可能需要拦截对象属性的读取、赋值等操作，以实现更高级的功能。使用Proxy API可以方便地实现这些功能。

Object.entries() 和 Object.values()

Object.entries() 用于获取对象的可枚举属性和值的数组，Object.values() 用于获取对象的可枚举属性值的数组。

const myObject = {
 name: "John",
 age: 30,
};
console.log(Object.entries(myObject)); // [["name", "John"], ["age", 30]]
console.log(Object.values(myObject)); // ["John", 30]

使用场景：在某些情况下，可能需要获取对象的可枚举属性或属性值。使用Object.entries()和Object.values()可以方便地实现这些功能。

IntersectionObserver

IntersectionObserver 可以用于检测元素是否进入视口，可以用于实现无限滚动、懒加载等功能。

const myObserver = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
 if (entry.isIntersecting) {
 console.log(`${entry.target.id} is now visible`);
 observer.unobserve(entry.target);
 }
 });
});
const myElement = document.getElementById("myElement");
myObserver.observe(myElement);

使用场景：在Web应用中，可能需要实现无限滚动、懒加载等功能，使用IntersectionObserver可以方便地实现这些功能。

Symbol

Symbol 可以用于创建唯一标识符，可以用于定义对象的私有属性或方法。

const mySymbol = Symbol("mySymbol");
const myObject = {
 [mySymbol]: "This is a private property",
 publicProperty: "This is a public property",
};
console.log(myObject[mySymbol]); // "This is a private property"
console.log(myObject.publicProperty); // "This is a public property"

使用场景：在某些情况下，可能需要定义对象的私有属性或方法，使用Symbol可以方便地实现这些功能。

Reflect API

Reflect API 可以用于实现元编程，例如动态调用对象的方法或构造函数。

class MyClass {
 constructor(value) {
 this.value = value;
 }
 getValue() {
 return this.value;
 }
}
const myObject = Reflect.construct(MyClass, ["Hello, world!"]);
const myMethod = Reflect.get(myObject, "getValue");
const myValue = myMethod.call(myObject);
console.log(myValue); // "Hello, world!"

使用场景：在某些情况下，可能需要动态调用对象的方法或构造函数，使用Reflect API可以方便地实现这些功能。

Generator API

Generator API 可以用于生成迭代器，可以用于实现异步操作或惰性计算。

function* myGenerator() {
 yield "Hello";
 yield "world";
 yield "!";
}
const myIterator = myGenerator();
console.log(myIterator.next().value); // "Hello"
console.log(myIterator.next().value); // "world"
console.log(myIterator.next().value); // "!"

使用场景：在某些情况下，可能需要实现异步操作或惰性计算，使用Generator API可以方便地实现这些功能。

Web Workers

Web Workers 可以用于在后台线程中执行JavaScript代码，可以用于提高性能或实现复杂的计算。

// main.js
const myWorker = new Worker("worker.js");
myWorker.postMessage("Hello, worker!");
myWorker.onmessage = (event) => {
 console.log(`Message received from worker: ${event.data}`);
};
// worker.js
onmessage = (event) => {
 console.log(`Message received in worker: ${event.data}`);
 postMessage("Hello, main!");
};

使用场景：在Web应用中，可能需要处理大量计算密集型任务或执行长时间运行的操作，使用Web Workers可以提高性能或避免阻塞用户界面。

AudioContext

AudioContext 可以用于处理音频，可以用于实现音频播放、音效处理等功能。

const audioContext = new AudioContext();
fetch("https://example.com/audio.mp3")
 .then((response) => response.arrayBuffer())
 .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
 .then((audioBuffer) => {
 const source = audioContext.createBufferSource();
 source.buffer = audioBuffer;
 source.connect(audioContext.destination);
 source.start();
 });

使用场景：在Web应用中，可能需要实现音频播放、音效处理等功能，使用AudioContext可以方便地实现这些功能。

Screen Capture API

屏幕捕获API正如其名，允许我们捕获屏幕内容，使构建屏幕录制器的过程变得轻而易举。我们需要一个视频元素来显示捕获的屏幕。开始按钮将启动屏幕捕获。

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</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);

Clipboard API

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

async function copyHandler() {
  const text = "https://mankeung.github.io/docs/mk-data/";
  navigator.clipboard.writeText(text);
}

Screen Wake Lock API

你是否曾经想过YouTube是如何在播放视频时防止屏幕关闭的？这是因为使用了屏幕保持唤醒（Screen Wake Lock）API。

let wakeLock = null;

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

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

注意：只有在页面已经在屏幕上可见的情况下，才能使用屏幕唤醒锁定API。否则，会抛出错误。

Screen Orientation API

Screen Orientation API 检查当前屏幕的方向，甚至将其锁定为特定的方向。

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}

Fullscreen API

Fullscreen API 在全屏模式下显示一个元素或整个页面。

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

注意：要使用全屏API，需要用户的交互。

Web Speech

Web Speech API 可以让你将语音数据整合到网络应用中。Web Speech API 由两个部分组成： SpeechSynthesis （文本转语音）和 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 等）

AccelerometerAccelerometer

加速度计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
    }
  });

Geo-location

地理定位 API 允许我们访问用户的位置。如果你正在构建与地图或基于位置的服务相关的任何内容，这将非常有用。

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
    }
  });

Resize Observer

Resize Observer API 允许我们轻松观察元素的大小并处理其变化。当你拥有一个可调整大小的侧边栏时，它非常有用。

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);

Notification

Notification 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",
    });
  }
});

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

if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
  // Speech Recognition is supported
}

网络信息 API

网络信息 API 允许网络应用程序获取有关用户网络连接的信息，例如连接类型（例如 WiFi、蜂窝网络）和其有效带宽。该 API 可用于优化内容传递、管理离线缓存或根据网络条件提供定制体验。

要访问网络信息，可以使用 navigator.connection 对象：

const connection =
  navigator.connection ||
  navigator.mozConnection ||
  navigator.webkitConnection;
const effectiveType = connection.effectiveType;
const downlink = connection.downlink;

console.log('connection: ', connection);
console.log('Effective connection type:', effectiveType);
console.log('Downlink speed:', downlink);

媒体捕获 API

媒体捕获 API 允许网络应用程序访问设备的媒体捕获功能，如相机和麦克风。该 API 可以让你将图像和视频捕获功能直接集成到您的网络应用程序中。它特别适用于需要上传照片或视频、视频会议或增强现实体验的应用程序。

要从设备的相机中捕获媒体，可以使用 getUserMedia() 方法：

navigator.mediaDevices
  .getUserMedia({ video: true, audio: false })
  .then(function (stream) {
    // Do something with the media stream
  })
  .catch(function (error) {
    // Handle the error
  });

付款请求 API

支付请求API简化了将安全支付流程集成到Web应用程序中的过程。它提供了一种标准化的方式来收集支付信息并发起支付请求，使用户更容易进行支付，并改善整体的结账体验。这个API对于电子商务网站或任何涉及金融交易的应用程序尤为有价值。

要发起付款请求，需要创建一个 PaymentRequest 对象：

const supportedPaymentMethods = [
  {
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks: ['visa', 'mastercard'],
    },
  },
];

const paymentDetails = {
  total: {
    label: 'Total',
    amount: { currency: 'USD', value: '10.00' },
  },
};

const paymentRequest = new PaymentRequest(
  supportedPaymentMethods,
  paymentDetails,
);

paymentRequest
  .show()
  .then(function (paymentResponse) {
    console.log('paymentResponse: ', paymentResponse);
    // Process the payment response
  })
  .catch(function (error) {
    console.log('error: ', error);
    // Handle errors
  });

通过整合支付请求API，可以简化支付流程，为用户提供无缝的结账体验。

电池状态 API

电池状态API提供有关设备电池电量和状态的宝贵信息。它可以让您确定电池是否正在充电，还有多少时间才会完全耗尽，以及当前的电池电量。例如：

navigator.getBattery().then(console.log);

Web蓝牙API

Web Bluetooth API允许Web应用程序与蓝牙设备进行通信，为与物联网设备互动和创造创新的连接体验打开了可能性。该API使Web应用程序能够发现附近的蓝牙设备，建立连接并与其交换数据。它特别适用于涉及物联网设备、可穿戴设备或家庭自动化系统的应用程序。

要发现附近的蓝牙设备并连接到它们，您可以使用 requestDevice() 方法：

navigator.bluetooth
  .requestDevice({ filters: [{ services: ['heart_rate'] }] })
  .then(function (device) {
    // Connect to the selected device
  })
  .catch(function (error) {
    // Handle errors
  });

一旦连接成功，可以使用提供的API与蓝牙设备进行交互，并根据需要交换数据。

环境光传感器 API

环境光传感器API允许Web应用程序访问设备的环境光传感器。该API提供有关环境光强度的信息，使应用程序能够根据光照条件调整其显示或行为。对于需要自适应亮度、可读性优化或能源效率的应用程序特别有用。

要获取当前环境光强度，我们可以创建一个对象并监听其变化：

var sensor = new AmbientLightSensor();

sensor.onreading = function() {
  var illuminance = sensor.illuminance;
  console.log('Illuminance:', illuminance);
};

sensor.start();

通过使用环境光传感器API，我们可以创建适应光照条件、提升可读性和用户体验的网络应用程序。

媒体会话 API

媒体会话 API 允许网络应用程序控制媒体播放，为平台和设备提供一致且集成的媒体控制体验。该 API 使开发人员能够自定义媒体通知、处理媒体播放操作，并与系统媒体控制进行集成。

要处理媒体播放操作，我们可以为各种与媒体相关的事件设置事件监听器：

navigator.mediaSession.setActionHandler('play', function() {
  // Handle play action
});

navigator.mediaSession.setActionHandler('pause', function() {
  // Handle pause action
});

// Add more event listeners for other media actions

震动 API

Vibration API 允许网页控制设备的振动功能，为创建触觉反馈或在游戏中模拟效果提供机会。

使用振动 API 是很简单的。我们可以调用 vibrate() 方法，并指定振动的持续时间（以毫秒为单位）：

navigator.vibrate(3000); // Vibrate for three seconds

设备方向 API

设备方向 API 提供有关设备的物理方向和运动的信息。这个 API 对于依赖设备方向的导航或游戏等应用程序特别有用。尽管不同浏览器对该 API 的支持程度有所不同，但它为移动 Web 应用程序提供了宝贵的功能。

如果你想检测设备方向的变化，你可以为 deviceorientation 事件添加一个事件监听器：

window.addEventListener('deviceorientation', function(event) {
  console.log('Device orientation:', event.alpha, event.beta, event.gamma);
});