Logo

菜单

发布于 2025-12-07 0 阅读
0

Web API 探索 相互了解 服务工作线程和推送 API 加密 API 支付请求 API 性能 API 振动 API 剪贴板 API 页面可见性 API 全屏 API 更多，更多，还在不断增加...

Web API 探索

互相了解

服务工作者和推送 API

加密 API

付款请求API

性能 API

振动 API

剪贴板 API

页面可见性 API

全屏 API

更多，更多，还在继续……

这篇文章取自我的博客，所以一定要查看它以获取更多最新内容😉

JavaScript 允许开发人员为不同浏览器的用户创建令人惊叹的交互式体验。事实上，这就是为什么在过去几年里所有的网络内容都变得更具沉浸感的原因——因为 JS！但仅仅一种编程语言不足以驾驭网络的强大功能。不，不。你需要的远不止这些！当然，有大量的 JS 内置类型、对象、类等，即使在低级代码中也提供不同的功能。但这还不够。JavaScript 在浏览器内部处于沙盒状态，无法自行访问外部世界。我在这里谈论的是诸如多线程、3D 图形、控件、计算机状态（电池、连接、内存等）和计数等功能。这就是Web API存在的原因。Web API 是指浏览器提供的所有 API（应用程序编程接口），用于通过 JS 代码访问设备的不同本机功能。此外，在 Web API 中，还有用于访问 DOM（HTML 集成）的DOM API和用于 CSS 的CSS API 。需要注意的是，这些是 API，因为它们不仅可以从 JavaScript 访问，还可以从其他语言访问，例如过去IE中不流行的VBScript。现在，解决了这个问题，您可能在某个时间点使用过至少一种 Web API。您甚至可能不知道，因为有大量的库为其中许多 API 提供了更易于使用的接口。其中很可能是DOM、CSS、Audio，甚至是Canvas/WebGL API。这些都是庞大而复杂的 API，可能需要一些时间来学习。但相信我，这是值得的！

互相了解

除了上面列出的 API 之外，还有很多其他的 API。我想向你介绍其中的一些……至少是一些比较小的。值得一提的是，API 本身并非 Babel 或其他工具能够直接 polyfill 的东西。因此，浏览器支持在这个领域至关重要。有些 API 甚至可能不被认为是官方的，只受特定浏览器支持。只有那些具有良好跨浏览器支持和/或被正式标记为W3C规范一部分的 API 才会被收录在此列表中。当然，其中很多 API 都比较新，在实际使用之前，你应该先检查一下CanIUse或其他类似工具。考虑到这一点，让我们来看看一些最被低估或不太流行/知名的 Web API。

服务工作者和推送 API

Service Worker (SW)和Push API都是相当新但需求量很大的 API。SW 充当后台进程，允许服务器和 Web 应用之间进行交互，即使在服务器关闭时也是如此。它与 Push API 密切相关，后者允许接收服务器发送（推送）的消息。你在这里看到了一种模式，对吧？服务器发送一些数据，你的 Web 应用通过 SW，Push API 与其交互，例如显示通知（借助Notification API提供的一些额外的 SW方法）。这些 API 主要是为了使 Web 应用感觉更原生而迈出的一大步。无论如何，整个概念可能看起来有点复杂。基本工作流程要求你下载、安装并激活你的 Service Worker。至于 Push API，你需要使用例如Fetch API订阅服务器消息。这需要一篇文章来单独介绍，所以现在，我将留给你进一步探讨这个主题。请记住浏览器支持 - 你应该熟悉 Safari 对 Push API 的自定义实现。

加密 API

继续列在复杂 API 的清单上，接下来是Crypto。此 API 允许开发者使用加密原语，当然，也用于加密目的。令人惊讶的是，它得到了相当不错的浏览器支持，甚至 IE 11 也对其提供了部分（前缀）支持。它可能是所有 API 中最神秘的之一。这很可能是因为它的用例。引用MDN Web 文档：

如果您不确定自己在做什么，那么您可能不应该使用此 API。

因此，除非您正在进行这些加密工作，否则最好不要管它，只知道它存在就好。

付款请求API

事情到了这一步，开始变得稍微……实用了。😅支付请求 API旨在提供一种标准、统一的在线支付方式，但由于显而易见的原因，它只能通过HTTPS 协议进行。可惜的是，虽然这很棒，但这个新想法缺乏足够好的跨浏览器支持，因此不够可靠。不过，由于它是W3C标准，支持度会越来越高，最终我们都能轻松进行在线支付。现在，我们先来看看这个早期的 API，好吗？

if (window.PaymentRequest) {
  const payment = [
    {
      supportedMethods: "basic-card",
      data: {
        supportedNetworks: ["visa", "mastercard"],
        supportedTypes: ["debit", "credit"]
      }
    }
  ];

  const cart = {
    id: "order-1",
    displayItems: [
      {
        label: "Example item",
        amount: { currency: "USD", value: "1.00" }
      }
    ],
    total: {
      label: "Total",
      amount: { currency: "USD", value: "1.00" }
    }
  };
  const request = new PaymentRequest(payment, cart);

  request
    .show()
    .then(function(response) {
      response.complete("success").then(function() {
        // Handle success
      });
    })
    .catch(function(error) {
      // Handle cancellation or failure.
    });
} else {
  // Payment Request API is unsupported
}
Enter fullscreen mode Exit fullscreen mode

