网页应用开发最佳实践

使用HTML和JavaScript构建的TV网页应用通常设计为在多个平台上运行。网页开发的最佳实践通常也适用于Vega TV的网页应用。本指南重点介绍了与在Vega环境中开发网页应用密切相关和通常推荐的做法。

处理焦点

开发者应处理好网页应用中的焦点，以确保良好的可用性和无障碍功能。确保在网页应用启动时将初始焦点设置为可操作的元素。这样，客户从第一次按键开始就可以使用应用。这还有助于让AX客户可以访问该应用。单击此处查看如何将初始焦点设置到WebView。要设置初始焦点，请参阅将初始焦点设置到WebView。

使用遥控器导航

确保可以使用遥控器按键事件对应用进行全面导航。这包括适当地处理方向键 (DPAD)、Enter和Back按钮。使用tabindex实现焦点管理，并处理按键事件以动态转移焦点。最好在按键事件的网页应用层上处理按键事件，如下所示。

处理返回按钮和应用关闭

在客户按下返回按钮时，让客户可以前往页面历史记录中的之前页面，如果无法再向后导航，则在关闭应用之前显示弹出窗口。让该弹出窗口清楚地向客户表明他们已经到达返回导航的尽头，如果再次按下返回，将退出应用。这样可以防止意外退出，从而改善用户体验，并设定正确的客户期望。有关关闭按钮的处理，请参阅onCloseWindow。有关返回按钮的处理，请参阅goBack()。

处理错误

网页应用应处理好不同的错误情况，包括网络连接错误、SSL证书错误和HTTP错误。建议显示间隙页面，让客户可以使用该页面重试或采取必要步骤来重新加载或退出应用。显示1个页面，以便客户可以重试或采取必要步骤来重新加载或退出应用。

WebView提供onError、onHttpError和onSslError回调，以便应用可以采取适当的操作。

播放媒体

为了跨设备流畅地播放媒体，网页应用应在尝试播放之前检查设备的媒体功能。网页应用可以使用MediaCapabilities或canPlayType() API来实现这一点。这样有助于避免运行时错误、播放失败或不良的用户体验。

有关我们支持的格式的列表，请参阅WebView支持的媒体格式。

处理后台活动

当网页应用以活跃的播放进入后台时，停止播放视频并返回内容详情页面。还要确保在应用进入后台时保留必要的应用状态信息，因为当系统需要更多资源（例如内存）时，可能会将它终止。

此请求背后的动机取决于当网页应用进入后台时处理视频播放的方式。在这种情况下，将发布用于视频解码的硬件解码器，允许其他应用使用它。当网页应用返回前台时，如果解码器重新初始化并再次开始渲染视频帧，用户可能会遇到短暂黑屏。此过程可能需要几秒钟。如果网页应用在进入后台之前终止视频播放并导航回内容详情页面，则可以避免黑屏问题。

避免依赖userAgent

Vega WebView userAgent包含代表设备信息、操作系统信息和WebEngine信息的字符串。这些信息将来可能会在不同的设备硬件上发生变化，因此除非绝对必要，否则最好不要依赖这些信息。

例如：

复制代码 已复制到剪贴板。

考虑无障碍功能

在为Vega开发网页应用时，必须将无障碍功能作为核心考虑因素，以便为所有人提供包容性的用户体验。与基于触摸的界面不同，电视应用依赖于带方向导航 (DPAD) 的遥控器。确保所有可设定焦点的元素都可触及并遵循逻辑焦点顺序。使用tabindex属性定义和管理焦点，并始终提供可见的焦点指示器以帮助用户跟踪哪个元素处于活跃状态。

语义HTML元素（如<button>、<nav>和<form>）在增强无障碍功能方面起着至关重要的作用，应尽可能优先于通用容器（例如<div>或<span>）。要支持屏幕阅读器，请使用ARIA（无障碍富互联网应用）角色、标签和属性，以提供有意义的上下文，对于自定义组件尤其应如此。设置网页应用标题，以便应用启动时，屏幕阅读器可以读取它。

启用Vega媒体控制

客户可以使用各种输入法、遥控器、语音命令或移动遥控应用等配套设备与应用进行交互。确保所有这些模式下流畅的媒体播放控制。要实现这一点，可集成Vega媒体控制API，该API可为每种输入法提供一致的媒体控制功能。有关实现细节和集成步骤，请参阅在应用代码中集成VegaMediaControl的示例。

相关主题

• Vega网页应用概述
• 网页应用性能最佳实践
• 网页应用工作线程最佳实践
• 网页应用WebGL最佳实践

---

Last updated: 2025年10月7日