Meta Developers

Before packaging your WebXR experience as a PWA, test it in the Browser. PWAs use the same rendering engine as Browser, making it easy to identify compatibility or performance issues with minimal effort.

You can find basic information about Browser, including the User Agent string, supported content sizes, and more in our Browser Getting Started guide. You can also connect the Chrome Developer Tools from your computer to a Meta Quest device for debugging and performance analysis using the Android Platform Tools.

Request WebXR Session after page load

WebXR PWAs should behave like native immersive apps in Meta Horizon OS, launching directly into immersive mode right after launch without a 2D landing page. To achieve this, call the requestSession API right after the page is loaded.

In THREE.js

Add a navigator.xr.requestSession call after the page initialization is finished.

For example, in init.js, at the end of the init function definition:

export async function init(setupScene = () => {}, onFrame = () => {}) {
  // Other setup code...
  if (navigator.xr && navigator.xr.isSessionSupported) {
    navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
      if (supported && navigator.xr.requestSession) {
        navigator.xr.requestSession('immersive-vr', {
          optionalFeatures: ['REQUIRED_FEATURES'],
        })
        .then((session) => {renderer.xr.setSession(session);});
      }
    });
  }
}

In A-Frame

Add an event listener to the HTML file of your landing page.

For example:

<script type="text/javascript">
    const scene = document.querySelector('a-scene');
    if (scene.hasLoaded) {
        run();
    } else {
        scene.addEventListener('renderstart', run);
    }
    function run() {
        scene.enterVR();
    }
</script>

Next Steps

After setting up and hosting your web app manifest, visit the PWA Packaging page to build your installable application.

Frequently Asked Questions

What are the user activation requirements for requestSession API?

The XRSystem:requestSession() method requires a user activation as a security check before a WebXR session can be created. This prevents the user from being brought into an immersive WebXR session right after a WebXR page is loaded in the regular browser. In the WebXR PWA scenario, clicking the PWA app icon is considered user action to create a WebXR session for PWAs. It provides the same user experience as other immersive apps in Meta Horizon OS.

Can I call requestSession after the page load only in a PWA?

Yes. Check if the Digital Goods service is available before calling requestSession to make sure you are within a PWA scope.

if (window.getDigitalGoodsService !== undefined) {
  // Add your requestSession related logic here
}

How to debug WebXR PWAs on Quest devices?

You can connect the Chrome Developer Tools from your computer to a Meta Quest device for debugging. You will be able to see your website tab being loaded in chrome://inspect after your WebXR PWA is launched. Click inspect to start debugging that tab in Browser.

Did you find this page helpful?