Oculus Quest 2 的 PWA

Oculus Quest 2 是由 Meta 部門 Oculus 打造的虛擬實境 (VR) 頭戴式耳機。開發人員現在可以運用 Oculus Quest 2 的多工處理功能，建構及發布 2D 和 3D 漸進式網頁應用程式 (PWA)。

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Thomas Steiner

Oculus 任務 2

Oculus Quest 2 是由 Meta 部門 Oculus 建立的虛擬實境 (VR) 頭戴式耳機。他是公司前代耳機 Oculus 任務的後期。本裝置能夠以獨立頭戴式裝置、內部搭載 Android 的作業系統運作，也可搭配 Oculus 相容的 VR 軟體運作，並透過 USB 或 Wi-Fi 連線在桌上型電腦上執行。在搭載 6 GB RAM 的晶片中採用 Qualcomm Snapdragon XR2 系統。任務 2 螢幕是單一快速切換 LCD 面板，每眼解析度 1,832 × 1,920 像素，刷新率最高可達 120 Hz。

Oculus Quest 2 裝置 (含控制器)。

Oculus 瀏覽器

目前有三種瀏覽器適用於 Oculus Quest 2：Wolvic、Firefox Reality 的後續版本，以及內建的 Oculus Browser。本文將著重說明後者。Oculus 網站導入了 Oculus 瀏覽器，如下所示。

「Oculus 瀏覽器支援最新的網路標準和其他技術，可協助您在網路上打造 VR 體驗。現今的 2D 網站在 Oculus 瀏覽器中能夠順利運作，因為這項技術採用 Chromium 轉譯引擎。此模型進一步針對 Oculus 頭戴式裝置最佳化，以提供最佳效能，並讓網頁開發人員透過新的 API (例如 WebXR) 充分發揮 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 Browser 簡介頁面。

使用者介面

瀏覽器的使用者介面 (如上方所示) 有下列功能 (頂端列由左至右)：

  • 「返回」按鈕
  • [重新載入] 按鈕
  • 網站資訊
  • 網址列
  • 建立書籤按鈕
  • 提供狹窄、中等和廣度選項以及縮放功能，調整按鈕大小
  • 「要求行動版網站」按鈕
  • 包含以下選項的選單按鈕：
    • 進入私密模式
    • 關閉所有分頁
    • 設定
    • 書籤
    • 下載內容
    • 記錄
    • 清除瀏覽資料

底部列包含下列功能：

  • 關閉按鈕
  • 最小化按鈕
  • 有返回、往前和重新載入選項的三個點按鈕

刷新率和裝置像素比例

對於 Oculus Quest 2，Oculus Browser 會以 90 Hz 刷新率轉譯 2D 網頁內容和 WebXR。觀看全螢幕媒體時，Oculus Browser 會根據影片的影格速率 (例如 24 fps)，調整裝置刷新率。Oculus Quest 2 的裝置像素比例為 1.5 (清晰文字)。

Oculus 瀏覽器和 Oculus Store 中的 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 px 到 2,000 px 之間。 預設尺寸為 1,000 × 625 像素。

與 PWA 互動

您可以使用 Oculus 左側和右側控制器、藍牙滑鼠和鍵盤，以及透過手追蹤來控制 PWA。可使用 Oculus 控制器上的拇指搖桿，或雙指撥動拇指和食指並往想要的方向移動，藉此捲動畫面。如要選取項目

PWA 權限

Oculus 瀏覽器中的權限運作方式與 Chrome 大致相同。系統會在瀏覽器執行的應用程式與已安裝 PWA 的應用程式之間共用狀態，因此使用者不必重新授予相同權限，即可在兩種體驗之間切換。

系統雖然已實作多項權限，因此不支援所有功能。舉例來說，雖然要求地理位置存取權成功，但裝置實際上絕對不會取得位置資訊。同樣地，各種硬體 API (例如 WebHID、網路藍牙) 全都會偵測票證功能，但實際上不會顯示可讓使用者將 Oculus 與硬體裝置配對的挑選器。我想，如果瀏覽器不再成熟，API 的功能偵測能力就會隨之修正。

Oculus Browser 中的權限。

透過 Chrome 開發人員工具為 PWA 偵錯

