PWA sur Oculus Quest 2

L'Oculus Quest 2 est un casque de réalité virtuelle (RV) créé par Oculus, une division de Meta. Les développeurs peuvent désormais créer et distribuer des progressive web apps (PWA) en 2D et 3D qui tirent parti de la fonctionnalité multitâche de l'Oculus Quest 2.

Thomas Steiner

Alexey Rodionov

Oculus Quest 2

L'Oculus Quest 2 est un casque de réalité virtuelle (RV) créé par Oculus, une division de Meta. Il succède au casque précédent de l'entreprise, l'Oculus Quest. L'appareil peut fonctionner à la fois comme un casque autonome avec un système d'exploitation interne basé sur Android et avec un logiciel de RV compatible avec Oculus s'exécutant sur un ordinateur de bureau lorsqu'il est connecté via USB ou Wi-Fi. Il utilise le système sur une puce Qualcomm Snapdragon XR2 avec 6 Go de RAM. L'écran du Quest 2 est un panneau LCD unique à commutation rapide, avec une résolution de 1 832 × 1 920 pixels par œil et une fréquence d'actualisation pouvant atteindre 120 Hz.

Le navigateur Oculus

Trois navigateurs sont actuellement disponibles pour l'Oculus Quest 2 : Wolvic, successeur de Firefox Reality, et le navigateur Oculus intégré. Cet article porte sur la deuxième option. Le site Web d'Oculus présente le navigateur Oculus comme suit.

"Le navigateur Oculus est compatible avec les dernières normes Web et d'autres technologies pour vous aider à créer des expériences de RV sur le Web. Les sites Web 2D actuels fonctionnent parfaitement dans Oculus Browser, car il est optimisé par le moteur de rendu Chromium. Il est également optimisé pour les casques Oculus afin d'obtenir les meilleures performances et de permettre aux développeurs Web de profiter de tout le potentiel de la RV grâce à de nouvelles API, comme WebXR. Grâce à WebXR, nous ouvrons les portes de la prochaine frontière du Web."

User-agent

La chaîne user-agent du navigateur au moment de la rédaction est la suivante.

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

Comme vous pouvez le voir, la version actuelle 18.1.0.2.46.337441587 du navigateur Oculus est basée sur Chrome 95.0.4638.74, qui n'a qu'une version de retard par rapport à la version stable actuelle de Chrome, qui est 96.0.4664.110. Si l'utilisateur passe en mode mobile, VR devient Mobile VR.

Interface utilisateur

L'interface utilisateur du navigateur (illustrée ci-dessus) comporte les fonctionnalités suivantes (ligne supérieure, de gauche à droite) :

• Bouton Retour
• Bouton "Actualiser"
• Informations sur le site
• Barre d'URL
• Bouton "Créer un favori"
• Bouton de redimensionnement avec les options "Étroit", "Moyen" et "Large", ainsi qu'une fonctionnalité de zoom
• Bouton "Demander le site Web mobile"
• Bouton de menu avec les options suivantes :
  • Passer en mode privé
  • Fermer tous les onglets
  • Paramètres
  • Bookmarks
  • Téléchargements
  • Historique
  • Effacer les données de navigation

La ligne du bas comprend les fonctionnalités suivantes :

• Bouton "Fermer"
• Bouton "Réduire"
• Bouton à trois points avec les options "Retour", "Suivant" et "Actualiser"

Fréquence d'actualisation et rapport de pixels de l'appareil

Pour Oculus Quest 2, le navigateur Oculus affiche le contenu des pages Web 2D et WebXR à une fréquence d'actualisation de 90 Hz. Lorsque vous regardez un contenu multimédia en plein écran, le navigateur Oculus optimise la fréquence d'actualisation de l'appareil en fonction de la fréquence d'images de la vidéo (par exemple, 24 fps). L'Oculus Quest 2 présente un ratio de pixels de l'appareil de 1,5 pour un texte net.

