Oculus Quest 2 是 Meta 旗下部门 Oculus 打造的一款虚拟现实 (VR) 头戴设备。开发者现在可以构建和分发利用 Oculus Quest 2 多任务处理功能的 2D 和 3D 渐进式 Web 应用 (PWA)。
Oculus Quest 2
Oculus Quest 2 是 Meta 旗下 Oculus 部门打造的虚拟现实 (VR) 头戴设备。它是该公司之前推出的 Oculus Quest 耳机的升级版。该设备既可以作为独立的头戴式耳机运行，使用基于 Android 的内部操作系统，也可以在通过 USB 或 Wi-Fi 连接时，在台式计算机上运行与 Oculus 兼容的 VR 软件。它采用高通 Snapdragon XR2 系统芯片，配备 6 GB RAM。Quest 2 的显示屏是单个快速切换 LCD 面板，单眼分辨率为 1,832 × 1,920 像素，刷新率最高可达 120 Hz。
Oculus 浏览器
目前，Oculus Quest 2 有三款浏览器可供选择：Wolvic（Firefox Reality 的继任者）和内置的 Oculus 浏览器。本文重点介绍后者。Oculus 网站对 Oculus 浏览器的介绍如下。
“Oculus 浏览器支持最新的 Web 标准和其他技术，可帮助您在 Web 上创建 VR 体验。由于 Oculus 浏览器采用 Chromium 渲染引擎，因此在其中浏览当今的 2D 网站效果极佳。它还针对 Oculus 头戴式显示器进行了进一步优化，以获得最佳性能，并使 Web 开发者能够通过 WebXR 等新 API 充分发挥 VR 的潜力。借助 WebXR，我们正在开启网络的新时代。”
用户代理
撰写本文时的浏览器用户代理字符串如下所示。
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 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 分享了 PWA 即将登陆 Oculus Quest 和 Oculus Quest 2 的消息。下文中，我将介绍 Oculus 上的 PWA 体验，并说明如何在 Oculus Quest 2 上构建、旁加载和测试 PWA。
状态共享
登录状态在 Oculus 浏览器和 PWA 之间共享，使用户可以在两者之间无缝切换。当然，Facebook 登录开箱即用。Oculus 浏览器包含一个密码管理器，可让用户在浏览器和已安装的应用体验之间安全地存储和共享密码。
PWA 窗口大小
用户可以自由调整浏览器窗口和已安装 PWA 的窗口大小。高度可在 625 像素到 1,200 像素之间变化。宽度可以设置为介于 400 像素和 2,000 像素之间的值。 默认尺寸为 1,000 × 625 像素。
与 PWA 互动
您可以使用 Oculus 左侧和右侧控制器、蓝牙鼠标和键盘来控制 PWA，也可以通过手部追踪功能来控制。您可以通过 Oculus 控制器上的拇指摇杆滚动，也可以通过拇指和食指捏合并向所需方向移动来滚动。如需选择某个内容，用户可以指向并捏合。
PWA 的权限
Oculus 浏览器中的权限与 Chrome 中的权限几乎相同。状态在浏览器中运行的应用和已安装的 PWA 之间共享，因此用户可以在这两种体验之间切换，而无需再次授予相同的权限。
虽然实现了许多权限，但并非所有功能都受支持。例如，虽然请求地理定位权限成功，但设备实际上从未获取位置信息。 同样，各种硬件 API（例如 WebHID、Web 蓝牙等）都通过了功能检测，但实际上并未显示选择器，让用户无法将 Oculus 与硬件设备配对。我想，随着浏览器日趋成熟，API 的功能可检测性也会得到改进。
通过 Chrome 开发者工具调试 PWA
启用开发者模式后，在 Oculus Quest 2 上调试 PWA 的方式与远程调试 Android 设备中所述的方式完全相同。
- 在 Oculus 设备上，在 Oculus 浏览器中浏览到所需网站。
- 在电脑上启动 Google Chrome，然后前往
chrome://inspect/#devices。 - 找到有问题的 Oculus 设备，该设备后面会显示一组当前在该设备上打开的 Oculus 浏览器标签页。
- 在所需的 Oculus 浏览器标签页上点击检查。
应用发现
用户可以使用浏览器本身或 Oculus 商店来发现 PWA。与任何其他浏览器一样，已安装的 PWA 也可在 Oculus 浏览器中作为在标签页中运行的网站使用。当用户访问某个网站时，如果该网站对应的应用在 Oculus 商店中提供，Oculus 浏览器会帮助用户发现该应用。对于已安装该应用的用户，Oculus 浏览器会帮助他们轻松切换到该应用（如果他们需要）。
Oculus Quest 2 上的 PWA 示例
Meta 提供的 PWA
Meta 的多个部门已为 Oculus Quest 2 创建了 PWA，例如 Instagram 和 Facebook。这些 PWA 在没有网址栏且可自由调整大小的独立应用窗口中运行。
其他开发者的 PWA
截至撰写本文时，Oculus 商店中适用于 Oculus Quest 2 的 PWA 数量虽然不多，但正在不断增加。借助 Spike，用户可以在 Spike 应用中的虚拟环境中心直接通过收件箱体验所有必备的工作工具，例如电子邮件、聊天、通话、记事、任务和待办事项。
另一个示例是 Smartsheet，这是一个动态工作区，可提供项目管理、自动化工作流和快速构建新解决方案的功能。
正如在 2021 年 Facebook Connect 大会上发布的以 Jacob Rossi 为主角的视频中所预告的那样，未来还将推出更多 PWA，例如 Slack、Dropbox 或 Canva。
为 Oculus 创建 PWA
Meta 在其文档中概述了所需步骤。一般来说，可在 Chrome 中安装的 PWA 通常可在 Oculus 上开箱即用。
Web 应用清单要求
与 Chrome 的可安装性条件和 Web 应用清单规范相比，存在一些重要差异。例如，Oculus 目前仅支持从左到右的语言，而 Web 应用清单规范没有此类限制。另一个示例是 start_url，Chrome 严格要求应用必须包含此权限才能安装，但在 Oculus 上，此权限是可选的。Oculus 提供了一个命令行工具，可让开发者为 Oculus Quest 2 创建 PWA，从而在 Web 应用清单中传递缺失的（或替换现有的）参数。
Oculus 提供了许多可选的专有 Web 应用清单字段，可用于自定义 PWA 体验。
使用 Bubblewrap CLI 打包 PWA
Bubblewrap 是一组开源库，也是一个适用于 Node.js 的命令行工具 (CLI)。Bubblewrap 由 Google Chrome 团队开发，旨在帮助开发者生成、构建和签署将 PWA 作为 Trusted Web Activity (TWA) 启动的 Android 项目。
Meta Quest 浏览器目前尚未完全支持 TWA，但从 1.18.0 版开始，Bubblewrap 支持将 PWA 打包到 Meta Quest 设备。
它可以生成通用 APK 文件，该文件可在常规 Android 设备上打开 TWA，并在 Meta Quest 设备上打开 Meta Quest 浏览器。
假设您已安装 Node.js，则可以使用以下命令安装 Bubblewrap CLI：
npm i -g @bubblewrap/cli
首次运行 Bubblewrap 时，系统会提示您自动下载并安装所需的外部依赖项 - Java 开发套件 (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 Store、Google Play 商店或任何其他 Android 应用分发平台。
使用 Oculus 平台实用程序打包 PWA
Oculus Platform Utility 是 Meta 开发的官方命令行工具，用于发布适用于 Oculus Rift 和 Meta Quest 设备的应用程序。
它还允许使用 create-pwa 命令将 PWA 打包到 Meta Quest 设备，并将其发布到 Meta Quest Store 和 App Lab。
通过 -o 参数设置输出文件名，并通过 --android-sdk 参数设置 Android SDK 的路径。
通过 --web-manifest-url 参数将该工具指向 Web 应用清单的实际网址。
如果您没有有效的 PWA 清单，或者希望替换有效清单，您仍然可以使用本地清单文件和 --manifest-content-file 参数为 PWA 生成 APK。
为了尽可能保持清单的纯净，请使用 --package-name 参数（值采用反向域名表示法，例如 com.company.app.pwa），而不是向清单添加专有 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 平台实用程序。
您可以选择 Android 选项以使用 Bubblewrap，然后选中与 Meta Quest 兼容复选框。
使用 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 Store 提交应用之外，开发者还可以通过 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 工作组的 WebXR 示例中的手部跟踪示例。
增强现实/混合现实（透视）
正如在 Meta Connect 2022 上宣布的那样，Meta Quest 浏览器已添加对 WebXR 增强现实 (AR)（也称为混合现实 (MR)）的支持，可在 Meta Quest 2 和 Meta Quest Pro 设备上使用。
我们来看一个略作修改的 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 照片由 Maximilian Prandstätter 在 Flickr 上拍摄。Oculus 商店中的Instagram、Facebook、Oculus 浏览器和Spike 应用的图片，以及应用可发现性插图和手部追踪动画，均由 Meta 提供。Arnau Marín i Puig 创作的主打图片。此帖子已由 Joe Medley 审核。