JS API其实很多很多，本次仅描述JS高级程序设计中写的内容。

Atomics 与 SharedArrayBuffer

在将这两个之前先简单的讲以下SharedArrayBuffer和Atomics ：

SharedArrayBuffer和ArrayBuffer

它们是用于在JS单线程中处理二进制数据的对象，但它们在使用场景上有着重要的区别：

内存共享：

ArrayBuffer：
ArrayBuffer 用于在单线程中处理二进制数据。它不能在不同线程之间共享内存。
每个线程在使用 ArrayBuffer 时都有自己的独立副本，操作时会复制数据。
SharedArrayBuffer:
SharedArrayBuffer 允许多个线程（如 Web Workers）之间共享同一块内存区域。
通过共享内存，多个线程可以并发地读写同一块内存，避免了数据复制的开销。

原子操作支持

ArrayBuffer:
不提供原子操作的支持。由于内存不共享，所以不需要处理并发访问的问题。
SharedArrayBuffer:
提供与 Atomics 结合使用的支持，以确保在多个线程间进行数据操作时的安全性和一致性。
你可以使用 Atomics 方法（如 Atomics.store()、Atomics.load()、Atomics.wait() 等）来执行原子操作，从而防止竞争条件。

适用场景

ArrayBuffer:
1适合用于单线程应用程序中的二进制数据处理，如图像、音频文件的读取和处理。
主要用于传统的 JavaScript 环境，例如浏览器中的图形、音频等操作。
SharedArrayBuffer:
适合于需要并行处理的多线程应用程序，如使用 Web Workers 的高性能计算。
用于实时数据处理、游戏开发、科学计算等场景。

总结

ArrayBuffer 是用于单线程中的二进制数据处理，适合简单的内存操作。
SharedArrayBuffer 是为了支持多线程环境中的内存共享和数据并发处理，提供了原子操作的支持，适合高性能和实时应用场景。

这两种类型的对象根据具体需求选择使用，ArrayBuffer 更常用于单线程环境，而 SharedArrayBuffer 更适合需要并发操作的情况

Atomics

Atomics 是 JavaScript 中的一个全局对象，提供了一组静态方法，用于在共享内存（如 SharedArrayBuffer）上执行原子操作。这些操作是不可分割的，意味着它们在执行过程中不会被中断，从而确保了多线程环境下数据的一致性和安全性。

主要特点

原子性: Atomics 的操作是原子的，确保在多线程环境中，数据的读写不会出现竞争条件。即使多个线程同时访问共享内存，也能保证数据的正确性。
支持共享内存: Atomics 主要用于与 SharedArrayBuffer 结合使用，以实现多线程编程中对共享数据的安全访问。
多种操作: Atomics 提供了多种方法，用于执行加、减、按位运算、加载、存储、等待、通知等操作。

主要方法

加载和存储:
Atomics.load(typedArray, index): 从指定的索引读取共享内存中的值。
Atomics.store(typedArray, index, value): 将值存储到指定的索引。
加减法:
Atomics.add(typedArray, index, value): 将指定的值加到索引处的当前值，并返回原值。
Atomics.sub(typedArray, index, value): 将指定的值从索引处的当前值中减去，并返回原值。
按位操作:
Atomics.and(typedArray, index, value): 对索引处的值执行按位与操作。
Atomics.or(typedArray, index, value): 对索引处的值执行按位或操作。
Atomics.xor(typedArray, index, value): 对索引处的值执行按位异或操作。
比较与交换:
Atomics.compareExchange(typedArray, index, expectedValue, newValue): 如果索引处的值等于预期值，则将其替换为新值，并返回原值。
等待与通知:
Atomics.wait(typedArray, index, expectedValue, timeout): 如果索引处的值等于预期值，线程会等待，直到其他线程调用 Atomics.notify() 或超时。
Atomics.notify(typedArray, index, count): 唤醒一个或多个在指定索引上等待的线程。

以下是一个使用 Atomics 的简单示例，展示如何在共享内存中使用原子操作进行线程同步：

// 创建一个共享内存区域

let sab = new SharedArrayBuffer(4); // 4 bytes for Int32Array

let sharedArray = new Int32Array(sab);

// 线程 A: 生产者

