PWAs auf Oculus Quest 2

Die Oculus Quest 2 ist ein Virtual-Reality-Headset (VR-Headset) von Oculus, einer Abteilung von Meta. Entwickler können jetzt 2D- und 3D-Progressive Web-Apps (PWAs) erstellen und verteilen, die die Multitasking-Funktion von Oculus Quest 2 nutzen.

Thomas Steiner

Alexey Rodionov

Die Oculus Quest 2

Die Oculus Quest 2 ist ein Virtual-Reality-Headset (VR-Headset) von Oculus, einer Abteilung von Meta. Es ist der Nachfolger des vorherigen Headsets des Unternehmens, der Oculus Quest. Das Gerät kann sowohl als eigenständiges Headset mit einem internen, Android-basierten Betriebssystem als auch mit Oculus-kompatibler VR-Software auf einem Desktop-Computer ausgeführt werden, wenn es über USB oder WLAN verbunden ist. Es verwendet das Qualcomm Snapdragon XR2-System auf einem Chip mit 6 GB RAM. Das Display der Quest 2 ist ein einzelnes LCD-Panel mit schnellem Switch und einer Auflösung von 1.832 × 1.920 Pixeln pro Auge, das mit einer Aktualisierungsrate von bis zu 120 Hz läuft.

Oculus-Browser

Derzeit sind drei Browser für die Oculus Quest 2 verfügbar: Wolvic, der Nachfolger von Firefox Reality, und der integrierte Oculus Browser. In diesem Artikel geht es um Letzteres. Auf der Oculus-Website wird der Oculus Browser so beschrieben:

Der Oculus Browser unterstützt die neuesten Webstandards und andere Technologien, damit Sie VR-Erlebnisse im Web erstellen können. Die heutigen 2D-Websites funktionieren im Oculus Browser hervorragend, da er auf der Chromium-Rendering-Engine basiert. Der Browser ist für Oculus-Headsets optimiert, um die bestmögliche Leistung zu erzielen und Webentwicklern die Möglichkeit zu geben, das volle Potenzial von VR mit neuen APIs wie WebXR zu nutzen. Mit WebXR öffnen wir die Türen zur nächsten Grenze des Webs.“

User-Agent

Der User-Agent-String des Browsers zum Zeitpunkt der Erstellung ist wie folgt.

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

Wie Sie sehen, basiert die aktuelle Version 18.1.0.2.46.337441587 des Oculus-Browsers auf Chrome 95.0.4638.74. Das ist nur eine Version hinter der aktuellen stabilen Version von Chrome, die 96.0.4664.110 ist. Wenn der Nutzer in den mobilen Modus wechselt, ändert sich VR in Mobile VR.

Benutzeroberfläche

Die Benutzeroberfläche des Browsers (siehe oben) bietet die folgenden Funktionen (obere Zeile von links nach rechts):

• Schaltfläche „Zurück“
• Schaltfläche "Aktualisieren"
• Websiteinformationen
• URL-Leiste
• Schaltfläche „Lesezeichen erstellen“
• Schaltfläche zum Ändern der Größe mit den Optionen „Schmal“, „Mittel“ und „Breit“ sowie einer Zoomfunktion
• Schaltfläche „Mobile Website anfordern“
• Menüschaltfläche mit den folgenden Optionen:
  • Privaten Modus aktivieren
  • Alle Tabs schließen
  • Einstellungen
  • Lesezeichen
  • Downloads
  • Verlauf
  • Browserdaten löschen

Die untere Zeile enthält die folgenden Funktionen:

• Schaltfläche „Schließen“
• Schaltfläche „Minimieren“
• Schaltfläche mit drei Punkten mit Optionen zum Zurückgehen, Vorwärtsgehen und Neuladen

Aktualisierungsrate und Pixel-Verhältnis des Geräts

Auf der Oculus Quest 2 rendert der Oculus Browser sowohl 2D-Webseiteninhalte als auch WebXR mit einer Aktualisierungsrate von 90 Hz. Beim Ansehen von Medien im Vollbildmodus optimiert Oculus Browser die Aktualisierungsrate des Geräts basierend auf der Framerate des Videos, z. B. 24 fps. Die Oculus Quest 2 hat ein Gerätepixelverhältnis von 1,5 für scharfen Text.