啟用開發人員模式後，在 Oculus Quest 2 上對 PWA 偵錯的方式與「遠端偵錯 Android 裝置」一文所述的方式相同。

  1. 在 Oculus 裝置上，在 Oculus 瀏覽器中瀏覽至所需網站。
  2. 在電腦上啟動 Google Chrome，然後前往 chrome://inspect/#devices。
  3. 找出有問題的 Oculus 裝置，然後在裝置上開啟一組 Oculus 瀏覽器分頁。
  4. 在所需的 Oculus「Browser」分頁中按一下「Inspect」inspect。

使用 Chrome 開發人員工具檢查在 Oculus Quest 2 上執行的應用程式。

應用程式探索

使用者可以使用瀏覽器本身或 Oculus Store 發掘 PWA。如同任何其他瀏覽器，安裝的 PWA 也適用於在分頁中執行的網站，而在 Oculus 瀏覽器中也能使用 PWA。當使用者造訪網站時，如果 Oculus Store 上有該應用程式，Oculus Browser 就會協助找到該應用程式。如果使用者已安裝應用程式，Oculus Browser 將協助他們視需要輕鬆切換到應用程式。

Oculus 瀏覽器會在提示中，邀請使用者安裝 MyEmail 應用程式。

Oculus 任務 2 中的 PWA 範例

Meta 提供的 PWA

多個 Meta 部門已針對 Oculus Quest 2 建立 PWA，例如 Instagram 和 Facebook。這些 PWA 會在沒有網址列的獨立應用程式視窗中執行，且可自由調整大小。

Facebook Oculus Quest 2 應用程式。

Instagram Oculus Quest 2 應用程式

其他開發人員的 PWA

撰寫本文時，Oculus Quest 2 中 Oculus 商店的 PWA 仍不多，但數量仍在持續增加。Spike 可讓使用者直接在 Spike 應用程式的虛擬環境中心，體驗所有必要的工作工具，例如電子郵件、即時通訊、通話、記事、工作和待辦事項。

Spike Oculus Quest 2 應用程式。

另一個範例是 Smartsheet，這是一個動態工作區，可提供專案管理、自動化工作流程以及快速建構新解決方案。

Jacob Rossi 在 2021 年透過 Facebook Connect 會議發表的影片介紹了更多 PWA (例如 Slack、Dropbox 或 Canva 等)，正以此做為預告。

為 Oculus 建構 PWA

Meta 已在說明文件中列出必要步驟，一般來說，可在 Chrome 中安裝的 PWA，通常可在 Oculus 上立即運作。

網頁應用程式資訊清單規定

與 Chrome 的安裝條件標準和網頁應用程式資訊清單規格相比，有一些重要差異。舉例來說，Oculus 目前僅支援由左至右的語言，而 Web 應用程式資訊清單規格則不會強制執行這類限制。另一個範例是 start_url，Chrome 嚴格規定應用程式必須可安裝，但 Oculus 上則為選用功能。Oculus 提供指令列工具，可讓開發人員為 Oculus Quest 2 建立 PWA，藉此在網頁應用程式資訊清單傳遞缺少的參數 (或覆寫現有參數)。

名稱 說明
name (必要) PWA 的名稱。目前 Oculus 僅支援由左至右的語言。
display (必要) "standalone" 或 "minimal-ui"。Oculus 目前不支援任何其他值。
short_name (必要) 如有需要，可使用較短的應用程式名稱。
scope (選用) 應視為應用程式一部分的網址或路徑。
start_url (選用) 應用程式啟動時顯示的網址。

Oculus 有數個選用的「專屬」網頁應用程式資訊清單欄位，可用來自訂 PWA 體驗。

名稱 說明
ovr_package_name (選用) 設定為 PWA 產生的 APK 套件名稱。必須採用反向網域名稱標記法，例如"com.company.app.pwa"。如未設定，開發人員必須為指令列工具提供套件名稱，以及參數 --package-name。
ovr_multi_tab_enabled (選用) 如果設為 true，這個布林值欄位會將與 Oculus Browser 類似的分頁列提供給 PWA。在多分頁 PWA 中，指定新分頁的內部連結 (target="_new" 或 target="_blank") 會在 PWA 視窗的新分頁中開啟。這與單一分頁的 PWA 不同，後者會在 Oculus 瀏覽器視窗中開啟這類連結。這項功能目前正在標準化為「分頁式應用程式模式」。
ovr_scope_extensions (選用) 允許 PWA 在網頁應用程式的範圍中加入更多網頁。其中包含包含擴充網址或萬用字元模式的 JSON 字典。這項功能目前已標準化為網頁應用程式的範圍擴充功能。