function producer() {

for (let i = 0; i < 10; i++) {

Atomics.store(sharedArray, 0, i); // 存储数据

Atomics.notify(sharedArray, 0, 1); // 通知消费者

console.log('Produced:', i);

}

}

// 线程 B: 消费者

function consumer() {

for (let i = 0; i < 10; i++) {

Atomics.wait(sharedArray, 0, i); // 等待生产者生产数据

console.log('Consumed:', Atomics.load(sharedArray, 0)); // 读取数据

}

}

在这个示例中，生产者线程通过 Atomics.store() 将数据存储到共享内存中，并使用 Atomics.notify() 通知消费者线程。而消费者线程通过 Atomics.wait() 等待生产者存储的数据，确保了数据的安全访问。

总结

Atomics 是处理多线程编程中共享内存安全性的关键工具，提供了确保数据一致性和防止竞争条件的方法。它在实现复杂的多线程应用程序时非常有用，尤其是在需要高性能和实时数据处理的场景中。

跨上下文消息

在 JavaScript 中，跨上下文消息通常涉及到不同的执行环境之间的通信，例如在不同的窗口、iframe 或 web workers 之间。以下是一些常见的方法：

postMessage 方法：
用于在不同窗口、iframe 或者同源不同窗口之间传递消息。适用于需要跨源通信的场景。
BroadcastChannel API：
允许同源的不同浏览器上下文（例如多个标签页或窗口）之间发送消息。适合用于简单的发布/订阅模型。
Web Workers：
通过 postMessage 方法在主线程与 Web Worker 之间传递消息，适合于需要在后台线程执行复杂计算的情况。
LocalStorage / SessionStorage：
可以通过监听 storage 事件实现不同标签页之间的通信，但它只能用于同源的上下文。
Cookies：
虽然不直接用于实时通信，但可以利用 cookies 来传递小量数据，并通过轮询的方式实现通信。
SharedArrayBuffer：
在 Web Worker 和主线程之间共享内存数据，可以实现高效的数据传输，适合需要大量数据交换的场景。
Service Workers：
用于实现离线功能和在多个窗口之间进行缓存和消息传递。可以使用 postMessage 与客户端之间通信。

Encoding API

提供了一种标准化的方法来处理和转换文本编码，尤其在处理不同字符编码时非常有用。。规范新增了 4 个用于执行转换的全局类：TextEncoder、TextEncoderStream、TextDecoder 和 TextDecoderStream。

其中TextEncoder 和 TextDecoder 是用于单次编码和解码的方法，适合小数据量或简单操作。

TextEncoderStream 和 TextDecoderStream 则是流式版本，适合处理大数据量、需要逐块处理的场景。它们提供了更好的内存管理和性能

TextEncoder和TextDecoder

TextEncoder

TextEncoder 接口用于将字符串转换为 Uint8Array 字节序列。
默认使用 UTF-8 编码，但也可以配置为其他编码。

// 创建一个新的 TextEncoder

const encoder = new TextEncoder();

// 将字符串编码为 Uint8Array

const encodedData = encoder.encode('你好，世界！');

console.log(encodedData); // 输出 Uint8Array

TextDecoder

TextDecoder 接口用于将 Uint8Array 字节序列解码回字符串。
可以指定编码格式，如 UTF-8、ISO-8859-1 等。

// 创建一个新的 TextDecoder

const decoder = new TextDecoder('utf-8');

// 将 Uint8Array 解码为字符串

const decodedData = decoder.decode(encodedData);

console.log(decodedData); // 输出 '你好，世界！'

TextEncoder 和 TextDecoder 支持多种编码格式，包括：

utf-8
utf-16
iso-8859-1
windows-1252
gbk 等

应用场景

网络传输：在使用 Fetch API 或 XMLHttpRequest 发送和接收数据时，可以使用编码 API 来确保数据以正确的格式进行传输。
文件处理：在读取和写入文件时，特别是在处理文本文件时，可以使用编码 API 进行转换。
数据存储：在将数据存储在 IndexedDB 或其他存储机制中时，可以将文本编码为字节数组。

TextEncoderStream 和 TextDecoderStream