PWA dans le navigateur Oculus et l'Oculus Store

Le 28 octobre 2021, Jacob Rossi, responsable de la gestion des produits chez Meta (Oculus), a annoncé que les PWA étaient disponibles sur Oculus Quest et Oculus Quest 2. Dans la suite de cet article, je décris l'expérience PWA sur Oculus et j'explique comment créer, charger et tester votre PWA sur l'Oculus Quest 2.

Partage d'état

L'état de connexion est partagé entre le navigateur Oculus et les PWA, ce qui permet aux utilisateurs de passer facilement de l'un à l'autre. Naturellement, Facebook Login est compatible d'emblée. Le navigateur Oculus inclut un gestionnaire de mots de passe qui permet aux utilisateurs de stocker et de partager leurs mots de passe de manière sécurisée entre le navigateur et les expériences des applications installées.

Tailles de fenêtre des PWA

L'utilisateur peut redimensionner librement les fenêtres du navigateur et des PWA installées. La hauteur peut varier entre 625 px et 1 200 px. La largeur peut être comprise entre 400 px et 2 000 px. Les dimensions par défaut sont de 1 000 × 625 px.

Interagir avec les PWA

Les PWA peuvent être contrôlées à l'aide des manettes Oculus gauche et droite, de souris et de claviers Bluetooth, et via le suivi des mains. Le défilement s'effectue à l'aide des sticks analogiques des manettes Oculus, ou en pinçant le pouce et l'index et en les déplaçant dans la direction souhaitée. Pour sélectionner un élément, l'utilisateur peut pointer et pincer.

Autorisations pour les PWA

Les autorisations dans le navigateur Oculus fonctionnent à peu près de la même manière que dans Chrome. L'état est partagé entre les applications exécutées dans le navigateur et les PWA installées. Les utilisateurs peuvent ainsi passer d'une expérience à l'autre sans avoir à accorder à nouveau les mêmes autorisations.

Bien que de nombreuses autorisations soient implémentées, toutes les fonctionnalités ne sont pas prises en charge. Par exemple, même si la demande d'autorisation de géolocalisation aboutit, l'appareil n'obtient jamais de position. De même, les différentes API matérielles telles que WebHID, Web Bluetooth, etc. réussissent toutes la détection de fonctionnalités, mais n'affichent pas de sélecteur permettant à l'utilisateur d'associer l'Oculus à un appareil matériel. Je suppose que la détection des fonctionnalités des API sera affinée une fois que le navigateur aura mûri.

Déboguer des PWA avec les outils pour les développeurs Chrome

Après avoir activé le mode développeur, le débogage des PWA sur Oculus Quest 2 fonctionne exactement comme décrit dans Déboguer à distance des appareils Android.

1. Sur l'appareil Oculus, accédez au site souhaité dans le navigateur Oculus.
2. Lancez Google Chrome sur votre ordinateur et accédez à chrome://inspect/#devices.
3. Recherchez l'appareil Oculus en question. Il sera suivi d'un ensemble d'onglets du navigateur Oculus actuellement ouverts sur l'appareil.
4. Cliquez sur Inspecter sur l'onglet Oculus Browser souhaité.

Découverte des applications

Les utilisateurs peuvent utiliser le navigateur lui-même ou l'Oculus Store pour découvrir des PWA. Comme avec n'importe quel autre navigateur, les PWA installées fonctionnent également dans Oculus Browser en tant que sites Web s'exécutant dans un onglet. Lorsqu'un utilisateur visite un site, le navigateur Oculus l'aide à découvrir l'application si (et seulement si) elle est disponible sur l'Oculus Store. Pour les utilisateurs qui ont déjà installé l'application, Oculus Browser les aidera à passer facilement à l'application s'ils le souhaitent.

Remarque  : Actuellement, l'événement BeforeInstallPrompt ne se déclenche pas dans le navigateur Oculus, même si la détection de fonctionnalités indique qu'il est compatible.

