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 软件。它采用 Qualcomm Snapdragon XR2 SoC 系统，配备 6 GB RAM。Quest 2 的显示屏是一个单独的快速切换 LCD 面板，每个眼分辨率为 1,832 x 1,920 像素，刷新率最高可达 120 Hz。
Oculus 浏览器
目前，Oculus Quest 2 有三款浏览器可供选择：Wolvic（Firefox Reality 的后继者）和内置的 Oculus 浏览器。本文将重点介绍后者。Oculus 网站介绍了 Oculus 浏览器，如下所示。
“Oculus Browser 支持最新的 Web 标准和其他技术，可帮助您在 Web 上打造虚拟现实体验。由于 Oculus 浏览器采用 Chromium 呈现引擎，因此当今的 2D 网站在 Oculus 浏览器中运行良好。我们针对 Oculus 头盔进行了进一步优化，以实现最佳性能，并让 Web 开发者能够利用 WebXR 等新 API 充分发挥 VR 的潜力。通过 WebXR，我们打开了通往 Web 下一个前沿领域的大门。”
用户代理
本文撰写时，该浏览器的用户代理字符串如下所示。
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 分享了 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 的功能可检测性将得到改进。
通过 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 浏览器可帮助他们根据需要轻松切换到该应用。
Oculus Quest 2 上的典型 PWA
Meta 的 PWA
多个 Meta 部门都已为 Oculus Quest 2 创建了 PWA，例如 Instagram 和 Facebook。这些 PWA 在没有网址栏且可自由调整大小的独立应用窗口中运行。
其他开发者的 PWA
在撰写本文时，Oculus 商店中适用于 Oculus Quest 2 的 PWA 数量虽然不多，但正在不断增加。借助 Spike，用户可以在 Spike 应用中直接通过虚拟环境中心体验收件箱中的所有基本工作工具，例如电子邮件、聊天、通话、记事、任务和待办事项。
另一个例子是 Smartsheet，这是一个动态工作区，可提供项目管理、自动化工作流和快速构建新解决方案。
我们还将推出更多 PWA，例如 Slack、Dropbox 或 Canva，如 2021 年 Facebook Connect 大会期间发布的视频中所暗示。
为 Oculus 创建 PWA
Meta 在其文档中列出了必要的步骤。通常，在 Chrome 中可安装的 PWA 在 Oculus 上通常可以开箱即用。
网络应用清单要求
与 Chrome 的可安装性条件和 Web 应用清单规范相比，存在一些重要差异。例如，Oculus 目前仅支持从左到右的语言，而 Web 应用清单规范不强制执行此类限制。start_url 就是另一个例子，Chrome 严格要求应用必须具有 start_url 才能安装，但在 Oculus 上，start_url 是可选的。Oculus 提供了一个命令行工具，可让开发者为 Oculus Quest 2 创建 PWA，从而传递 Web 应用清单中缺少的参数（或替换现有参数）。
Oculus 提供了一些可选的专有 Web 应用清单字段，可用于自定义 PWA 体验。
使用 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。
如需生成封装 PWA 的 Meta Quest 兼容 Android 项目，请使用 --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 商店、Google Play 商店、App Store 和 Meta Quest 商店。
使用 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 商店之外，开发者还可以通过 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 进行交互。
以下是沉浸式 Web 工作组的 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 审核。