TextEncoderStream 和 TextDecoderStream 是 JavaScript 中用于处理文本和字节流的两个流接口，允许进行流式文本编码和解码。以下是它们的详细解释，包括功能、用途、示例和使用场景。

TextEncoderStream

是一个可写流，用于将文本字符串逐块编码为字节流（Uint8Array），主要用于处理大文本数据。功能：

将输入的文本流（如字符串）逐块编码为字节流，支持 UTF-8 编码。
避免一次性将整个文本加载到内存中，更适合处理大数据。

以下是一个简单的示例，演示如何使用 TextEncoderStream 将文本流转换为字节流：

// 创建一个 TextEncoderStream 实例

const encoderStream = new TextEncoderStream();

// 创建一个可读流

const readableStream = new ReadableStream({

start(controller) {

controller.enqueue('你好，');

controller.enqueue('世界！');

controller.close();

}

});

// 将可读流通过 encoderStream 连接到可写流

readableStream.pipeTo(encoderStream.writable).then(() => {

console.log('编码完成');

});

// 监听编码后的字节流

const reader = encoderStream.readable.getReader();

reader.read().then(function processText({ done, value }) {

if (done) {

console.log('读取完成');

return;

}

console.log('编码后的字节流:', value); // 输出编码后的字节数组

return reader.read().then(processText);

});

TextDecoderStream

是一个可读流，用于将字节流逐块解码为文本字符串，支持多种字符编码格式（如 UTF-8、UTF-16 等）。功能：

从输入的字节流中逐块解码文本，适合处理大数据流。
支持不同的字符编码格式，可以根据需要指定。

以下是一个示例，演示如何使用 TextDecoderStream 将字节流解码为文本流：

// 创建一个 TextDecoderStream 实例

const decoderStream = new TextDecoderStream();

// 创建一个可读字节流

const readableByteStream = new ReadableStream({

start(controller) {

const bytes = new TextEncoder().encode('你好，世界！');

controller.enqueue(bytes);

controller.close();

}

});

// 将字节流通过 decoderStream 连接到可写流

readableByteStream.pipeTo(decoderStream.writable).then(() => {

console.log('解码完成');

});

// 监听解码后的文本流

const reader = decoderStream.readable.getReader();

reader.read().then(function processText({ done, value }) {

if (done) {

console.log('读取完成');

return;

}

console.log('解码后的文本流:', value); // 输出解码后的文本

return reader.read().then(processText);

});

使用场景

文本数据传输：在网络传输中，可以使用 TextEncoderStream 将文本数据编码为字节流，然后通过网络发送；接收方使用 TextDecoderStream 解码字节流为文本。
文件处理：在处理大文件时，可以逐块读取并编码为字节流，或者将字节流逐块解码为文本，减少内存使用。
实时数据处理：在实时应用（如聊天应用或流媒体）中，可以使用这两个流接口逐块处理数据，提高响应速度和效率。

File API 与 Blob API

File API 和 Blob API 是 Web 开发中处理文件和二进制数据的重要接口。

File API

File API 允许 Web 应用访问用户计算机上的文件。主要用于处理文件上传、文件预览和读取文件内容等操作。

主要对象

File: 表示用户选择的文件，继承自 Blob，包含以下属性：
name: 文件名。
size: 文件大小（以字节为单位）。
type: 文件 MIME 类型。
lastModified: 文件最后修改的时间戳。
FileList: 表示用户选择的多个文件的集合，通常通过 <input type="file"> 获取。
FileReader: 用于异步读取文件内容，支持以下方法：
readAsText(file): 读取文件内容并将其作为文本返回。
readAsDataURL(file): 读取文件内容并将其作为 Data URL 返回（适用于图像等）。
readAsArrayBuffer(file): 读取文件内容并返回 ArrayBuffer。

事件

load: 读取操作成功完成时触发。
error: 读取操作失败时触发。
progress: 读取进度更新时触发。

使用示例

const fileInput = document.getElementById('fileInput');

const fileContent = document.getElementById('fileContent');

fileInput.addEventListener('change', (event) => {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = (e) => {

fileContent.textContent = e.target.result; // 显示文件内容

};

reader.onerror = () => {

fileContent.textContent = '文件读取出错！';

};

reader.readAsText(file); // 读取文件为文本

}

});