PWAs in Oculus Browser und im Oculus Store

Am 28. Oktober 2021 kündigte Jacob Rossi, Product Management Lead bei Meta (Oculus), an, dass PWAs für Oculus Quest und Oculus Quest 2 eingeführt werden. Im Folgenden beschreibe ich die PWA-Erfahrung auf Oculus und erkläre, wie Sie Ihre PWA auf der Oculus Quest 2 erstellen, sideloaden und testen.

Statusfreigabe

Der Anmeldestatus wird zwischen dem Oculus-Browser und PWAs geteilt, sodass Nutzer nahtlos zwischen den beiden wechseln können. Facebook Log-in wird natürlich standardmäßig unterstützt. Der Oculus Browser enthält einen Passwortmanager, mit dem Nutzer ihre Passwörter sicher im Browser und in installierten Apps speichern und freigeben können.

PWA-Fenstergrößen

Browserfenster und Fenster installierter PWAs können vom Nutzer frei in der Größe angepasst werden. Die Höhe kann zwischen 625 und 1.200 Pixeln variieren. Die Breite kann zwischen 400 und 2.000 Pixeln liegen. Die Standardabmessungen sind 1.000 × 625 Pixel.

Mit PWAs interagieren

PWAs können mit dem linken und rechten Oculus-Controller, Bluetooth-Mäusen und ‑Tastaturen sowie über Hand-Tracking gesteuert werden. Das Scrollen erfolgt über die Thumbsticks auf den Oculus-Controllern oder durch Zusammenziehen von Daumen und Zeigefinger und Bewegen in die gewünschte Richtung. Um etwas auszuwählen, kann der Nutzer darauf zeigen und es mit zwei Fingern aufziehen.

Berechtigungen für PWAs

Berechtigungen im Oculus Browser funktionieren im Wesentlichen genauso wie in Chrome. Der Status wird zwischen Apps, die im Browser ausgeführt werden, und installierten PWAs geteilt. Nutzer können also zwischen den beiden wechseln, ohne die gleichen Berechtigungen noch einmal erteilen zu müssen.

Viele Berechtigungen sind zwar implementiert, aber nicht alle Funktionen werden unterstützt. Beispiel: Die Anfrage für die Berechtigung zur Standortbestimmung wird zwar erfolgreich ausgeführt, das Gerät erhält aber nie einen Standort. Ebenso bestehen die verschiedenen Hardware-APIs wie WebHID und Web Bluetooth alle die Funktionserkennung, zeigen aber keinen Picker an, mit dem der Nutzer die Oculus mit einem Hardwaregerät koppeln könnte. Ich gehe davon aus, dass die Erkennbarkeit von API-Funktionen verbessert wird, sobald der Browser ausgereift ist.

PWAs über die Chrome-Entwicklertools debuggen

Nachdem Sie den Entwicklermodus aktiviert haben, funktioniert das Debugging von PWAs auf Oculus Quest 2 genau wie unter Android-Geräte per Remote-Debugging debuggen beschrieben.

1. Rufen Sie auf dem Oculus-Gerät die gewünschte Website im Oculus-Browser auf.
2. Öffnen Sie Google Chrome auf Ihrem Computer und rufen Sie chrome://inspect/#devices auf.
3. Suchen Sie das betreffende Oculus-Gerät. Darauf folgen die Oculus Browser-Tabs, die derzeit auf dem Gerät geöffnet sind.
4. Klicke auf dem gewünschten Oculus Browser-Tab auf Untersuchen.

Apps finden

Nutzer können PWAs über den Browser selbst oder den Oculus Store finden. Wie bei jedem anderen Browser funktionieren installierte PWAs auch im Oculus Browser als Websites, die auf einem Tab ausgeführt werden. Wenn ein Nutzer eine Website besucht, hilft der Oculus Browser ihm, die App zu finden, sofern sie im Oculus Store verfügbar ist. Nutzer, die die App bereits installiert haben, können mit dem Oculus-Browser ganz einfach zur App wechseln.

Beispiel-PWAs auf der Oculus Quest 2

PWAs von Meta

Mehrere Meta-Abteilungen haben PWAs für die Oculus Quest 2 erstellt, z. B. Instagram und Facebook. Diese PWAs werden in eigenständigen App-Fenstern ohne URL-Leiste ausgeführt, deren Größe frei geändert werden kann.

