Oculus Quest 2 上的 PWA

Oculus Quest 2 是一款虚拟现实 (VR) 头戴设备，由 Meta 的子公司 Oculus 打造。开发者现在可以构建和分发充分利用 Oculus Quest 2 的多任务处理功能的 2D 和 3D 渐进式 Web 应用 (PWA)。

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Thomas Steiner

Oculus Quest 2

Oculus Quest 2 是一款由 Meta 的部门 Oculus 打造的虚拟现实 (VR) 头戴设备。它是该公司之前推出的头戴式设备 Oculus Quest 的后续产品。该设备既能作为带有内置 Android 操作系统的独立耳机运行，又能与通过 USB 或 Wi-Fi 连接在桌面设备上运行且与 Oculus 兼容的 VR 软件运行。它采用 Qualcomm Snapdragon XR2 SoC 系统，配备 6 GB RAM。Quest 2 的显示屏是一个单独的快速切换 LCD 面板，每个眼分辨率为 1,832 x 1,920 像素，刷新率最高可达 120 Hz。

带有控制器的 Oculus Quest 2 设备。

Oculus 浏览器

目前，Oculus Quest 2 有三款浏览器可供选择：Wolvic（Firefox Reality 的后继者）和内置的 Oculus 浏览器。本文将重点介绍后者。Oculus 网站介绍了 Oculus 浏览器，具体如下。

“Oculus Browser 支持最新的 Web 标准和其他技术，可帮助您在 Web 上打造虚拟现实体验。由于 Oculus 浏览器采用 Chromium 呈现引擎，因此当今的 2D 网站在 Oculus 浏览器中运行良好。我们针对 Oculus 头盔进行了进一步优化，以实现最佳性能，并让 Web 开发者能够利用 WebXR 等新 API 充分发挥 VR 的潜力。通过 WebXR，我们将开启通往下一网络前沿的大门。”

打开了三个浏览器窗口的 Oculus 浏览器。

用户代理

本文撰写时，浏览器的用户代理字符串如下所示。

Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36

如您所见，Oculus 浏览器的当前版本 18.1.0.2.46.337441587 基于 Chrome 95.0.4638.74，仅比当前稳定版 Chrome 96.0.4664.110 低一个版本。如果用户切换到移动设备模式，VR 会更改为 Mobile VR。

Oculus 浏览器“简介”页面。

界面

浏览器的界面（如上所示）具有以下功能（顶行从左到右）：

  • “返回”按钮
  • 名为重新加载的按钮
  • 站点信息
  • 网址栏
  • “创建书签”按钮
  • 调整大小按钮，提供窄、中、宽选项以及缩放功能
  • “请求移动网站”按钮
  • 菜单按钮，其中包含以下选项：
    • 进入私密模式
    • 关闭所有标签页
    • 设置
    • 书签
    • 下载内容
    • 历史记录
    • 清除浏览数据

最下面一行包含以下特征：

  • “关闭”按钮
  • “最小化”按钮
  • 包含返回、前进和重新加载选项的三点状按钮

刷新率和设备像素比

对于 Oculus Quest 2，Oculus 浏览器会以 90 Hz 的刷新率渲染 2D 网页内容和 WebXR。观看全屏媒体内容时，Oculus 浏览器会根据视频的帧速率（例如 24 fps）优化设备刷新率。Oculus Quest 2 的设备像素比为 1.5，可呈现清晰的文本。

Oculus 浏览器和 Oculus 商店中的 PWA

2021 年 10 月 28 日，Meta (Oculus) 产品管理主管 Jacob Rossi 分享了 Oculus Quest 和 Oculus Quest 2 即将推出 PWA的消息。下面，我将介绍 Oculus 上的 PWA 体验，并说明如何在 Oculus Quest 2 上构建、旁加载和测试 PWA。

状态共享

Oculus 浏览器和 PWA 之间会共享登录状态，让用户能够在两者之间无缝切换。当然，系统开箱即支持 Facebook 登录。Oculus 浏览器包含一个密码管理工具，可让用户在浏览器和已安装的应用体验之间安全地存储和共享密码。

PWA 窗口大小

用户可以自由调整浏览器窗口和已安装 PWA 的窗口的大小。高度可介于 625 像素到 1,200 像素之间。宽度可设置为介于 400 像素和 2,000 像素之间。 默认尺寸为 1,000 x 625 像素。

与 PWA 交互