</script>

Blob API

Blob API 允许创建和操作原始数据（如图像、视频和音频）。Blob 对象代表不可变的原始数据。

主要对象

Blob: 表示原始数据的不可变对象，构造函数接收一个 BlobPart 数组和一个选项对象。
属性:
size: Blob 的大小（以字节为单位）。
type: Blob 的 MIME 类型。
BlobPart: Blob 的组成部分，可以是字符串、ArrayBuffer 或其他 Blob 对象。

创建 Blob

可以使用 new Blob() 构造函数创建 Blob：

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

生成 URL

const url = URL.createObjectURL(blob);

使用示例

document.getElementById('downloadBtn').addEventListener('click', () => {

const data = new Blob(['Hello, world!'], { type: 'text/plain' });

const url = URL.createObjectURL(data);

const a = document.createElement('a');

a.href = url;

a.download = 'hello.txt'; // 指定下载文件名

document.body.appendChild(a);

a.click(); // 自动触发下载

document.body.removeChild(a);

URL.revokeObjectURL(url); // 释放 URL

});

</script>

File API 和 Blob API 的比较

特性	File API	Blob API
主要用途	处理用户文件输入	处理和生成原始数据
主要对象	File, FileList, FileReader	Blob
创建方式	从文件输入选择	使用 new Blob() 创建
文件信息	提供文件名、大小、类型等信息	主要提供大小和类型
读取内容	使用 FileReader 读取文件	通过 Blob 直接处理数据
支持的格式	文本、图像、视频等	原始二进制数据

应用场景

File API:
文件上传：允许用户选择文件并上传到服务器。
文件预览：在上传之前显示用户选择的文件内容或图像预览。
Blob API:
动态生成文件：在用户操作后动态创建文件并提供下载。
处理图像、音频、视频等：直接在浏览器中处理二进制数据。

读取拖放文件

组合使用 HTML5 拖放 API 与 File API 可以创建读取文件信息的有趣功能。在页面上创建放置目标后，可以从桌面上把文件拖动并放到放置目标。这样会像拖放图片或链接一样触发 drop 事件。被放置的文件可以通过事件的 event.dataTransfer.files 属性读到，这个属性保存着一组 File 对象，就像文本输入字段一样。下面的例子会把拖放到页面放置目标上的文件信息打印出来：

let droptarget = document.getElementById('droptarget');

function handleEvent(event) {

let info = '',

output = document.getElementById('output'),

files,

i,

len;

event.preventDefault();

if (event.type == 'drop') {

files = event.dataTransfer.files;

i = 0;

len = files.length;

while (i < len) {

info += `${files[i].name} (${files[i].type}, ${files[i].size} bytes)<br>`;

i++;

}

output.innerHTML = info;

}

}

droptarget.addEventListener("dragenter", handleEvent);

droptarget.addEventListener("dragover", handleEvent);

droptarget.addEventListener("drop", handleEvent);

与后面要介绍的拖放的例子一样，必须取消 dragenter、dragover 和 drop 的默认行为。在drop 事件处理程序中，可以通过 event.dataTransfer.files 读到文件，此时可以获取文件的相关信息。

媒体元素

在 HTML 中，媒体元素用于嵌入和播放音频和视频内容。主要的媒体元素包括 <audio> 和 <video>，这两个元素支持多种属性和方法，便于控制播放、暂停、音量等功能。

您的浏览器不支持音频元素。

</audio>

您的浏览器不支持视频元素。

</video>

属性

<video>和<audio>元素提供了稳健的 JavaScript 接口。这两个元素有很多共有属性，可以用于确定媒体的当前状态。