Exemples de PWA sur l'Oculus Quest 2

PWA par Meta

Plusieurs divisions Meta ont créé des PWA pour l'Oculus Quest 2, par exemple Instagram et Facebook. Ces PWA s'exécutent dans des fenêtres d'application autonomes qui n'ont pas de barre d'URL et qui peuvent être redimensionnées librement.

PWA d'autres développeurs

À l'heure où nous écrivons ces lignes, il existe un nombre restreint, mais croissant, de PWA pour l'Oculus Quest 2 sur l'Oculus Store. Spike permet aux utilisateurs d'accéder à tous les outils de travail essentiels (e-mails, chat, appels, notes, tâches et listes de tâches) depuis leur boîte de réception dans un hub d'environnement virtuel directement dans l'application Spike.

Un autre exemple est Smartsheet, un espace de travail dynamique qui permet de gérer des projets, d'automatiser des workflows et de créer rapidement de nouvelles solutions.

D'autres PWA comme Slack, Dropbox ou Canva sont à venir, comme l'indique une vidéo avec Jacob Rossi, publiée dans le cadre de la conférence Connect de Facebook en 2021.

Créer des PWA pour Oculus

Meta a décrit les étapes requises dans sa documentation. En général, les PWA installables dans Chrome devraient souvent fonctionner directement sur Oculus.

Exigences concernant le fichier manifeste d'application Web

Il existe des différences importantes par rapport aux critères d'installabilité de Chrome et à la spécification du fichier manifeste d'application Web. Par exemple, Oculus n'est actuellement compatible qu'avec les langues s'écrivant de gauche à droite, alors que la spécification du fichier manifeste d'application Web n'impose pas de telles contraintes. Un autre exemple est start_url, que Chrome exige strictement pour qu'une application soit installable, mais qui est facultatif sur Oculus. Oculus propose un outil de ligne de commande qui permet aux développeurs de créer des PWA pour l'Oculus Quest 2, ce qui leur permet de transmettre les paramètres manquants (ou de remplacer les paramètres existants) dans le fichier manifeste de l'application Web.

Nom	Description
name	(Obligatoire) Nom de la PWA. Actuellement, Oculus n'accepte que les langues s'écrivant de gauche à droite pour le nom.
display	(Obligatoire) "standalone" ou "minimal-ui". Oculus n'accepte actuellement aucune autre valeur.
short_name	(Obligatoire) Version plus courte du nom de l'application, si nécessaire.
scope	(Facultatif) URL ou chemins d'accès à prendre en compte dans l'application.
start_url	(Facultatif) URL à afficher au lancement de l'application.

Oculus propose un certain nombre de champs de fichier manifeste d'application Web propriétaires facultatifs qui peuvent être utilisés pour personnaliser l'expérience PWA.

Nom	Description
ovr_package_name	(Facultatif) Définit le nom du package de l'APK généré pour la PWA. Il doit être au format de nom de domaine inversé, par exemple "com.company.app.pwa". Si ce n'est pas le cas, les développeurs doivent fournir un nom de package à l'outil de ligne de commande avec le paramètre --package-name (alors obligatoire).
ovr_multi_tab_enabled	(Facultatif) Si la valeur est true, ce champ booléen dote la PWA d'une barre d'onglets semblable à celle d'Oculus Browser. Dans les PWA multi-onglets, les liens internes qui ciblent un nouvel onglet (target="_new" ou target="_blank") s'ouvrent dans de nouveaux onglets de la fenêtre de la PWA. Cela diffère des PWA à onglet unique, où ces liens s'ouvrent dans une fenêtre du navigateur Oculus. Cette fonctionnalité est actuellement en cours de standardisation en tant que mode d'application à onglets.
ovr_scope_extensions	(Facultatif) Permet à une PWA d'inclure davantage de pages Web dans le champ d'application de l'application Web. Il s'agit d'un dictionnaire JSON contenant des URL d'extensions ou des formats de caractères génériques. Cette fonctionnalité est actuellement en cours de standardisation en tant qu'extensions de champ d'application pour les applications Web.