您可以使用 Oculus 左侧和右侧控制器、蓝牙鼠标和键盘，以及通过手部跟踪来控制 PWA。滚动功能可通过 Oculus 控制器上的摇杆实现，也可以通过捏合拇指和食指并朝所需方向移动来实现。用户可以用双指张合选择内容

PWA 的权限

Oculus 浏览器中的权限与 Chrome 中的权限大致相同。该状态在浏览器中运行的应用和已安装的 PWA 之间共享，因此用户无需再次授予相同的权限，即可在两种体验之间切换。

虽然实现了许多权限，但并非所有功能都受支持。例如，虽然成功请求地理定位权限，但设备实际上从未获取位置信息。同样，各种硬件 API（例如 WebHID、Web Bluetooth 等）都通过了功能检测，但实际上并未显示可让用户将 Oculus 与硬件设备配对的选择器。我认为，随着浏览器的成熟，API 的功能可检测性将得到改进。

Oculus 浏览器中的权限。

通过 Chrome 开发者工具调试 PWA

启用开发者模式后，在 Oculus Quest 2 上调试 PWA 的方式将与远程调试 Android 设备完全一样。

  1. 在 Oculus 设备上，通过 Oculus 浏览器访问所需的网站。
  2. 在计算机上启动 Google Chrome，然后前往 chrome://inspect/#devices。
  3. 找到相关的 Oculus 设备，后面是一组当前在该设备上打开的 Oculus 浏览器标签页。
  4. 在所需的 Oculus 浏览器标签页上，点击检查。

使用 Chrome 开发者工具检查在 Oculus Quest 2 上运行的应用。

应用发现

用户可以使用浏览器本身或 Oculus 商店来发现 PWA。就像任何其他浏览器一样，已安装的 PWA 也可以作为在标签页中运行的网站在 Oculus 浏览器中运行。当用户访问某个网站时，当（且仅当）该应用在 Oculus 商店中提供时，Oculus 浏览器才会帮助他们发现该应用。对于已安装该应用的用户，Oculus 浏览器可帮助他们根据需要轻松切换到该应用。

Oculus 浏览器通过提示邀请用户安装 MyEmail 应用。

Oculus Quest 2 上的典型 PWA

按元数据划分的 PWA

多个 Meta 部门都已为 Oculus Quest 2 创建了 PWA，例如 Instagram 和 Facebook。这些 PWA 在没有网址栏的独立应用窗口中运行，并且可以自由调整大小。

Facebook Oculus Quest 2 应用。

Instagram Oculus Quest 2 应用

其他开发者的 PWA

在撰写本文时，Oculus 商店中适用于 Oculus Quest 2 的 PWA 数量虽然不多，但正在不断增加。借助 Spike，用户可以在 Spike 应用中直接体验虚拟环境中心的收件箱，并使用电子邮件、聊天、通话、记事、任务和待办事项等所有必备工作工具。

提高了 Oculus Quest 2 应用的稳定性。

另一个例子是 Smartsheet，这是一个动态工作区，可提供项目管理、自动化工作流和快速构建新解决方案。

我们还将推出更多 PWA，例如 Slack、Dropbox 或 Canva，如 2021 年 Facebook Connect 大会期间发布的视频中所暗示。

为 Oculus 创建 PWA

Meta 在其文档中列出了必要的步骤。一般来说，在 Chrome 中可安装的 PWA 通常可以在 Oculus 上开箱即用。

网络应用清单要求

与 Chrome 的可安装性条件和 Web 应用清单规范相比，存在一些重要差异。例如，Oculus 目前仅支持从左到右的语言，而 Web 应用清单规范不强制执行此类限制。另一个示例是 start_url，Chrome 严格要求使用它才能安装应用，但在 Oculus 上却是可选功能。Oculus 提供了一个命令行工具，可让开发者为 Oculus Quest 2 创建 PWA，从而传递 Web 应用清单中缺少的参数（或替换现有参数）。

名称 说明
name （必需）PWA 的名称。目前，Oculus 仅支持从左到右书写的语言。
display （必需）"standalone" 或 "minimal-ui"。Oculus 目前不支持任何其他值。
short_name （必填）应用名称的简短版本（如有）。
scope （可选）应被视为应用一部分的网址或路径。
start_url （可选）应用启动时显示的网址。

Oculus 提供了一些可选的专有 Web 应用清单字段，可用于自定义 PWA 体验。