PWAs von anderen Entwicklern

Zum Zeitpunkt der Erstellung dieses Dokuments gibt es eine kleine, aber wachsende Anzahl von PWAs für die Oculus Quest 2 im Oculus Store. Mit Spike können Nutzer alle wichtigen Arbeitstools wie E‑Mail, Chat, Anrufe, Notizen, Aufgaben und To-do-Listen direkt in der Spike App in einem virtuellen Umgebungs-Hub nutzen.

Ein weiteres Beispiel ist Smartsheet, ein dynamischer Arbeitsbereich, der Projektmanagement, automatisierte Workflows und die schnelle Entwicklung neuer Lösungen bietet.

Weitere PWAs wie Slack, Dropbox oder Canva sind in Planung, wie in einem Video mit Jacob Rossi angedeutet wurde, das im Rahmen der Connect-Konferenz von Facebook im Jahr 2021 veröffentlicht wurde.

PWAs für Oculus erstellen

Meta hat die erforderlichen Schritte in seiner Dokumentation beschrieben. Im Allgemeinen sollten PWAs, die in Chrome installiert werden können, oft sofort auf Oculus funktionieren.

Anforderungen an das Manifest von Web-Apps

Es gibt einige wichtige Unterschiede zu den Installierbarkeitskriterien von Chrome und der Web App Manifest-Spezifikation. Oculus unterstützt derzeit beispielsweise nur Sprachen, die von links nach rechts geschrieben werden, während die Web App Manifest-Spezifikation keine solchen Einschränkungen vorsieht. Ein weiteres Beispiel ist start_url, das für die Installation einer App in Chrome unbedingt erforderlich ist, in Oculus jedoch optional ist. Oculus bietet ein Befehlszeilentool, mit dem Entwickler PWAs für die Oculus Quest 2 erstellen können. Damit können sie die fehlenden Parameter im Web-App-Manifest übergeben oder die vorhandenen Parameter überschreiben.

Oculus bietet eine Reihe optionaler proprietärer Web-App-Manifestfelder, mit denen die PWA-Nutzung angepasst werden kann.

PWAs mit der Bubblewrap-Befehlszeile verpacken

Bubblewrap ist eine Open-Source-Sammlung von Bibliotheken und ein Befehlszeilentool (CLI) für Node.js. Bubblewrap wurde vom Google Chrome-Team entwickelt, um Entwicklern dabei zu helfen, ein Android-Projekt zu generieren, zu erstellen und zu signieren, mit dem Ihre PWA als vertrauenswürdige Web-Aktivität (Trusted Web Activity, TWA) gestartet wird.

Der Meta Quest-Browser unterstützt TWA derzeit nicht vollständig. Ab Version 1.18.0 unterstützt Bubblewrap jedoch das Verpacken von PWAs für Meta Quest-Geräte.

Es kann universelle APK-Dateien generieren, die eine TWA auf normalen Android-Geräten und den Meta Quest-Browser auf Meta Quest-Geräten öffnen.

Wenn Node.js installiert ist, kann die Bubblewrap-Befehlszeile mit dem folgenden Befehl installiert werden:

npm i -g @bubblewrap/cli

Wenn Sie Bubblewrap zum ersten Mal ausführen, werden Sie gefragt, ob die erforderlichen externen Abhängigkeiten (Java Development Kit, JDK, und Android SDK Build Tools) automatisch heruntergeladen und installiert werden sollen.

Wenn Sie ein mit Meta Quest kompatibles Android-Projekt generieren möchten, das Ihre PWA umschließt, führen Sie den init-Befehl mit dem --metaquest-Flag aus und folgen Sie dem Assistenten:

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

Nachdem das Projekt generiert wurde, können Sie es mit dem folgenden Befehl erstellen und signieren:

bubblewrap build

Dadurch wird eine Datei mit dem Namen app-release-signed.apk ausgegeben. Diese Datei kann auf dem Gerät installiert oder im Meta Quest Store, Google Play Store oder auf einer der anderen Android-App-Vertriebsplattformen veröffentlicht werden.

PWAs mit dem Oculus Platform Utility verpacken

Das Oculus Platform Utility ist das offizielle Befehlszeilentool, das von Meta für die Veröffentlichung von Apps für Oculus Rift- und Meta Quest-Geräte entwickelt wurde.