属性	数据类型	说明
autoplay	Boolean	取得或设置 autoplay 标签
buffered	TimeRanges	表示已下载缓冲的时间范围
bufferedBytes	ByteRanges	对象，表示已下载缓冲的字节范围
bufferingRate	Integer	平均每秒下载的位数
bufferingThrottled	Boolean	示缓冲是否被浏览器截流
controls	Boolean	取得或设置 controls 属性，用于显示或隐藏浏览器内置控件
currentLoop	Integer	媒体已经播放的循环次数
currentSrc	String	当前播放媒体的 URL
currentTime	Float	已经播放的秒数
defaultPlaybackRate	Float	取得或设置默认回放速率。默认为 1.0 秒
duration	Float	媒体的总秒数
ended	Boolean	表示媒体是否播放完成
loop	Boolean	取得或设置媒体是否应该在播放完再循环开始
muted	Boolean	取得或设置媒体是否静音
networkState	Integer	表示媒体当前网络连接状态。0 表示空，1 表示加载中，2 表示加载元数据，3 表示加载了第一帧，4 表示加载完成
paused	Boolean	表示播放器是否暂停
playbackRate	Float	取得或设置当前播放速率。用户可能会让媒体播放快一些或慢一些。与defaultPlaybackRate 不同，该属性会保持不变，除非开发者修改
played	TimeRanges	到目前为止已经播放的时间范围
readyState	Integer	表示媒体是否已经准备就绪。0 表示媒体不可用，1 表示可以显示当前帧，2 表示媒体可以开始播放，3 表示媒体可以从头播到尾
seekable	TimeRanges	可以跳转的时间范围
seeking	Boolean	表示播放器是否正移动到媒体文件的新位置
src	String	媒体文件源。可以在任何时候重写
start	Float	取得或设置媒体文件中的位置，以秒为单位，从该处开始播放
totalBytes	Integer	资源需要的字节总数（如果知道的话）
videoHeight	Integer	返回视频（不一定是元素）的高度。只适用于<video>
videoWidth	Integer	返回视频（不一定是元素）的宽度。只适用于<video>
volume	Float	取得或设置当前音量，值为 0.0 到

事件

事件	何时触发
abort	下载被中断
canplay	回放可以开始，readyState 为 2
canplaythrough	回放可以继续，不应该中断，readState 为 3
canshowcurrentframe	已经下载当前帧，readyState 为 1
dataunavailable	不能回放，因为没有数据，readyState 为 0
durationchange	duration 属性的值发生变化
emptied	网络连接关闭了
empty	发生了错误，阻止媒体下载
ended	媒体已经播放完一遍，且停止了
error	下载期间发生了网络错误
load	所有媒体已经下载完毕。这个事件已被废弃，使用 canplaythrough 代替
loadeddata	媒体的第一帧已经下载
loadedmetadata	媒体的元数据已经下载
loadstart	下载已经开始
pause	回放已经暂停
play	媒体已经收到开始播放的请求
playing	媒体已经实际开始播放了
progress	下载中
ratechange	媒体播放速率发生变化
seeked	跳转已结束
stalled	浏览器尝试下载，但尚未收到数据
timeupdate	currentTime 被非常规或意外地更改了
volumechange	volume 或 muted 属性值发生了变化
waiting	回放暂停，以下载更多数据

自定义播放器

可以使用 CSS 和 JavaScript 自定义音频和视频播放器的外观和功能。

您的浏览器不支持视频元素。

</video>

</div>

const video = document.getElementById('myVideo');

const playBtn = document.getElementById('playBtn');

const pauseBtn = document.getElementById('pauseBtn');

playBtn.addEventListener('click', () => {

video.play();

});

pauseBtn.addEventListener('click', () => {

video.pause();

});

</script>

检测编解码器

如前所述，并不是所有浏览器都支持<video>和<audio>的所有编解码器，这通常意味着必须提供多个媒体源。为此，也有 JavaScript API 可以用来检测浏览器是否支持给定格式和编解码器。这两个媒体元素都有一个名为 canPlayType()的方法，该方法接收一个格式/编解码器字符串，返回一个字符串值："probably"、"maybe"或""（空字符串），其中空字符串就是假值，意味着可以在 if 语句中像这样使用 canPlayType()：

if (audio.canPlayType("audio/mpeg")) {

// 执行某些操作

}

"probably"和"maybe"都是真值，在 if 语句的上下文中可以转型为 true。在只给 canPlayType()提供一个 MIME 类型的情况下，最可能返回的值是"maybe"和空字符串。这是因为文件实际上只是一个包装音频和视频数据的容器，而真正决定文件是否可以播放的是编码。在同时提供 MIME 类型和编解码器的情况下，返回值的可能性会提高到"probably"。下面是几个例子：