名称 说明
ovr_package_name （可选）设置为 PWA 生成的 APK 的软件包名称。必须采用反向域名表示法，例如"com.company.app.pwa"。如果未设置此政策，开发者必须使用 --package-name 参数（然后是必需参数）向命令行工具提供软件包名称。
ovr_multi_tab_enabled （可选）如果为 true，此布尔字段将为 PWA 提供类似于 Oculus 浏览器的标签页栏。在多标签页 PWA 中，定位到新标签页（target="_new" 或 target="_blank"）的内部链接将在 PWA 窗口内的新标签页中打开。这与单标签页 PWA 不同，在单标签页 PWA 中，此类链接会在 Oculus 浏览器窗口中打开。此功能目前正在标准化为标签页式应用模式。
ovr_scope_extensions （可选）允许 PWA 在 Web 应用范围内包含更多网页。它由一个包含扩展程序网址或通配符模式的 JSON 字典组成。此功能目前正在标准化为适用于 Web 应用的范围扩展。

使用 Bubblewrap CLI 打包 PWA

Bubblewrap 是一组开源库，也是一个适用于 Node.js 的命令行工具 (CLI)。Bubblewrap 由 Google Chrome 团队开发，旨在帮助开发者生成、构建和签署 Android 项目，以便以 Trusted Web Activity (TWA) 的形式启动您的 PWA。

Meta Quest 浏览器目前不完全支持 TWA，但从 1.18.0 版开始，Bubblewrap 支持为 Meta Quest 设备打包 PWA。

它可以生成通用 APK 文件，这些文件可在常规 Android 设备上打开 TWA，在 Meta Quest 设备上打开 Meta Quest 浏览器。

假设您已安装 Node.js，则可以使用以下命令安装 Bubblewrap CLI：

npm i -g @bubblewrap/cli

首次运行 Bubblewrap 时，它会自动下载并安装所需的外部依赖项：Java Development Kit (JDK) 和 Android SDK Build Tools。

如需生成与 Meta Quest 兼容的 Android 项目来封装您的 PWA，请运行带有 --metaquest 标志的 init 命令，然后按照向导操作：

bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest

生成项目后，请运行以下命令进行构建和签名：

bubblewrap build

这将输出一个名为 app-release-signed.apk 的文件。此文件可安装在设备上，也可发布到 Meta Quest 商店、Google Play 商店或任何其他 Android 应用分发平台。

使用 Oculus 平台实用程序打包 PWA

Oculus Platform Utility 是 Meta 开发的官方命令行工具，用于发布适用于 Oculus Rift 和 Meta Quest 设备的应用。

此外，您还可以使用 create-pwa 命令为 Meta Quest 设备打包 PWA，并将其发布到 Meta Quest 商店和 App Lab。

通过 -o 参数设置输出文件名，通过 --android-sdk 参数设置指向 Android SDK 的路径。

通过 --web-manifest-url 参数将该工具指向 Web 应用清单的实际网址。

如果您的正式版 PWA 中没有清单，或者您想替换正式版清单，仍然可以使用本地清单文件和 --manifest-content-file 参数为 PWA 生成 APK。

为尽可能保持清单的纯净性，请使用值采用反向域名标记法（例如 com.company.app.pwa）的 --package-name 参数，而不是向清单添加专有 ovr_package_name 字段。

ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa

使用 PWABuilder 打包 PWA

作者认为，目前使用 PWABuilder 是针对 Meta Quest 封装 PWA 的最简单方法，因此推荐使用此方法。

PWABuilder 是由 Microsoft 开发的开源项目，允许开发者封装 PWA 并为其签名，以发布到各种商店，包括 Microsoft Store、Google Play 商店、App Store 和 Meta Quest Store。

使用 PWABuilder 打包 PWA 非常简单，只需输入 PWA 的网址、输入/修改应用的元数据，然后点击 Generate（生成）按钮即可。

借助 PWABuilder，开发者可以选择用于为 Meta Quest 设备打包 PWA 的底层工具。

您可以选择 Meta Quest 选项来使用 Oculus 平台实用程序。

PWABuilder 打包选项。

您可以选择 Android 选项以使用 Bubblewrap，并选中 Meta Quest 兼容复选框。

使用 Bubblewrap 通过 PWABuilder 打包 PWA。

使用 ADB 安装 PWA

创建 APK 文件后，您可以通过 USB 或 Wi-Fi 使用 ADB 将其旁加载到 Meta Quest 设备：

adb install app-release-signed.apk

如果您使用 Bubblewrap CLI 打包 PWA，它提供了一个方便的别名命令来旁加载 APK 文件：

