作为开发人员,经常使用 Web API 来轻松实现复杂的功能,或者创建它们来抽象复杂性。Web API 允许服务之间进行对话,分享信息到朋友圈或显示地图等操作。
可以将用于构建客户端 Web 应用程序的 Web API 分为两类:
DOM
、Fetch
、音频、视频、WebGL
、notifications
等等下面总结Web项目中经常接触到的API:
<canvas>
元素在页面上显示不同的视觉图形,对于HTML游戏和图表很有用在本文中,将探索一些提供移动友好功能的API,包括从社交媒体分享和剪贴板操作到联系选择器、语音和通知功能相关的内容。下面就来总结一下移动WEB的开发常用的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;
大多数移动应用程序可能都会涉及访问联系人信息,可以使用 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允许web用户访问系统剪贴板并执行基本的剪贴板操作。
过去可以使用 DOM 对象的 document.execCommand
与系统剪贴板进行交互。但是,最新的异步剪贴板 API 提供了直接读取和写入剪贴板内容的访问权限,更加详细的介绍可以参阅《WEB 剪切板操作navigator.clipboard的使用》。
如今,大多数移动应用程序都加入了语音识别和文本转换语音功能,以改善易用性和用户体验,语音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();
Notification API经常与Push API互换,但它们是不同的。Notification API 的目标是向用户显示信息,而Push API允许 service worker
处理来自服务器的推送消息,即使设备处于非活动状态。
现在博客和Web应用广泛使用这种方法,当服务有变化或更新时通知用户。这个API的一个常见情况是,当的应用程序是PWA,需要用户刷新浏览器以获得新的应用程序更新。
JavaScript 有一个 Notification 构造函数:
const message = "升级获取新功能";
const notification = new Notification("保存PWA应用", { body: text });