let audio = document.getElementById("audio-player");

// 很可能是"maybe"

if (audio.canPlayType("audio/mpeg")) {

// 执行某些操作

}

// 可能是"probably"

if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")) {

// 执行某些操作

}

注意，编解码器必须放到引号中。同样，也可以在视频元素上使用 canPlayType()检测视频格式。

音频类型

<audio>元素还有一个名为 Audio 的原生 JavaScript 构造函数，支持在任何时候播放音频。Audio类型与 Image 类似，都是 DOM 元素的对等体，只是不需插入文档即可工作。要通过 Audio 播放音频，只需创建一个新实例并传入音频源文件：

let audio = new Audio("sound.mp3");

EventUtil.addHandler(audio, "canplaythrough", function(event) {

audio.play();

});

创建 Audio 的新实例就会开始下载指定的文件。下载完毕后，可以调用 play()来播放音频。在 iOS 中调用 play()方法会弹出一个对话框，请求用户授权播放声音。为了连续播放，必须在onfinish 事件处理程序中立即调用 play()。

原生拖放

HTML5 在 IE 的拖放实现基础上标准化了拖放功能。所有主流浏览器都根据 HTML5 规范实现了原生的拖放。关于拖放最有意思的可能就是可以跨窗格、跨浏览器容器，有时候甚至可以跨应用程序拖动元素。浏览器对拖放的支持可以让我们实现这些功能。

拖放事件

当某个元素被拖动时，会按顺序触发：

dragstart
drag
dragend 或 drop

将元素拖动到一个有效的放置目标上时，会依次触发：

dragenter
dragover
dragleave

自定义放置目标

在把某个元素拖动到无效放置目标上时，会看到一个特殊光标（圆环中间一条斜杠）表示不能放下。即使所有元素都支持放置目标事件，这些元素默认也是不允许放置的。如果把元素拖动到不允许放置的目标上，无论用户动作是什么都不会触发 drop 事件。不过，通过覆盖 dragenter 和 dragover 事件的默认行为，可以把任何元素转换为有效的放置目标。例如，如果有一个 ID 为"droptarget"的<div>元素，那么可以使用以下代码把它转换成一个放置目标：

let droptarget = document.getElementById("droptarget");

droptarget.addEventListener("dragover", (event) => {

event.preventDefault();

});

droptarget.addEventListener("dragenter", (event) => {

event.preventDefault();

});

执行上面的代码之后，把元素拖动到这个<div>上应该可以看到光标变成了允许放置的样子。另外，drop 事件也会触发。

在 Firefox 中，放置事件的默认行为是导航到放在放置目标上的 URL。这意味着把图片拖动到放置目标上会导致页面导航到图片文件，把文本拖动到放置目标上会导致无效 URL 错误。为阻止这个行为，在 Firefox 中必须取消 drop 事件的默认行为：

droptarget.addEventListener("drop", (event) => {

event.preventDefault();

});

可拖动能力

默认情况下，图片、链接和文本是可拖动的，这意味着无须额外代码用户便可以拖动它们。文本只有在被选中后才可以拖动，而图片和链接在任意时候都是可以拖动的。我们也可以让其他元素变得可以拖动。HTML5 在所有 HTML 元素上规定了一个 draggable 属性，表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true，而其他所有元素此属性的默认值为 false。如果想让其他元素可拖动，或者不允许图片和链接被拖动，都可以设置这个属性。

例如：

其他成员

HTML5 规范还为 dataTransfer 对象定义了下列方法。

addElement(element)：为拖动操作添加元素。这纯粹是为了传输数据，不会影响拖动操作的外观。在本书写作时，还没有浏览器实现这个方法。
clearData(format)：清除以特定格式存储的数据。
setDragImage(element, x, y)：允许指定拖动发生时显示在光标下面的图片。这个方法接收 3 个参数：要显示的 HTML 元素及标识光标位置的图片上的 x 和 y 坐标。这里的 HTML 元素可以是一张图片，此时显示图片；也可以是其他任何元素，此时显示渲染后的元素。
types：当前存储的数据类型列表。这个集合类似数组，以字符串形式保存数据类型，比如"text"。

Notifications API