bubblewrap install

旁加载的应用会显示在应用抽屉的未知来源部分中。

提交应用

Oculus 开发者中心文档中详细介绍了如何将 PWA 上传和提交到 Oculus 商店。

除了将应用提交到 Oculus 商店之外，开发者还可以通过 SideQuest 等平台将应用直接分发给消费者，无需商店审批。这样一来，即使应用处于开发初期、处于实验阶段或面向特定受众群体，开发者也可以直接将其提供给最终用户。

测试多标签页应用

为了测试多标签页应用，我创建了一个小小的测试 PWA，演示了各种链接功能：即在 PWA 中打开新的标签页、保持在当前标签页中、打开新的浏览器窗口，以及在 WebView 中打开并保持在当前标签页中。在您的机器上运行以下命令，创建此应用的可本地安装副本。

ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk

下面是测试应用的屏幕录制内容。

SVGcode 的 Oculus 版本

为了试用这些说明，我创建了最新 PWA SVGcode 的 Oculus 版本。您可以从我的 Google 云端硬盘下载生成的 APK 文件 output.apk。如果您想进一步调查该软件包，我还提供了反编译版本。如需查看构建说明，请参阅 package.json。

在 Oculus 上使用该应用没有问题，包括能够打开和保存文件。Oculus 浏览器不支持 File System Access API，但可以使用回退方法。唯一不起作用的是双指张合缩放。我预计，按下两个控制器上的扳机按钮，然后将控制器向相反方向移动，即可使用该功能。除此之外，所有其他方面都表现出色，响应迅速，如嵌入的屏幕录制内容所示。

沉浸式 3D WebXR PWA

Oculus Quest 上的 PWA 支持并不仅限于平面 2D 应用。开发者可以使用 WebXR API 为 VR 构建身临其境的 3D 体验。

想知道如何在 VR 中处理各种提示（PWA 安装、权限请求、通知）吗？

以下是 Immersive Web 工作组的 WebXR 测试中的用户代理提示测试的屏幕录制内容。

如您所见，进入 VR 模式需要用户的权限。系统会针对每个来源请求一次权限。 请求权限会退出沉浸式模式。目前不支持通知。

手部跟踪

借助 WebXR Hand Input API 和 Meta 的基于 AI 的手持跟踪系统，您可以在沉浸模式下用手与 PWA 互动。

以下是 Immersive Web Working Group 的 WebXR 示例中的手部跟踪示例的抓屏。

增强/混合现实（直通）

正如在 Meta Connect 2022 大会上所宣布的那样，Meta Quest 浏览器已在 Meta Quest 2 和 Meta Quest Pro 设备上添加了对 WebXR 增强现实 (AR)（也称为混合现实 [MR]）的支持。

我们来看看经过稍微修改的 A-Frame 入门示例，其中包含缩小的模型以及隐藏的天空和平面，以便在增强现实中使用。

A-Frame 是一个开源 Web 框架，可让您完全使用易于阅读、理解和复制粘贴的声明式可重复使用的自定义 HTML 元素来构建 3D/VR/AR 体验。

以下是 Meta Quest 2 上该演示的抓屏。

Meta Quest 2 配备的是单色摄像头，因此透视画面是灰阶的，而 Meta Quest Pro 配备的是彩色摄像头。

总结

在 Oculus Quest 2 上使用 PWA 带来很多乐趣，也极具前景。无尽的虚拟画布可让用户根据当前任务来调整屏幕大小，这极有可能改变我们未来的工作方式。虽然在 VR 中使用手部跟踪功能打字功能仍处于起步阶段，至少对我来说，其可靠性还不够高，但对于输入网址或打字短文来说，其效果已经足够好了。

我最喜欢 Oculus Quest 2 上的 PWA 的地方在于，它们只是普通的 PWA，可以在浏览器标签页中或通过精简版 APK 封装容器（无需任何平台专用 API）不加修改地使用。使用相同的代码定位多个平台从未如此简单。祝 Web 版 VR 和 AR 中的 PWA 越来越好。未来一片光明！

致谢

Oculus Quest 2 照片：Flickr 上的 Maximilian Prandstätter 拍摄。Instagram、Facebook、Oculus 浏览器和 Spike 应用的 Oculus 商店图片，以及应用可检测性插图和手部跟踪动画，均由 Meta 提供。主打图片由 Arnau Marín i Puig 提供。此邮件已由 Joe Medley 审核。