前端漫游指南：Web API

介绍

Web套接字

Web Workers

服务工作者

语音识别

设备传感器

文件系统访问

结论

有关 Web API 的更多信息

介绍

Web API 或 Web 浏览器 API 是内置的 JavaScript 对象和函数，可让我们利用浏览器的各种功能。

这些技术是在万维网联盟等各种组织下开发的，任何人都可以为任何规范做出贡献。

Web API 是标准化的，这意味着它们开箱即用，无需为支持特定 API 的浏览器添加任何库。然而，诸如 workbox 和 comlink 之类的库确实有助于解决更复杂的用例。

以下是浏览器的一些强大功能，您可能认为只有原生应用程序才能实现。

Web套接字
Web Workers
服务工作者
语音识别
设备传感器
文件系统访问

Web套接字

如果您曾经使用过 Web 聊天应用程序，那么很可能在后台使用过这个 API。Web Sockets 允许您在客户端和服务器之间建立实时连接，从而实现实时双向消息交换。Socket IO是启动和运行这项技术的首选库。

在 REPL 上演示
简单的 Web Socket 应用

资源

什么是 Web Socket

Web Workers

虽然 JavaScript 解释器是单线程的，但 Web Workers 允许我们在 Web 浏览器中生成额外的线程。

虽然 Web Worker 无法与 DOM 交互，但它们可以与其他 API 配合使用，并用于减轻主线程的工作负担。主线程和 Web Worker 之间也可以交换数据。

浏览器的主线程负责保持 UI 的快速响应。将工作转移到 Web Worker 可以减轻主线程的工作负担。

Comlink库可以使您的工作对象可供您的主 JavaScript 代码使用，从而使使用 Web 工作程序变得更加容易。

演示
Web Worker 冒泡排序

资源

浏览器支持

服务工作者

Service Worker API是渐进式 Web 应用 (PWA)革命的起源。Service Worker 是一个后台 JavaScript 脚本，可以执行以下操作：

拦截网络请求
缓存网络请求
预先缓存 HTML、CSS、JS 以便离线工作
推送通知

等等。Workbox可能是构建服务工作线程以适应您可能需要的任何高级缓存策略的最佳库。

例如，
我有一个最小的 PWA 启动项目，它可以离线工作，甚至有一个安装按钮可以添加到主屏幕（在 Chrome WIN 和 Android 上）。

在 REPL.it 上查看

浏览器支持

资源

语音识别

Web 原生具备语音识别功能。使用Web Speech API，您可以构建对话体验。首先，您需要创建一个 WebSpeechRecognition 对象。

if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() { ... }
  recognition.onresult = function(event) { ... }
  recognition.onerror = function(event) { ... }
  recognition.onend = function() { ... }