Oculus Quest 2 是由 Meta 旗下部門 Oculus 打造的虛擬實境 (VR) 頭戴式裝置。開發人員現在可以建構及發布 2D 和 3D 漸進式網頁應用程式 (PWA)，充分運用 Oculus Quest 2 的多工功能。
Oculus Quest 2
Oculus Quest 2 是由 Meta 旗下部門 Oculus 打造的虛擬實境 (VR) 頭戴式裝置。這是 Oculus Quest 的後繼產品。這款裝置既可做為獨立頭戴式裝置使用，透過內建的 Android 作業系統運作，也能透過 USB 或 Wi-Fi 連線，在桌上型電腦上執行 Oculus 相容的 VR 軟體。這款裝置採用 Qualcomm 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 瀏覽器支援最新的網路標準和其他技術，可協助您在網路上建立 VR 體驗。Oculus 瀏覽器採用 Chromium 轉譯引擎，因此可順暢顯示現今的 2D 網站。此外，我們也針對 Oculus 頭戴式裝置進行最佳化，提供最佳效能，並讓網頁開發人員透過 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 px 到 2,000 px。 預設尺寸為 1,000 × 625 像素。
與 PWA 互動
你可以使用 Oculus 左側和右側控制器、藍牙滑鼠和鍵盤，以及手部追蹤功能控制 PWA。你可以使用 Oculus 控制器的拇指搖桿捲動畫面，也可以用拇指和食指雙指撥動，然後朝所需方向移動。如要選取項目，使用者可以指向並捏合。
PWA 的權限
Oculus 瀏覽器的權限運作方式與 Chrome 幾乎相同。瀏覽器中執行的應用程式和已安裝的 PWA 會共用狀態，因此使用者可以在這兩種體驗之間切換，不必再次授予相同權限。
雖然已實作許多權限，但並非所有功能都支援。舉例來說，雖然要求地理位置權限成功，但裝置實際上從未取得位置資訊。同樣地，WebHID、Web Bluetooth 等各種硬體 API 都會通過功能偵測，但實際上不會顯示選擇器，讓使用者將 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 Store 上適用於 Oculus Quest 2 的 PWA 數量不多，但正在增加中。Spike 可讓使用者在 Spike 應用程式的虛擬環境中心，透過收件匣體驗所有重要的工作工具，例如電子郵件、即時通訊、通話、記事、工作和待辦事項。
另一個例子是 Smartsheet，這個動態工作區提供專案管理、自動化工作流程，以及快速建構新解決方案的功能。
在 2021 年 Facebook Connect 大會期間發布的影片中，Jacob Rossi 預告了更多 PWA 即將推出，例如 Slack、Dropbox 或 Canva。
為 Oculus 建立 PWA
Meta 在說明文件中列出必要步驟。一般來說，可在 Chrome 中安裝的 PWA 通常在 Oculus 上也能直接運作。
網頁應用程式資訊清單規定
與 Chrome 的可安裝性條件和 Web 應用程式資訊清單規格相比，這項功能有一些重大差異。舉例來說，Oculus 目前僅支援從左到右的語言，而 Web 應用程式資訊清單規格則沒有這類限制。另一個例子是 start_url，Chrome 嚴格要求應用程式必須具備這項功能才能安裝，但 Oculus 則不強制要求。Oculus 提供指令列工具，可讓開發人員為 Oculus Quest 2 建立 PWA，並在 Web 應用程式資訊清單中傳遞缺少的參數 (或覆寫現有參數)。
Oculus 提供多個選用的專有網頁應用程式資訊清單欄位，可用於自訂 PWA 體驗。
使用 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 開發套件 (JDK) 和 Android SDK 建構工具。
如要產生與 Meta Quest 相容的 Android 專案 (包裝 PWA)，請執行 init 指令並加上 --metaquest 旗標，然後按照精靈指示操作：
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
專案產生後，請執行下列指令來建構及簽署專案：
bubblewrap build
這會輸出名為 app-release-signed.apk 的檔案。這個檔案可以安裝在裝置上，也可以發布至 Meta Quest 商店、Google Play 商店或任何其他 Android 應用程式發布平台。
使用 Oculus Platform Utility 封裝 PWA
Oculus Platform Utility 是 Meta 開發的官方指令列工具，可用於發布 Oculus Rift 和 Meta Quest 裝置的應用程式。
此外，您也可以使用 create-pwa 指令將 PWA 打包成 Meta Quest 裝置專用版本，並發布到 Meta Quest 商店和 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 是目前最簡單的方法，因此建議您使用這個工具為 Meta Quest 封裝 PWA。
PWABuilder 是 Microsoft 開發的開放原始碼專案，可讓開發人員封裝及簽署 PWA，然後發布至各種商店，包括 Microsoft Store、Google Play 商店、App Store 和 Meta Quest 商店。
使用 PWABuilder 封裝 PWA 非常簡單，只要輸入 PWA 的網址、輸入/編輯應用程式的中繼資料，然後按一下「產生」按鈕即可。
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
以下是測試應用程式的螢幕錄影。
Oculus 版本的 SVGcode
為了實際測試操作說明，我建立了最新 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 測試，其中包含「User Agent Prompts」測試的螢幕畫面。
如您所見，進入 VR 模式需要使用者授權。系統會針對每個來源要求一次權限。 要求權限會離開沉浸模式。目前不支援通知。
手部追蹤
透過 WebXR 手部輸入 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 是開放原始碼的網頁架構，可完全透過宣告式、可重複使用的自訂 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 的網路環境！未來一片光明！
特別銘謝
Oculus Quest 2 照片由 Maximilian Prandstätter 拍攝，並發布於 Flickr。Oculus 商店的 Instagram、Facebook、Oculus 瀏覽器和 Spike 應用程式圖片，以及應用程式探索插圖和手部追蹤動畫，皆由 Meta 提供。主頁橫幅圖片由 Arnau Marín i Puig 提供。這篇文章由喬伊·梅德利審查。