Notifications API 用于向用户显示通知。无论从哪个角度看，这里的通知都很类似 alert()对话框：都使用 JavaScript API 触发页面外部的浏览器行为，而且都允许页面处理用户与对话框或通知弹层的交互。不过，通知提供更灵活的自定义能力。

Notifications API 在 Service Worker 中非常有用。渐进 Web 应用（PWA，Progressive Web Application）通过触发通知可以在页面不活跃时向用户显示消息，看起来就像原生应用。

通知权限

Notifications API 有被滥用的可能，因此默认会开启两项安全措施：

通知只能在运行在安全上下文的代码中被触发；
通知必须按照每个源的原则明确得到用户允许。

用户授权显示通知是通过浏览器内部的一个对话框完成的。除非用户没有明确给出允许或拒绝的答复，否则这个权限请求对每个域只会出现一次。浏览器会记住用户的选择，如果被拒绝则无法重来。页面可以使用全局对象 Notification 向用户请求通知权限。这个对象有一个 requestPemission()方法，该方法返回一个期约，用户在授权对话框上执行操作后这个期约会解决。

Notification.requestPermission()

.then((permission) => {

console.log('User responded to permission request:', permission);

});

"granted"值意味着用户明确授权了显示通知的权限。除此之外的其他值意味着显示通知会静默失败。如果用户拒绝授权，这个值就是"denied"。一旦拒绝，就无法通过编程方式挽回，因为不可能再触发授权提示。

显示和隐藏通知

Notification 构造函数用于创建和显示通知。最简单的通知形式是只显示一个标题，这个标题内容可以作为第一个参数传给 Notification 构造函数。以下面这种方式调用 Notification，应该会立即显示通知：

new Notification('Title text!');

可以通过 options 参数对通知进行自定义，包括设置通知的主体、图片和振动等：

new Notification('Title text!', {

body: 'Body text!',

image: 'path/to/image.png',

vibrate: true

});

调用这个构造函数返回的 Notification 对象的 close()方法可以关闭显示的通知。下面的例子展示了显示通知后 1000 毫秒再关闭它：

const n = new Notification('I will close in 1000ms');

setTimeout(() => n.close(), 1000);

通知生命周期回调

通知并非只用于显示文本字符串，也可用于实现交互。Notifications API 提供了 4 个用于添加回调的生命周期方法：

onshow 在通知显示时触发；
onclick 在通知被点击时触发；
onclose 在通知消失或通过 close()关闭时触发；
onerror 在发生错误阻止通知显示时触发。

下面的代码将每个生命周期事件都通过日志打印了出来：

const n = new Notification('foo');

n.onshow = () => console.log('Notification was shown!');

n.onclick = () => console.log('Notification was clicked!');

n.onclose = () => console.log('Notification was closed!');

n.onerror = () => console.log('Notification experienced an error!');

Page Visibility API

Web 开发中一个常见的问题是开发者不知道用户什么时候真正在使用页面。如果页面被最小化或隐藏在其他标签页后面，那么轮询服务器或更新动画等功能可能就没有必要了。Page Visibility API 旨在为开发者提供页面对用户是否可见的信息。

这个 API 本身非常简单，由 3 部分构成。

document.visibilityState 值，表示下面 4 种状态之一

页面在后台标签页或浏览器中最小化了。
页面在前台标签页中。
实际页面隐藏了，但对页面的预览是可见的（例如在 Windows 7 上，用户鼠标移到任务栏图标上会显示网页预览）。
页面在屏外预渲染。

visibilitychange 事件，该事件会在文档从隐藏变可见（或反之）时触发。

document.hidden 布尔值，表示页面是否隐藏。这可能意味着页面在后台标签页或浏览器中被最小化了。这个值是为了向后兼容才继续被浏览器支持的，应该优先使用 document.visibilityState检测页面可见性。

要想在页面从可见变为隐藏或从隐藏变为可见时得到通知，需要监听 visibilitychange 事件。document.visibilityState 的值是以下三个字符串之一：

"hidden"
"visible"
"prerender"

document.addEventListener('visibilitychange', function() {

if (document.hidden) {

console.log('页面不可见，可能在后台');

} else {

console.log('页面可见');

}

});

Streams API