这是我能想到的最直观的例子。首先，我们检查 API 是否可用。然后定义一些硬编码的数据以供后续使用。最后是主调用。之后的所有内容都展示了显示支付模式和处理不同结果是多么简单。剩下的就是等待它获得更好的跨浏览器支持了。祝你好运！😁

性能 API

顾名思义，Performance API（或者更确切地说是User Timing API）可用于测量JavaScript 代码的性能。而且，无论你相不相信，它的表现都相当出色。其精度高达千分之一毫秒，或许是完成这项任务的最佳工具之一。浏览器对它的支持也相当出色，甚至 IE 10 也支持它，这并不令人意外。现在，此 API 允许你访问许多用于基准测试的小方法。你可以检索时间、设置时间标记并观察各种与性能相关的事件。为了便于理解，我们来看一个简单的示例。首先，我们定义一个要进行基准测试的函数。

function benchmarkMe(){
    for(let i = 0; i < 1000; i++){
        console.log(i)
    }
}
Enter fullscreen mode Exit fullscreen mode

是的，带有 1000 个 console.log() 的标准循环可能非常苛刻。

const timeBefore = performance.now();
benchmarkMe()
const timeAfter = performance.now();
console.log(`BenchmarkMe() took ${timeAfter - timeBefore} ms.`);
Enter fullscreen mode Exit fullscreen mode

你可能对此很熟悉。假设这是衡量 JS 性能的标准方法。现在，让我们尝试一种更奇特的方法……

performance.mark("timeBefore")
benchmarkMe()
performance.mark("timeAfter")
performance.measure("time", "timeBefore", "timeAfter")
console.log(`BenchmarkMe() took ${performance.getEntriesByName("time")[0].duration} ms.`);
Enter fullscreen mode Exit fullscreen mode

在这种情况下，我们使用时间标记来精确地执行之前的操作。这种技术在进行一些更大规模的基准测试时更有用，对于简单的函数基准测试来说，它可能有点过头了。不过，你已经了解了基础知识。😄

振动 API

这可能是所有 Web API 中最简单的一个了。当然，它可以用来与负责振动特定设备的硬件（如果有）进行交互。所有这些都包含在一个方法中。

// Vibration time in miliseconds: 200ms
window.navigator.vibrate(200);
// Vibration sequence: 200ms vibrate, 100ms stop, 200ms vibrate
window.navigator.vibrate([200, 100, 200]);
// Vibrate for a long time...
window.navigator.vibrate(999999);
// ...but stop after 1 second
setTimeout(() => {
    window.navigator.vibrate(0);
}, 1000)
Enter fullscreen mode Exit fullscreen mode

就这样。不过请记住，Safari 不会允许你使用这么大的震动，或者说根本不允许。

剪贴板 API

这个 API 可能比较新，跨浏览器支持也不够完善，但它提供了一些有趣的功能。顾名思义，它允许你通过HTTPS 协议异步与用户的剪贴板交互（剪切、复制、粘贴） 。它主要包含 4 个方法：read()、readText()、write()、 ，每个方法都返回一个 Promise 对象，其中包含可选的剪贴板数据，供读取方法使用。出于安全考虑，此 API 要求你使用Permissions APIwriteText()明确授予权限。

页面可见性 API

这个方法归结为两个属性和一个事件。它可以检查用户当前是否打开了你的页面（例如，未最小化），以及页面是否已渲染或正在卸载。这两个属性分别是document.hidden布尔值和document.visibilityState字符串。你还可以监听onvisibilitychange事件来了解值何时发生变化。

全屏 API

全屏 API为 Document 和 Element 接口添加了方法，允许它们切换到全屏模式。它们是requestFullscreen()和exitFullscreen()，都返回一个 Promise 对象。此外，该 API 还提供了一些事件和属性，用于检查特定元素是否处于全屏模式等。虽然功能不多，但对于 Canvas、视频和图像等元素来说确实非常有用。

更多，更多，还在继续……

这些只是 Web API（包括现有 API 和未来计划中的 API）所能提供功能的冰山一角。有些 API 只是一些实用的方法和属性，而有些则非常复杂。我鼓励您查看并探索其他 Web API，以便成为更优秀的 Web 开发者，并了解用于将这些 API 封装成良好包的不同库是如何工作的。为此，我建议您访问MDN（每个列出的 API 中都有链接）、CanIUse（了解浏览器支持情况）和WhatWebCanDo （了解一些有趣的 API 及其功能）等网站。此外，如果您喜欢这篇文章，请通过下方的圆形按钮分享，并在Twitter或Facebook上关注我，以获取更多最新内容。🎉

鏂囩珷鏉ユ簮锛�https://dev.to/areknawo/web-apis-exploration-1anh
2020 年学习 React 的最...
从程序员的角度进行 UI 设计 视...