quest-webxr

Horizon OS 上の WebXR と PWA

ウェブ方式では、ネイティブのパフォーマンスと引き換えに、git push でデプロイできる手軽さが得られます。デモ、カタログ、ツール、ヘッドセット以外でも動作させる必要があるものには適していますが、フレーム予算にすでに余裕がない場合には適しません。

セッション／機能のネゴシエーション、通常画面へのフォールバック、アセット、ホスティング、ブラウザー／PWA の配信チェックについては、references/runtime-delivery.md を参照してください。

製品全体のロードマップやステージ監査には quest-lifecycle を使用してください。単一の技術タスクはこの担当範囲にとどめます。見当たらない場合は、現在のステージ、その根拠、次の前提条件を本文中に示してください。

手戻りを避ける手順

1. まずサイトを構築し、ヘッドセットの Browser でテストします。 パッケージ化された PWA も同じレンダリングエンジンを使用するため、互換性やパフォーマンスの問題はパッケージ化する前にすべて確認できます。
2. リモートでデバッグします — Android プラットフォームツール経由で、デバイスに接続したマシンから Chrome DevTools を使用します。Browser の仕様ページには、ユーザーエージェント文字列とサポートされるコンテンツサイズが記載されています。
3. ページが適切に動作してからパッケージ化します。

本物のアプリのようにイマーシブモードに入る

ヘッドセットのライブラリから起動した PWA では、2D のランディングページを表示すべきではありません。ページの読み込み後、すぐにセッションを要求してください。

const supported = await navigator.xr?.isSessionSupported('immersive-vr');
if (supported) {
  const session = await navigator.xr.requestSession('immersive-vr');
  await renderer.xr.setSession(session);          // three.js
}

A-Frame では、renderstart 時に scene.enterVR() を呼び出すことで同じことができます。Meta 独自のスニペットでは、window.getDigitalGoodsService !== undefined が条件になっています。これはパッケージ化された PWA 内では存在し、通常の Browser では存在しないため、ノートパソコンで URL を開いた場合もページは引き続き動作します。

フレームワークの選択

選択肢	使用する場面
IWSDK（npm create @iwsdk@latest）	画面ベースの 3D とイマーシブ WebXR の両方で Meta が推奨する方法です。テスト環境（デスクトップ上の IWER）やビルド／デプロイのガイドも含まれています
three.js	既存の three.js コードベースがある場合や、レンダラーを完全に制御したい場合
A-Frame	宣言的なシーンを作成したい場合や、すばやくプロトタイプを作りたい場合

Meta は IWSDK 向けに hz-iwsdk-webxr スキルも提供しています。IWSDK 固有の作業ではこれを使用してください。このスキルでは、ウェブ方式が適切かどうかを判断し、パッケージ化と配信の境界を担当します。

PWA としてパッケージ化する

イマーシブ PWA がそもそも起動するかどうかを左右する Digital Asset Links の手順を含むステップごとの説明については、references/pwa-packaging.md を参照してください。

npm install --global @meta-quest/bubblewrap-cli    # verified at 1.24.1, Node 18+
bubblewrap --version

Bubblewrap が必要とする順に、前提条件を示します。

• 有効な Web App Manifest を備え、HTTPS 経由で配信されるサイト。
• Developer Dashboard で作成したアプリ。PWA がアプリ内購入を利用する場合は、Meta Horizon Application ID が必要です。
• 署名キー、または init の実行中に作成するための情報。
• サイドロードテスト用の Developer Mode が有効なヘッドセット。

Bubblewrap の初回実行時には、適合する JDK と Android コマンドラインツールのダウンロードが提案されます。環境側で管理していない限り、ダウンロードしてください。Quest の初期化中に Horizon Billing を含めるかどうか尋ねられます。IAP が対象の場合は、後から追加するとプロジェクトの再生成が必要になるため、Application ID を用意しておいてください。

マネタイズとプラットフォーム機能

WebXR PWA のアプリ内購入には Horizon Billing と Digital Goods API を使用します。実績、リーダーボード、アドオンには、ウェブドキュメントのインデックスにサーバー間 API の説明があります。IAP はパッケージ化する前に設定してください。

配信

パッケージ化された PWA は Android パッケージであり、リリースチャンネル、審査、VRC など、ネイティブビルドと同じ手順で配信されます。quest-store と、PWA 固有のストア手順を説明する Meta の hz-store-pwa スキルを参照してください。2D（非イマーシブ）PWA は VRC の一部に照らして評価され、自動却下の対象となる権限の一覧があります。

パフォーマンスについて、正直に

• ブラウザーには独自のカウンターがあり、ウェブドキュメントでドローコールの指標を確認できます。quest-perf のネイティブプロファイラーでは、ページ内部は確認できません。
• フレーム予算はネイティブと同じ（72 Hz で 13.9 ms）ですが、オーバーヘッドは異なります。デスクトップのブラウザーウィンドウではなく、ヘッドセットで測定してください。
• XRSession の requestAnimationFrame がフレームクロックです。ページで DOM アニメーションも同時に実行し続けると、負荷が二重にかかります。

参照先

index:  https://developers.meta.com/horizon/llmstxt/documentation/web/llms.txt/
page:   https://developers.meta.com/horizon/llmstxt/documentation/web/<slug>.md

役立つスラッグ：pwa-webxr、pwa-packaging、pwa-overview-gs、browser-specs、 browser-remote-debugging、3d-web、ps-iap、ts-webxr-perf-drawcall。 IWSDK 独自のガイドは documentation/iwsdk/guides/ にあります。

注意点

• PWA 内に 2D のランディングページが表示されると、アプリが壊れているように見えます — 読み込み時にセッションをリクエストしてください。
• bubblewrap は Meta のフォーク版（@meta-quest/bubblewrap-cli）であり、Google のパッケージではありません。Quest 固有のプロンプトがあるのはこのフォーク版だけです。
• 課金はパッケージ作成時に決めるものであり、実行時に決めるものではありません。
• デスクトップブラウザーでのテストでは、ロジックは検証できますが、パフォーマンスは正しくわかりません。

2026-09-20 に Meta のウェブドキュメント（pwa-webxr、pwa-packaging、3d-web）を参照しました。記載内容は変わるため、引用する前に bubblewrap と IWSDK のバージョンを再確認してください。

トリガー

ここに案内されるその他のフレーズ：「PWA for Quest」／「PWA для Quest」、「A-Frame」、「bubblewrap」、 「ヘッドセット用のウェブアプリマニフェスト」、「Quest のブラウザー」／「ブラウザー・イン・ヘッドセット」、「ヘッドセットのブラウザーをリモートデバッグする」／「ヘッドセットのブラウザーをデバッグする」、「ウェブ IAP」／「ウェブでの購入」。

0.4.4 の説明文からここに移動しました：「immersive-vr session」、「イマーシブセッション」、 「Quest 上の three.js」。