Empaqueter des PWA avec la CLI Bubblewrap

Bubblewrap est un ensemble de bibliothèques Open Source et un outil de ligne de commande (CLI) pour Node.js. Bubblewrap est développé par l'équipe Google Chrome pour aider les développeurs à générer, créer et signer un projet Android qui lance votre PWA en tant qu'activité Web fiable (TWA).

Le navigateur Meta Quest n'est actuellement pas entièrement compatible avec les TWA, mais à partir de la version 1.18.0, Bubblewrap permet de packager des PWA pour les appareils Meta Quest.

Il peut générer des fichiers APK universels qui ouvrent une TWA sur les appareils Android standards et le navigateur Meta Quest sur les appareils Meta Quest.

Si Node.js est installé, vous pouvez installer la CLI Bubblewrap à l'aide de la commande suivante :

npm i -g @bubblewrap/cli

Lorsque vous exécutez Bubblewrap pour la première fois, il vous propose de télécharger et d'installer automatiquement les dépendances externes requises : le kit de développement Java (JDK) et les outils de compilation du SDK Android.

Pour générer un projet Android compatible avec Meta Quest qui encapsule votre PWA, exécutez la commande init avec l'option --metaquest et suivez l'assistant :

bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest

Une fois le projet généré, compilez-le et signez-le en exécutant la commande suivante :

bubblewrap build

Un fichier nommé app-release-signed.apk sera généré. Ce fichier peut être installé sur l'appareil ou publié sur le Meta Quest Store, le Google Play Store ou toute autre plate-forme de distribution d'applications Android.

Remarque  : Conseil d'expert : vous pouvez également utiliser l'option --chromeosonly en plus de l'option --metaquest pour rendre les fichiers APK compatibles non seulement avec Meta Quest et les appareils Android standards, mais aussi avec les appareils ChromeOS.

Empaqueter des PWA avec l'utilitaire de la plate-forme Oculus

Oculus Platform Utility est l'outil de ligne de commande officiel développé par Meta pour publier des applications pour les appareils Oculus Rift et Meta Quest.

Il permet également de packager des PWA pour les appareils Meta Quest avec la commande create-pwa et de les publier sur le Meta Quest Store et l'App Lab.

Définissez le nom du fichier de sortie via le paramètre -o et le chemin d'accès au SDK Android via le paramètre --android-sdk.

Pointez l'outil vers l'URL active du fichier manifeste de l'application Web via le paramètre --web-manifest-url.

Si vous n'avez pas de fichier manifeste sur votre PWA active ou si vous souhaitez remplacer le fichier manifeste actif, vous pouvez toujours générer un APK pour votre PWA à l'aide d'un fichier manifeste local et du paramètre --manifest-content-file.

Pour que le fichier manifeste reste aussi simple que possible, utilisez le paramètre --package-name avec une valeur en notation de nom de domaine inversé (par exemple, com.company.app.pwa), plutôt que d'ajouter le champ propriétaire ovr_package_name au fichier manifeste.

ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa

Attention  : Les fichiers APK générés par Oculus Platform Utility ne sont compatibles qu'avec les appareils Meta Quest et ne peuvent pas être exécutés sur des appareils Android standards. De plus, elles ne peuvent être publiées que sur le Meta Quest Store et App Lab.

Empaqueter des PWA avec PWABuilder

Selon les auteurs, l'utilisation de PWABuilder est la méthode la plus simple et donc recommandée pour empaqueter des PWA pour Meta Quest à l'heure actuelle.

PWABuilder est un projet Open Source développé par Microsoft, qui permet aux développeurs de packager et de signer leurs PWA pour les publier sur différents magasins d'applications, y compris le Microsoft Store, le Google Play Store, l'App Store et le Meta Quest Store.

