低延迟笔记黑科技：Ink API & 触觉 API 双剑合璧

一. 低延迟笔记痛点 ✍️

在设备上进行书写或绘图时，低延迟是确保良好用户体验的关键因素。如果延迟过长，用户将难以绘制出流畅的线条。因此，在 Web 环境中，画布代码需要尽可能高效地响应用户的操作，将笔或手指的输入快速渲染到画布上。

二. Ink API：Windows 11 原生级低延迟方案 ⚡

1. 核心原理

a. 绕过浏览器渲染管道

Ink API 是微软在 2021 年的 Microsoft Build 大会上发布的一项新技术。它在 Windows 11 中引入了一种全新的 API，与操作系统的合成器直接协作，能够绕过 Microsoft Edge 的应用程序循环，从而更高效地绘制墨迹笔划。通过该 API，PWA（渐进式 Web 应用）可以避免事件传递到整个渲染堆栈所产生的延迟，而是直接将采集到的点传递给操作系统的合成器。合成器随后会将这些点连接成墨迹线条，并在下一帧中呈现在屏幕上。这种机制显著降低了延迟，同时避免了传统浏览器渲染管道的性能瓶颈。

💡 AI 助攻
想自动生成「Ink 采集点 → 线段平滑」算法？用「代码生成」提示词，30 秒即可拿到贝塞尔曲线模板，再交给「代码优化」砍掉浮点冗余，延迟再降 0.5 ms！

2. 实战：获取 InkPresenter

a. 最小可运行片段

// 检查支持并请求 presenter
if (window.InkPresenter) {
  const presenter = await navigator.ink.requestPresenter({ presentationArea: canvas });
  // 将原始点直接递交给合成器
  presenter.addStroke({
    points: [{x: 10, y: 10}, {x: 50, y: 50}],
    color: {r: 0, g: 0, b: 255},
    width: 2
  });
} else {
  console.warn("Ink API 仅在 Windows 11 + Edge 可用");
}

GoodNotes 成功将 Ink API 集成到其现有的画布实现中，为用户提供了在 Windows 平台上低延迟的书写和绘图体验。这种优化使得用户在使用 PWA 时，能够获得与原生应用相媲美的流畅性能。

3. 浏览器支持

a. 当前范围

目前，Ink API 已在 Windows 11 的 Microsoft Edge 浏览器中得到支持。

三. 设备触觉 API：让笔尖“有感觉” 🎮

1. 核心能力

a. 波形即插即用

设备触觉 API 是另一项提升用户体验的重要技术。通过该 API，开发者可以为设备添加触觉反馈功能，从而增强用户与应用交互时的沉浸感。

2. 实战：调用预定义波形

a. 最小可运行片段

// 检查硬件支持
if (navigator.haptics) {
  // 笔尖轻触
  navigator.haptics.play("pen-down");
  // 笔尖抬起
  setTimeout(() => navigator.haptics.play("pen-up"), 100);
} else {
  console.warn("触觉 API 需要硬件支持");
}

3. 浏览器支持

a. 当前范围

设备触觉 API 目前支持 Windows 平台上的 Microsoft Edge 浏览器，并需要硬件支持才能实现触觉反馈功能。

✅ AI 补救
把「触觉回退方案」写进注释太麻烦？用「代码文档生成器」提示词，自动在函数头部生成标准注释，提醒后续接入降级策略，文档一键达标！

四. 性能对比与落地建议 📊

落地 Checklist：

1. 功能检测 → 不支持时自动降级到 Canvas
2. 结合 Pointer Events 统一采集触控/鼠标/笔
3. 将 Ink 与触觉回放在同一事件回调，保证同步

五. 总结与下一步 🎯

通过 Ink API 与设备触觉 API 的双剑合璧，PWA 首次在 Windows 平台实现「原生级」低延迟 + 触觉反馈的书写体验。GoodNotes 的实践证明，只要合理检测能力并优雅降级，Web 应用也能让高端硬件物尽其用。

下一步：把两项 API 封装成跨平台 Hook，在 Electron 与 PWA 之间共享同一套逻辑，一套代码，多端秒开！🎉

原文链接: https://blog.pwabuilder.com/posts/how-goodnotes-uses-web-apis-to-create-a-great-pwa-for-windows/