Außerdem können PWAs für Meta Quest-Geräte mit dem Befehl create-pwa verpackt und im Meta Quest Store und App Lab veröffentlicht werden.

Legen Sie den Namen der Ausgabedatei über den Parameter -o und den Pfad zum Android SDK über den Parameter --android-sdk fest.

Verweisen Sie mit dem Parameter --web-manifest-url auf die Live-URL des Web-App-Manifests.

Wenn Sie kein Manifest für Ihre Live-PWA haben oder das Live-Manifest überschreiben möchten, können Sie trotzdem ein APK für Ihre PWA generieren. Verwenden Sie dazu eine lokale Manifestdatei und den Parameter --manifest-content-file.

Damit das Manifest so rein wie möglich bleibt, verwenden Sie den Parameter --package-name mit einem Wert in umgekehrter Domainnamenschreibweise (z. B. com.company.app.pwa), anstatt das proprietäre Feld ovr_package_name dem Manifest hinzuzufügen.

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

PWAs mit PWABuilder verpacken

Die Verwendung von PWABuilder ist aus Sicht der Autoren die einfachste und daher derzeit empfohlene Methode, PWAs für Meta Quest zu verpacken.

PWABuilder ist ein Open-Source-Projekt von Microsoft, mit dem Entwickler ihre PWAs für die Veröffentlichung in verschiedenen Stores packen und signieren können, darunter Microsoft Store, Google Play Store, App Store und Meta Quest Store.

PWAs mit PWABuilder zu verpacken ist ganz einfach: Sie müssen nur die URL einer PWA eingeben, die Metadaten für die App eingeben/bearbeiten und auf die Schaltfläche Generieren klicken.

Mit PWABuilder können Entwickler auswählen, welches Tool für die Verpackung von PWAs für Meta Quest-Geräte verwendet werden soll.

Wählen Sie die Option Meta Quest aus, um das Oculus Platform Utility zu verwenden.

Sie können die Option Android auswählen, um Bubblewrap zu verwenden, und das Kästchen Mit Meta Quest kompatibel aktivieren.

PWAs mit ADB installieren

Nachdem du die APK-Datei erstellt hast, kannst du sie über ADB per USB oder WLAN auf das Meta Quest-Gerät sideloaden:

adb install app-release-signed.apk

Wenn Sie die Bubblewrap-Befehlszeile zum Verpacken von PWAs verwenden, steht ein praktischer Aliasbefehl zum Sideloading der APK-Datei zur Verfügung:

bubblewrap install

Per Sideloading installierte Apps werden in der App-Übersicht im Bereich Unbekannte Quellen angezeigt.

App-Einreichung

Das Hochladen und Einreichen von PWAs im Oculus Store wird in der Dokumentation im Oculus Developer Center ausführlich beschrieben.

Neben der Einreichung von Apps im Oculus Store können Entwickler ihre Apps auch über Plattformen wie SideQuest direkt an Verbraucher verteilen, ohne dass eine Store-Genehmigung erforderlich ist. So können sie Endnutzern eine App direkt zur Verfügung stellen, auch wenn sie sich noch in der Entwicklung befindet, experimentell ist oder auf eine bestimmte Zielgruppe ausgerichtet ist.

Apps mit mehreren Tabs testen

Um Apps mit mehreren Tabs zu testen, habe ich eine kleine Test-PWA erstellt, die die verschiedenen Linkfunktionen demonstriert: einen neuen In-PWA-Tab öffnen, auf dem aktuellen Tab bleiben, ein neues Browserfenster öffnen und in einer WebView auf dem aktuellen Tab bleiben. Erstellen Sie eine lokal installierbare Kopie dieser App, indem Sie die folgenden Befehle auf Ihrem Computer ausführen.

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

Hier ist ein Screencast der Test-App.

Eine Oculus-Version von SVGcode

Um die Anleitung auszuprobieren, habe ich eine Oculus-Version meiner neuesten PWA, SVGcode, erstellt. Die resultierende APK-Datei können Sie output.apk aus meiner Google Drive-Ablage herunterladen. Wenn Sie das Paket genauer untersuchen möchten, habe ich auch eine dekompilierte Version. Die Bauanleitung findest du unter package.json.