使用 Bubblewrap CLI 封裝 PWA

Bubblewrap 是適用於 Node.js 的開放原始碼程式庫和指令列工具 (CLI)。Bubblewrap 是由 Google Chrome 團隊開發，旨在協助開發人員產生、建構及簽署 Android 專案，並以可信任網路活動 (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，並將 PWA 發布至 Meta Quest Store 和 App Lab。

透過 -o 參數設定輸出檔案名稱，並透過 --android-sdk 參數設定 Android SDK 的路徑。

透過 --web-manifest-url 參數將工具指向網頁應用程式資訊清單的線上網址。

如果即時 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 是撰寫最容易的方法，因此建議您暫時將 PWA 封裝至 Meta Quest。

PWABuilder 是由 Microsoft 開發的開放原始碼專案，可讓開發人員封裝及簽署 PWA，以發布至 Microsoft Store、Google Play Store、App Store 和 Meta Quest Store 等各種商店。

使用 PWABuilder 封裝 PWA 非常簡單，只需輸入 PWA 網址、輸入/編輯應用程式的中繼資料，然後按一下「產生」按鈕即可。

PWABuilder 可讓開發人員選擇要使用哪項工具封裝 Meta Quest 裝置的 PWA。

您可以選擇「Meta Quest」選項來使用 Oculus Platform Utility。

PWABuilder 封裝選項。

您可以選擇「Android」選項來使用對話框，然後勾選「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 Store。

除了將應用程式提交至 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

以下是測試應用程式的螢幕側錄。

SVG 程式碼的 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 Working Group 的 WebXR Tests 中使用者代理程式提示測試的螢幕側錄。

如您所見，必須獲得使用者同意才能進入 VR 模式。每個來源都會要求一次權限。要求權限時會離開沉浸模式。目前不支援通知。

手追蹤

有了 WebXR Com Input API 和 Meta 的 AI 手追蹤系統，就能在沉浸模式中與 PWA 互動。

以下是 Immersive Web Working Group 的 WebXR 範例中的手追蹤範例螢幕側錄。

擴增/混合實境 (直通式)

正如 2022 年 Meta Connect 所宣布，Meta Quest 瀏覽器已支援 Meta Quest 2 和 Meta Quest Pro 裝置上的 WebXR 擴增實境 (AR) (又稱為混合實境 (MR))。

讓我們以縮小模型和隱藏天空與飛機為例，看看稍加修改的 A Frame 範例以改善擴增實境。

A-Frame 是一種開放原始碼網路架構，能夠完全運用可重複使用的宣告式自訂 HTML 元素，建構 3D/VR/AR 體驗。這類元素易於閱讀、理解及複製與貼上。

以下是 Meta Quest 2 的示範螢幕側錄。

Meta Quest 2 配備單色相機，因此直通式相機為灰階，Meta Quest Pro 的拍攝彩色相機。

結論

在 Oculus Quest 2 中導入 PWA 不但有趣有趣，還能帶來極大助益。有了無盡的虛擬畫布，使用者就能根據目前工作大小調整畫面，很有潛力改變未來的工作方式。雖然在 VR 中使用手持追蹤功能仍待在操作中，但對我來說，還是不太穩定，但是適合輸入網址或輸入簡短文字時，也相當好用。

Oculus Quest 2 中的 PWA 最值得一提的是，這些 PWA 只是一般 PWA，可在瀏覽器分頁或精簡 APK 包裝函式中使用，無需任何平台專屬 API。使用同一組程式碼指定多個平台，其實非常簡單。以下將說明 VR 和 AR 網頁版的 PWA未來亮點！

特別銘謝

Flickr 上的 Maximilian Prandstätter 提供的 Oculus Quest 2 相片。Oculus Store 提供 Instagram、Facebook、Oculus Browser 和 Spike 應用程式的圖片，以及「應用程式曝光度」圖示和 手部追蹤動畫，由 Meta 提供。主頁橫幅由 Arnau Marín i Puig 創作。這篇文章是由 Joe Medley 審查。