作为开发人员，经常使用 Web API 来轻松实现复杂的功能，或者创建它们来抽象复杂性。Web API 允许服务之间进行对话，分享信息到朋友圈或显示地图等操作。
可以将用于构建客户端 Web 应用程序的 Web API 分为两类：
- 浏览器API：是 JavaScript 可以正常使用的 API，允许开发人员轻松实现功能。 例如
DOM、Fetch、音频、视频、WebGL、notifications等等 - 第三方开发API ：这些接口通常不是内置在浏览器中的，但是由第三方平台提供的在特定环境中可以使用的API，如微信、微博分享等等
下面总结Web项目中经常接触到的API：
- 地理位置API：允许访问检索主机设备的位置信息
- 文档对象模型API：DOM 是 HTML 文档的 API，它是 JavaScript 和 HTML 文档之间的接口，有着大量的接口列表，例如 Document对象接口、Window对象接口等
- 历史记录API：在大多数路由器实现中都是抽象的。该 API 能够跟踪和修改浏览器的 URL 和历史记录，以及通过 JavaScript 访问浏览历史
- 画布API：允许通过使用
<canvas>元素在页面上显示不同的视觉图形，对于HTML游戏和图表很有用 - 动画API：支持在页面上进行协调的视觉更改，它结合了CSS过渡/动画和基于javascript的动画的优点。
在本文中，将探索一些提供移动友好功能的API，包括从社交媒体分享和剪贴板操作到联系选择器、语音和通知功能相关的内容。下面就来总结一下移动WEB的开发常用的API。
分享API
可以在网站上实现共享功能，它给人一种移动本地共享的感觉，可以共享文本、文件和设备上其他应用程序的链接。
可以通过 navigator.share 方法访问：
if (navigator.share) { navigator .share({ title: "DevPoint开发技能分析", text: "WEB开发技能分析总结", url: "https://www.devpoint.cn", }) .then(() => console.log("分享成功")) .catch((error) => console.log("分享失败", error)); }
上面的代码片段实现了如何使用普通的JavaScript共享文本，下面定义一个方法，返回按钮并完成绑定 onclick 事件：
import React from "react"; function ShareButton({ label, text, title }) { const shareDetails = { title, text }; const handleSharing = async () => { if (navigator.share) { try { await navigator .share(shareDetails) .then(() => console.log("分享成功")); } catch (error) { console.log(`分享失败：${error}`); } } else { console.log("此浏览器目前不支持"); } }; return ( <button onClick={handleSharing}> <span>{label}</span> </button> ); } export default ShareButton;
联系选择器API
大多数移动应用程序可能都会涉及访问联系人信息，可以使用 navigator.contacts 实现，它接受两个参数：属性、一个包含要访问的属性的数组和选项。
const props = ["name", "tel"]; const opts = { multiple: true }; async function getContacts() { try { const contacts = await navigator.contacts.select(props, opts); handleResults(contacts); } catch (ex) { // 错误 } }
剪切板API
剪贴板操作，如复制、剪切和粘贴，是移动应用程序中最常见的功能。剪贴板API允许web用户访问系统剪贴板并执行基本的剪贴板操作。
过去可以使用 DOM 对象的 document.execCommand 与系统剪贴板进行交互。但是，最新的异步剪贴板 API 提供了直接读取和写入剪贴板内容的访问权限，更加详细的介绍可以参阅《WEB 剪切板操作navigator.clipboard的使用》。
语音API
如今，大多数移动应用程序都加入了语音识别和文本转换语音功能，以改善易用性和用户体验，语音API为浏览器带来了这些功能。在本文中，只讨论语音识别 SpeechRecognition 接口，使用语音识别接口进行语音识别，使用设备默认的语音识别系统：
const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; const recognition = new SpeechRecognition(); // new SpeechRecognition object recognition.continuous = false; recognition.lang = "cn-ZH"; recognition.interimResults = false; recognition.onstart = function () { console.log("请对着麦克风说话"); }; recognition.onspeechend = function () { // 当用户完成说话 recognition.stop(); }; // 当语音识别服务返回结果时运行 recognition.onresult = function (event) { var transcript = event.results[0][0].transcript; var confidence = event.results[0][0].confidence; }; // 开始识别 recognition.start();
通知API
Notification API经常与Push API互换，但它们是不同的。Notification API 的目标是向用户显示信息，而Push API允许 service worker 处理来自服务器的推送消息，即使设备处于非活动状态。
现在博客和Web应用广泛使用这种方法，当服务有变化或更新时通知用户。这个API的一个常见情况是，当的应用程序是PWA，需要用户刷新浏览器以获得新的应用程序更新。
JavaScript 有一个 Notification 构造函数：
const message = "升级获取新功能"; const notification = new Notification("保存PWA应用", { body: text });
总结
在本文中，简单总结了一下Web项目开发常用的API及移动应用开发相关的API。