Die Verwendung der App auf Oculus funktioniert einwandfrei, einschließlich der Möglichkeit, Dateien zu öffnen und zu speichern. Der Oculus Browser unterstützt die File System Access API nicht, aber der Fallback-Ansatz kann helfen. Nur das Auf- und Zuziehen zum Zoomen hat nicht funktioniert. Ich hatte erwartet, dass es funktioniert, wenn ich die Triggertaste auf beiden Controllern drücke und die Controller dann in entgegengesetzte Richtungen bewege. Ansonsten war alles leistungsstark und reaktionsschnell, wie Sie im eingebetteten Screencast sehen können.

Immersive 3D-WebXR-PWAs

Die PWA-Unterstützung auf Oculus Quest ist nicht auf flache 2D-Apps beschränkt. Mit der WebXR API können Entwickler immersive 3D-Erlebnisse für VR erstellen.

Wie werden verschiedene Prompts (PWA-Installation, Berechtigungsanfragen, Benachrichtigungen) in VR gehandhabt?

Hier sehen Sie einen Screencast des User-Agent-Prompts-Tests der Immersive Web Working Group; er ist Teil der WebXR-Tests.

Wie Sie sehen, ist für den VR-Modus die Einwilligung des Nutzers erforderlich. Berechtigungen werden einmal pro Ursprung angefordert. Durch das Anfordern von Berechtigungen wird der immersive Modus beendet. Benachrichtigungen werden derzeit nicht unterstützt.

Hand tracking

Dank der WebXR Hand Input API und des KI-basierten Hand-Tracking-Systems von Meta können Sie PWAs im immersiven Modus mit Ihren Händen bedienen.

Hier ist ein Screencast des Hand Tracking Sample (Beispiel für Hand-Tracking) aus den WebXR Samples (WebXR-Beispielen) der Immersive Web Working Group.

Augmented/Mixed Reality (Passthrough)

Wie auf der Meta Connect 2022 angekündigt, wurde im Meta Quest Browser die Unterstützung für WebXR Augmented Reality (AR), auch bekannt als Mixed Reality (MR), auf Meta Quest 2- und Meta Quest Pro-Geräten hinzugefügt.

Sehen wir uns ein leicht modifiziertes A-Frame-Starterbeispiel mit verkleinerten Modellen und ausgeblendeten Himmel und Ebene für Augmented Reality an.

A-Frame ist ein Open-Source-Webframework zum Erstellen von 3D-/VR-/AR-Erlebnissen, das vollständig auf deklarativen, wiederverwendbaren benutzerdefinierten HTML-Elementen basiert, die leicht zu lesen, zu verstehen und zu kopieren sind.

Hier sehen Sie einen Screencast dieser Demo auf Meta Quest 2.

Die Meta Quest 2 hat monochrome Kameras, sodass der Passthrough-Modus in Graustufen erfolgt. Die Meta Quest Pro hat Farbkameras.

Zusammenfassung

PWAs auf Oculus Quest 2 machen viel Spaß und sind sehr vielversprechend. Die unendliche virtuelle Arbeitsfläche, auf der Nutzer ihren Bildschirm an die aktuelle Aufgabe anpassen können, hat viel Potenzial, unsere Arbeitsweise in Zukunft zu verändern. Das Tippen in der VR mit Hand-Tracking steckt noch in den Kinderschuhen und funktioniert zumindest für mich noch nicht sehr zuverlässig. Es reicht aber aus, um URLs einzugeben oder kurze Texte zu schreiben.

Das Beste an PWAs auf der Oculus Quest 2 ist, dass es sich um ganz normale PWAs handelt, die unverändert in einem Browser-Tab oder über einen dünnen APK-Wrapper ohne plattformspezifische APIs verwendet werden können. Das Targeting auf mehrere Plattformen mit demselben Code war noch nie so einfach. Auf PWAs in VR und AR im Web. Die Zukunft sieht rosig aus!

Danksagungen

Oculus Quest 2-Foto von Maximilian Prandstätter auf Flickr. Oculus Store-Bilder von Instagram, Facebook, Oculus Browser und Spike sowie eine Illustration zur Auffindbarkeit von Apps und eine Animation zum Hand-Tracking mit freundlicher Genehmigung von Meta. Hero-Image von Arnau Marín i Puig. Dieser Beitrag wurde von Joe Medley überprüft.