Pour empaqueter des PWA avec PWABuilder, il vous suffit de saisir l'URL d'une PWA, de saisir/modifier les métadonnées de l'application, puis de cliquer sur le bouton Generate (Générer).

PWABuilder permet aux développeurs de choisir l'outil à utiliser pour empaqueter les PWA pour les appareils Meta Quest.

Vous pouvez choisir l'option Meta Quest pour utiliser l'utilitaire de la plate-forme Oculus.

Remarque  : Conseil de pro : PWABuilder utilise une version légèrement modifiée d'Oculus Platform Utility qui génère des fichiers APK beaucoup plus petits en supprimant le code et les ressources inutilisés.

Vous pouvez choisir l'option Android pour utiliser Bubblewrap et cocher la case Compatible avec Meta Quest.

Remarque  : Conseil de pro : PWABuilder étant lui-même une PWA qui fonctionne partout où il y a un navigateur, vous pouvez l'ouvrir dans le navigateur Meta Quest et effectuer toutes les étapes directement sur votre Meta Quest.

Installer des PWA avec ADB

Point clé  : Pour activer Android Debug Bridge (ADB) sur l'appareil Meta Quest, vous devez activer le mode développeur dans l'application mobile associée. Avant de pouvoir passer votre appareil en mode développeur, vous devez appartenir à une organisation de développeurs (ou en avoir créé une) dans l'Oculus Developer Center.

Après avoir créé le fichier APK, vous pouvez le charger sur l'appareil Meta Quest à l'aide d'ADB via USB ou Wi-Fi :

adb install app-release-signed.apk

Si vous utilisez la CLI Bubblewrap pour empaqueter des PWA, elle fournit une commande d'alias pratique pour charger de manière indépendante le fichier APK :

bubblewrap install

Remarque  : Conseil de pro : vous pouvez utiliser Android Web Toolbox pour charger des fichiers APK. Il s'agit d'une application Web Open Source qui vous permet d'accéder à toutes les fonctionnalités d'ADB directement depuis le navigateur, même à partir d'un autre appareil Android. Aucune installation ni aucun pilote ne sont requis grâce à l'API Web USB.

Les applications téléchargées de manière indépendante s'affichent dans la section Sources inconnues du panneau des applications.

Envoi de l'application

Important  : Vous ne pouvez envoyer votre application pour examen et publication sur l'Oculus Store que si vous avez été approuvé en tant que développeur Meta Quest Store. La distribution de PWA via App Lab n'est pas disponible pour le moment. L'équipe Meta vous expliquera bientôt quand et comment envoyer une PWA à App Lab.

L'importation et l'envoi de PWA sur l'Oculus Store sont décrits en détail dans la documentation de l'Oculus Developer Center.

En plus de publier leurs applications sur l'Oculus Store, les développeurs peuvent également les distribuer directement aux utilisateurs via des plates-formes telles que SideQuest, de manière sécurisée et sans nécessiter l'approbation du magasin. Cela leur permet de proposer une application directement aux utilisateurs finaux, même si elle est encore en phase de développement, expérimentale ou destinée à une audience unique.

Tester des applications à plusieurs onglets

Pour tester les applications multi-onglets, j'ai créé une petite PWA de test qui illustre les différentes fonctionnalités des liens : ouvrir un nouvel onglet dans la PWA, rester sur l'onglet actuel, ouvrir une nouvelle fenêtre de navigateur et ouvrir dans une WebView en restant sur l'onglet actuel. Créez une copie de cette application installable localement en exécutant les commandes ci-dessous sur votre machine.

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

Voici un enregistrement d'écran de l'application de test.

Une version Oculus de SVGcode

Pour tester les instructions, j'ai créé une version Oculus de ma PWA la plus récente, SVGcode. Vous pouvez télécharger le fichier APK obtenu (output.apk) depuis mon Google Drive. Si vous souhaitez examiner le package plus en détail, j'ai également une version décompilée. Vous trouverez les instructions de compilation dans package.json.

