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 Browser。本文將著重說明在後者。Oculus 網站介紹 Oculus 瀏覽器如下：
「Oculus 瀏覽器支援最新網路標準和其他技術，可協助您在網路上打造 VR 體驗。現今的 2D 網站在 Oculus 瀏覽器中運作良好，是因為它採用 Chromium 轉譯引擎。我們進一步針對 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 至 2,000 像素。預設尺寸為 1,000 × 625 像素。
與 PWA 互動
您可以使用 Oculus 左右控制器、藍牙滑鼠和鍵盤，以及透過手追蹤功能來控制 PWA。您可以透過 Oculus 控制器的拇指搖桿，或用拇指和食指捏住螢幕，然後朝所需方向移動，進行捲動操作。如要選取某個項目，使用者可以指向並捏合。
PWA 權限
Oculus 瀏覽器的權限運作方式與 Chrome 大致相同。瀏覽器中執行的應用程式和已安裝 PWA 會共用狀態，因此使用者不必重新授予相同權限，就能在兩種體驗之間切換。
由於系統實作的權限很多，並未支援所有功能。舉例來說，雖然要求地理位置權限成功，但裝置實際上從未取得位置資訊。同樣地，各種硬體 API (例如 WebHID、Web Bluetooth 等) 都會通過功能偵測，但實際上不會顯示可讓使用者將 Oculus 與硬體裝置配對的挑選器。我認為，一旦瀏覽器成熟，API 的功能偵測功能就會有所改善。
使用 Chrome 開發人員工具對 PWA 進行偵錯
啟用開發人員模式後，您可以按照「遠端偵錯 Android 裝置」一文的說明，在 Oculus Quest 2 上偵錯 PWAs。
- 在 Oculus 裝置上，透過 Oculus 瀏覽器瀏覽所需網站。
- 在電腦上啟動 Google Chrome，然後前往
chrome://inspect/#devices。 - 找出問題的 Oculus 裝置，接著會看到裝置上目前開啟的一系列 Oculus 瀏覽器分頁。
- 在所需 Oculus 瀏覽器分頁中按一下「檢查」。
應用程式探索
使用者可以透過瀏覽器本身或 Oculus 商店探索 PWAs。就像其他瀏覽器一樣，已安裝的 PWA 也會在 Oculus 瀏覽器中以分頁執行的網站運作。使用者造訪網站時，如果應用程式在 Oculus 商店中提供 (且僅限於此情況)，Oculus 瀏覽器就會協助他們發現該應用程式。如果使用者已經安裝該應用程式，Oculus 瀏覽器就能協助他們視需求輕鬆切換到應用程式。
Oculus Quest 2 上的優異 PWA
Meta 提供的 PWA
多個 Meta 部門已為 Oculus Quest 2 建立 PWA，例如 Instagram 和 Facebook。這些 PWA 會在沒有網址列且可自由調整大小的獨立應用程式視窗中執行。
其他開發人員的 PWA
撰寫本文時，Oculus Quest 2 有越來越多的 PWA。Spike 可讓使用者在 Spike 應用程式的虛擬環境中，透過收件匣體驗所有必要的工作工具，例如電子郵件、即時通訊、通話、記事、工作和待辦事項。
另一個例子是 Smartsheet，這個動態工作區可提供專案管理、自動化工作流程及快速建構新解決方案。
在 2021 年 Facebook Connect 大會上，Jacob Rossi 曾在影片中預告，將推出更多 Slack、Dropbox 或 Canva 等 PWA。
為 Oculus 建立 PWA
Meta 在說明文件中列出必要步驟。一般來說，在 Chrome 中可安裝的 PWA 通常可以在 Oculus 上立即運作。
網頁應用程式資訊清單規定
與 Chrome 的可安裝性標準和 Web App 資訊清單規格相比，這項規範有一些重要差異。舉例來說，Oculus 目前僅支援從左到右的語言，而 Web App 資訊清單規格並未強制執行這類限制。另一個範例是 start_url，Chrome 嚴格規定應用程式必須安裝，但在 Oculus 上則不一定要使用。Oculus 提供的指令列工具可讓開發人員為 Oculus Quest 2 建立 PWA，方便開發人員在網頁應用程式資訊清單中傳遞缺少的參數 (或覆寫現有參數)。
Oculus 提供多個選用的專屬網頁應用程式資訊清單欄位，可用於自訂 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。
如要產生與 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 Platform Utility 為 PWAs 製作封包
Oculus Platform Utility 是 Meta 開發的官方指令列工具，可用於發布 Oculus Rift 和 Meta Quest 裝置的應用程式。
也可以使用 create-pwa 指令封裝適用於中繼任務裝置的 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 是目前為 Meta Quest 封裝 PWA 最簡單，也是最推薦的方法。
PWABuilder 是 Microsoft 開發的開放原始碼專案，可讓開發人員封裝及簽署 PWA，以便發布至 Microsoft Store、Google Play 商店、App Store 和 Meta Quest 商店等各種商店。
使用 PWABuilder 封裝 PWA 非常簡單，只要輸入 PWA 的網址、輸入/編輯應用程式中繼資料，然後按一下「Generate」按鈕即可。
PWABuilder 可讓開發人員選擇用於為 Meta Quest 裝置封裝 PWA 的內部工具。
您可以選擇「Meta Quest」選項，使用 Oculus 平台公用程式。
您可以選擇「Android」選項使用 Bubblewrap，並選取「Meta Quest 相容」核取方塊。
使用 ADB 安裝 PWA
建立 APK 檔案後，您可以使用 ADB 透過 USB 或 Wi-Fi 進行 ADB 側載至 Meta Quest 裝置：
adb install app-release-signed.apk
如果您使用 Bubblewrap CLI 來封裝 PWA，它會提供方便的別名指令，用於側載 APK 檔案：
bubblewrap install
側載的應用程式會顯示在應用程式匣的「不明來源」部分。
提交應用程式
如要瞭解如何將 PWA 上傳至 Oculus 商店，請參閱 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
以下是測試應用程式的螢幕側錄。
Oculus 版本的 SVGcode
為了快速進行操作說明，我建立了 Oculus 版本，並用最新的 PWA SVGcode 建立。您可以從我的 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 安裝、權限要求、通知) 嗎？
以下是沉浸式網頁工作小組的WebXR 測試使用者代理程式提示測試的螢幕錄影。
如您所見，進入 VR 模式需要使用者的許可。每個來源都會要求一次權限。要求權限會退出全螢幕模式。目前不支援通知。
手勢追蹤
有了 WebXR Hand Input API 和 Meta 的以 AI 為基礎的手勢追蹤系統，您就能在沉浸式模式中使用手勢與 PWA 互動。
以下是沉浸式網頁工作小組WebXR 範例的手勢追蹤範例螢幕錄影。
擴增/混合實境 (透視)
如同在 Meta Connect 2022 宣布的內容，Meta Quest 瀏覽器已新增支援 WebXR 擴增實境 (AR)，也就是在 Meta Quest 2 和 Meta Quest Pro 裝置上支援混合實境 (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，可以在瀏覽器分頁中或透過精簡 APK 包裝函式使用，無須任何特定平台的 API。使用相同程式碼指定多個平台，比以往更加容易。以下是線上 VR 和 AR 模式的 PWA未來一片光明！
特別銘謝
Oculus Quest 2 相片，由 Maximilian Prandstätter 在 Flickr 上提供。Instagram、Facebook、Oculus Browser 和 Spike 應用程式的 Oculus Store 圖片，以及應用程式可探索性插圖和手勢追蹤動畫，均由 Meta 提供。主頁橫幅圖片由 Arnau Marín i Puig 提供。這篇文章由 Joe Medley 審查。