Prerequisite: Become a Minimal PWA
To give a WebSpatial app the capabilities and experience of a native spatial app - like having its own standalone window instead of just running inside a browser - it needs to be more than just a bunch of webpages. It has to become an actual "app" which means adding app-level info like the app name, app icon, which pages it includes, and what the start page is.
Traditional websites are a loose set of pages and do not include application-level metadata, containing only page-level info like the page title and favicon (page icon).
Some WebSpatial apps also need to be listed in app stores like native apps, reaching users on the platform the same way native apps do. That also requires adding app-level metadata.
For today's Hybrid-based WebSpatial apps, listing in app stores is essential for user acquisition.
While becoming an actual "app", the project must remain a standard website that can still run in regular browsers. This keeps key Web strengths: true cross-platform reach, shareable URLs, and on-demand usage without installation.
The PWA technology defined in Web standards meets these requirements. It adds app-level info to a website and makes it installable. WebSpatial builds on many existing mainstream Web APIs, including the PWA standard.
Therefore, before introducing the WebSpatial API, make sure your site is already a valid PWA.
If your site is not yet a PWA, you only need to create the simplest possible PWA - as long as the site includes a valid Web App Manifest, it can be installed as a PWA and meet WebSpatial's requirements.
If you only need to create an app for installation and execution in the visionOS simulator, you do not have to convert the site to a PWA first. WebSpatial Builder will automatically supply placeholder values like the app name and icon. However, to generate an installable app package, install it on a real Vision Pro device, or distribute via App Store Connect with a real name, icon, and other baseline app details, you must first turn the site into a PWA.
📄️ Add a Web App Manifest
Create the Manifest file
📄️ Add Icon Files
The best practice for a WebSpatial project is to include at least the following icon files:
📄️ Test PWA Installability
You can now launch the React site locally using your project's existing workflow.