MDN Web API 项目：Presentation API 技术详解

什么是 Presentation API

Presentation API 是一套允许网页内容在外部显示设备（如投影仪、智能电视等）上展示的 Web 技术标准。通过这套 API，开发者可以实现在主控设备（如笔记本电脑或手机）上控制内容，同时在外部大屏设备上展示内容。

核心概念

1. 两种工作模式

Presentation API 支持两种工作模式：

• 1-UA 模式：主控设备和接收设备使用同一个用户代理（浏览器），接收页面的渲染结果通过远程渲染协议传输到展示设备
• 2-UAs 模式：接收页面直接在展示设备上加载，主控设备通过展示控制协议与展示设备通信

2. 主要组件

• 控制器页面：运行在主控设备上的网页，负责发起和控制展示
• 接收器页面：运行在展示设备上的网页，负责显示内容

关键接口详解

1. Presentation 接口

这是 API 的入口点，提供了以下能力：

• 在控制上下文中：覆盖浏览器默认的外部屏幕展示行为
• 在接收上下文中：访问可用的展示连接

2. PresentationRequest 接口

用于初始化和重新连接到展示，主要方法：

• start()：开始新的展示
• reconnect()：重新连接到已有展示
• getAvailability()：获取展示设备可用性

3. PresentationConnection 接口

表示一个展示连接，提供：

• 状态管理（连接、关闭、终止）
• 双向消息传递
• 事件监听

4. PresentationReceiver 接口

在接收端使用，用于：

• 访问所有控制连接
• 管理多个连接

实际应用示例

1. 检测展示设备可用性

const presentBtn = document.getElementById("presentBtn");
const presUrls = ["https://example.com/presentation.html"];

const request = new PresentationRequest(presUrls);
request.getAvailability()
  .then(availability => {
    presentBtn.style.display = availability.value ? "block" : "none";
    availability.onchange = () => {
      presentBtn.style.display = availability.value ? "block" : "none";
    };
  })
  .catch(() => {
    // 平台不支持可用性检测
    presentBtn.style.display = "block";
  });

2. 开始和重新连接展示

// 开始新展示
request.start().then(connection => {
  // 保存连接ID以便重新连接
  localStorage.setItem("presId", connection.id);
  setupConnection(connection);
});

// 重新连接
function reconnect() {
  const presId = localStorage.getItem("presId");
  if (presId) {
    request.reconnect(presId).then(connection => {
      setupConnection(connection);
    });
  }
}

3. 消息传递

// 控制器发送消息
connection.send(JSON.stringify({
  content: "Hello World",
  lang: "en-US"
}));

// 接收器处理消息
connection.onmessage = event => {
  const message = JSON.parse(event.data);
  const element = document.createElement("p");
  element.lang = message.lang;
  element.textContent = message.content;
  document.body.appendChild(element);
};

最佳实践

1. 状态管理：始终监听连接状态变化，及时更新UI
2. 错误处理：妥善处理连接失败和断开的情况
3. 会话持久化：保存连接ID以便重新连接
4. 多设备支持：考虑同时管理多个展示连接的情况
5. 本地化：通过消息传递语言环境信息

浏览器兼容性说明

Presentation API 目前仍处于实验阶段，各浏览器实现可能有所不同。建议在使用前检查浏览器兼容性，并考虑使用polyfill作为后备方案。

总结

Presentation API 为Web开发者提供了控制外部展示设备的标准化方法，使得构建跨设备的展示应用变得更加简单。通过这套API，可以实现从简单的幻灯片展示到复杂的多屏互动应用等各种场景。随着标准的不断完善和浏览器支持的增强，Presentation API 将成为Web展示类应用的重要基础技术。