L'utilisation de l'application sur Oculus fonctionne correctement, y compris la possibilité d'ouvrir et d'enregistrer des fichiers. Le navigateur Oculus n'est pas compatible avec l'API File System Access, mais l'approche de remplacement est utile. La seule chose qui ne fonctionnait pas était le zoom par pincement. Je m'attendais à ce que cela fonctionne en appuyant sur le bouton de déclenchement des deux manettes, puis en les déplaçant dans des directions opposées. En dehors de cela, tout le reste était performant et réactif, comme vous pouvez le voir dans l'enregistrement d'écran intégré.

PWA WebXR 3D immersives

La compatibilité des PWA sur Oculus Quest ne se limite pas aux applications 2D plates. Les développeurs peuvent créer des expériences 3D immersives pour la RV à l'aide de l'API WebXR.

Vous vous demandez comment les différentes invites (installation de PWA, demandes d'autorisation, notifications) sont gérées dans la RV, le cas échéant ?

Voici un enregistrement d'écran du test des invites de l'user-agent issu des tests WebXR du groupe de travail Immersive Web.

Comme vous pouvez le voir, l'accès au mode RV nécessite l'autorisation de l'utilisateur. Les autorisations sont demandées une fois par origine. La demande d'autorisations quitte le mode immersif. Les notifications ne sont pas prises en charge pour le moment.

Suivi des mains

Vous pouvez utiliser vos mains pour interagir avec les PWA en mode immersif grâce à l'API WebXR Hand Input et au système de suivi des mains basé sur l'IA de Meta.

Voici un enregistrement d'écran de l'exemple de suivi des mains issu des exemples WebXR du groupe de travail Immersive Web.

Réalité augmentée/mixte (Passthrough)

Comme annoncé lors de l'événement Meta Connect 2022, le navigateur Meta Quest est désormais compatible avec la réalité augmentée (RA) WebXR, également appelée réalité mixte (RM), sur les appareils Meta Quest 2 et Meta Quest Pro.

Examinons un exemple de démarrage A-Frame légèrement modifié avec des modèles réduits, ainsi qu'un ciel et un plan masqués pour la réalité augmentée.

A-Frame est un framework Web Open Source permettant de créer des expériences 3D/RV/RA entièrement à partir d'éléments HTML personnalisés déclaratifs et réutilisables, faciles à lire, à comprendre et à copier-coller.

Voici un enregistrement d'écran de cette démonstration sur Meta Quest 2.

Le Meta Quest 2 est équipé de caméras monochromes, de sorte que le Passthrough est en nuances de gris, tandis que le Meta Quest Pro est équipé de caméras couleur.

Conclusions

Les PWA sur Oculus Quest 2 sont très amusantes et très prometteuses. Le canevas virtuel infini, qui permet aux utilisateurs d'adapter la taille de leur écran à la tâche en cours, a un fort potentiel pour changer notre façon de travailler à l'avenir. Bien que la saisie en RV avec le suivi des mains n'en soit qu'à ses débuts et ne fonctionne pas encore de manière très fiable (du moins pour moi), elle est suffisante pour saisir des URL ou de courts textes.

Ce que j'aime le plus dans les PWA sur l'Oculus Quest 2, c'est qu'il s'agit de PWA standards qui peuvent être utilisées sans modification dans un onglet de navigateur ou via un wrapper APK léger, sans aucune API spécifique à la plate-forme. Cibler plusieurs plates-formes avec le même code n'a jamais été aussi simple. Voici les PWA en RV et RA sur le Web. L'avenir s'annonce radieux !

Remerciements

Photo de l'Oculus Quest 2 par Maximilian Prandstätter sur Flickr. Images de l'Oculus Store des applications Instagram, Facebook, Oculus Browser et Spike, ainsi que l'illustration de la visibilité des applications et l'animation du suivi des mains, fournies par Meta. Cet article a été examiné par Joe Medley.