PWAs auf Oculus Quest 2

Oculus Quest 2 ist ein Virtual-Reality-Headset von Oculus, einem Geschäftsbereich von Meta. Entwickler haben jetzt die Möglichkeit, progressive Web-Apps (PWAs) in 2D und 3D zu erstellen und zu verteilen, die die Multitasking-Funktion von Oculus Quest 2 nutzen.

Oculus Quest 2

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

Oculus Quest 2-Gerät mit Controllern.

Oculus Browser

Derzeit sind drei Browser für Oculus Quest 2 verfügbar: Wolvic, ein Nachfolger von Firefox Reality, und den integrierten Oculus Browser. Dieser Artikel konzentriert sich auf Letzteres. Auf der Oculus-Website wird der Oculus Browser wie folgt vorgestellt.

„Oculus Browser unterstützt die neuesten Webstandards und andere Technologien, damit Sie VR-Erlebnisse im Web erstellen können. Heutige 2D-Websites funktionieren hervorragend in Oculus Browser, da es vom Chromium-Rendering-Modul unterstützt wird. Es ist außerdem für Oculus-Headsets optimiert, um die beste Leistung zu erzielen und es Webentwicklern zu ermöglichen, das volle Potenzial von VR mit neuen APIs wie WebXR auszuschöpfen. Mit WebXR öffnen wir die Türen zur nächsten Grenzen des Webs.“

Oculus Browser mit drei geöffneten Browserfenstern.

User-Agent

Der User-Agent-String des Browsers zum Zeitpunkt des Schreibens lautet 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 du siehst, basiert die aktuelle Version 18.1.0.2.46.337441587 von Oculus Browser auf Chrome 95.0.4638.74, also nur eine Version hinter der aktuellen stabilen Version von Chrome, nämlich 96.0.4664.110. Wenn der Nutzer in den mobilen Modus wechselt, ändert sich VR zu Mobile VR.

Oculus Browser Impressum.

Benutzeroberfläche

Die Benutzeroberfläche des Browsers (siehe oben) bietet folgende Funktionen (oberste Zeile von links nach rechts):

  • Schaltfläche „Zurück“
  • Schaltfläche "Aktualisieren"
  • Website-Informationen
  • URL-Leiste
  • Schaltfläche „Lesezeichen erstellen“
  • Die Größe der Schaltfläche lässt sich mit Optionen für schmal, mittel und breit sowie mit einer Zoomfunktion anpassen.
  • Schaltfläche „Mobile Website anfordern“
  • Menüschaltfläche mit den folgenden Optionen:
    • In den privaten Modus wechseln
    • 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 den Optionen „Zurück“, „Weiter“ und „Aktualisieren“

Aktualisierungsrate und Pixel-Verhältnis des Geräts

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

PWAs in Oculus Browser und im Oculus Store

Am 28. Oktober 2021 teilte Jacob Rossi, Product Management Lead bei Meta (Oculus) mit, dass PWAs bald auch für Oculus Quest und Oculus Quest 2 verfügbar sein werden. Im Folgenden erkläre ich die PWA-Funktionen auf Oculus und erkläre, wie du deine PWA in Oculus Quest 2 erstellen, per Sideload übertragen und testen kannst.

Statusfreigabe

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

PWA‐Fenstergrößen

Die Größe der Browserfenster und -fenster von installierten PWAs kann vom Nutzer frei geändert werden. Die Höhe kann zwischen 625 und 1.200 Pixeln liegen. Die Breite kann zwischen 400 und 2.000 Pixeln festgelegt werden. Die Standardabmessungen sind 1.000 × 625 Pixel.

Mit PWAs interagieren

PWAs können mit den linken und rechten Controllern von Oculus, Bluetooth-Mäusen und -Tastaturen sowie per Hand-Tracking gesteuert werden. Das Scrollen funktioniert über die Sticks der Oculus-Controller oder indem man Daumen und Zeigefinger auseinander- und zusammendrückt und sich in die gewünschte Richtung bewegt. Um etwas auszuwählen, kann der Nutzer mit der Maus auseinander- und zusammenziehen.

Berechtigungen für PWAs

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

Es werden zwar viele Berechtigungen implementiert, es werden aber nicht alle Funktionen unterstützt. So erhält das Gerät beispielsweise keinen Standort, obwohl die Berechtigung zur Standortbestimmung erfolgreich ist. Auch die verschiedenen Hardware-APIs wie WebHID, Web Bluetooth usw. erkennen die Funktion, zeigen aber keine Auswahl an, über die der Nutzer Oculus mit einem Hardwaregerät koppeln kann. Ich nehme an, dass die Erkennung von Features von APIs verfeinert wird, sobald der Browser ausgereift ist.

Berechtigungen in Oculus Browser.

Fehler in PWAs mit den Chrome-Entwicklertools beheben

Nachdem Sie den Entwicklermodus aktiviert haben, funktioniert das Debuggen von PWAs in Oculus Quest 2 genau wie unter Remote-Fehlerbehebung für Android-Geräte beschrieben.

  1. Rufe auf dem Oculus-Gerät die gewünschte Website in Oculus Browser auf.
  2. Starten Sie Google Chrome auf Ihrem Computer und rufen Sie chrome://inspect/#devices auf.
  3. Suchen Sie das betreffende Oculus-Gerät, gefolgt von einer Reihe von Oculus Browser-Tabs, die derzeit auf dem Gerät geöffnet sind.
  4. Klicken Sie auf dem gewünschten Oculus Browser-Tab auf inspect.

Prüfung einer App, die in Oculus Quest 2 ausgeführt wird, mit den Chrome-Entwicklertools

App-Sichtbarkeit

Nutzer können PWAs im Browser selbst oder im Oculus Store entdecken. Installierte PWAs funktionieren wie alle anderen Browser auch in Oculus Browser wie Websites, die in einem Tab ausgeführt werden. Wenn ein Nutzer eine Website besucht, hilft ihm der Oculus Browser dabei, die App zu finden, wenn sie im Oculus Store verfügbar ist – und zwar nur dann. Nutzer, die die App bereits installiert haben, können über Oculus Browser ganz einfach zur App wechseln, wenn sie möchten.

Oculus Browser lädt den Nutzer ein, die MyEmail App zu installieren.

Beispiele für PWAs auf der Oculus Quest 2

PWAs von Meta

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

Facebook Oculus Quest 2 App.

Instagram Oculus Quest 2 App

PWAs von anderen Entwicklern

Zum Zeitpunkt der Veröffentlichung dieses Artikels gibt es eine kleine, aber wachsende Anzahl von PWAs für 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 ihrem Posteingang in einem virtuellen Umgebungs-Hub direkt in der Spike-App verwenden.

Spike Oculus Quest 2 App.

Ein weiteres Beispiel ist Smartsheet, ein dynamischer Arbeitsbereich, der Projektmanagement, automatisierte Workflows und schnelles Erstellen neuer Lösungen ermöglicht.

Weitere PWAs wie Slack, Dropbox oder Canva werden in einem Video über Jacob Rossi vorgestellt, das 2021 auf der Facebook Connect-Konferenz veröffentlicht wurde.

PWAs für Oculus erstellen

Meta beschreibt die erforderlichen Schritte in der Dokumentation. Im Allgemeinen sollten PWAs, die in Chrome installiert werden können, in Oculus oft sofort einsatzbereit sein.

Anforderungen an Web App Manifest

Im Vergleich zu den Kriterien für die Installierbarkeit von Chrome und der Web-App-Manifest-Spezifikation gibt es einige wichtige Unterschiede. So unterstützt Oculus derzeit nur rechtsläufige Sprachen, während die Manifest-Spezifikation für Web-Apps keine solchen Einschränkungen erzwingt. Ein weiteres Beispiel ist start_url, das für Chrome zwingend erforderlich ist, damit eine App installierbar ist, auf Oculus jedoch optional ist. Oculus bietet ein Befehlszeilentool, mit dem Entwickler PWAs für Oculus Quest 2 erstellen können. Dadurch können die fehlenden Parameter im Web App Manifest übergeben oder die vorhandenen Parameter überschrieben werden.

Name Beschreibung
name (Erforderlich) Der Name der PWA. Derzeit unterstützt Oculus nur rechtsläufige Sprachen für den Namen.
display (Erforderlich) Entweder "standalone" oder "minimal-ui". Andere Werte werden von Oculus derzeit nicht unterstützt.
short_name (Erforderlich) Eine kürzere Version des App-Namens, falls erforderlich.
scope Optional: Die URL oder Pfade, die als Teil der App betrachtet werden sollen.
start_url Optional: Die URL, die beim Start der App angezeigt werden soll.

Oculus hat eine Reihe optionaler, proprietärer Web-App-Manifestfelder, mit denen sich die PWA-Nutzung anpassen lässt.

Name Beschreibung
ovr_package_name Optional: Legt den Paketnamen des APK fest, das für die PWA generiert wurde. Er muss in umgekehrter Schreibweise des Domainnamens erfolgen, z.B. "com.company.app.pwa". Wenn die Richtlinie nicht konfiguriert ist, müssen Entwickler dem Befehlszeilentool einen Paketnamen mit dem dann erforderlichen Parameter --package-name zur Verfügung stellen.
ovr_multi_tab_enabled Optional: Wenn true festgelegt ist, erhält die PWA über dieses boolesche Feld eine Tableiste ähnlich wie Oculus Browser. In PWAs mit mehreren Tabs werden interne Links, die auf einen neuen Tab (target="_new" oder target="_blank") ausgerichtet sind, im PWA-Fenster in neuen Tabs geöffnet. Das unterscheidet sich von PWAs mit einem Tab, bei denen solche Links in einem Oculus-Browserfenster geöffnet werden. Diese Funktion wird derzeit als Anwendungsmodus mit Tabs standardisiert.
ovr_scope_extensions Optional: Ermöglicht einer PWA, weitere Webseiten in die Webanwendung aufzunehmen. Sie besteht aus einem JSON-Wörterbuch mit Erweiterungs-URLs oder Platzhaltermustern. Diese Funktion wird derzeit als Bereichserweiterungen für Web-Apps standardisiert.

PWAs mit Bubblewrap-Befehlszeile verpacken

Bubblewrap ist eine Reihe von Open-Source-Bibliotheken und ein Befehlszeilentool für Node.js. Bubblewrap wird vom Google Chrome-Team entwickelt. Es soll Entwicklern dabei helfen, ein Android-Projekt zu generieren, zu erstellen und zu signieren, das Ihre PWA als vertrauenswürdige Webaktivität (Trusted Web Activity, TWA) startet.

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

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

Wenn Sie Node.js installiert haben, kann die Bubblewrap CLI mit dem folgenden Befehl installiert werden:

npm i -g @bubblewrap/cli

Wenn Bubblewrap zum ersten Mal ausgeführt wird, wird angeboten, die erforderlichen externen Abhängigkeiten – Java Development Kit (JDK) und Android SDK Build Tools – automatisch herunterzuladen und zu installieren.

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

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

Sobald das Projekt generiert wurde, erstellen und signieren Sie es mit dem folgenden Befehl:

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, im Google Play Store oder auf einer anderen Android-App-Vertriebsplattform veröffentlicht werden.

PWAs mit dem Oculus Platform-Dienstprogramm verpacken

Oculus Platform-Dienstprogramm ist das offizielle Befehlszeilentool, das von Meta zum Veröffentlichen von Apps für Oculus Rift- und Meta Quest-Geräte entwickelt wurde.

Außerdem lassen sich PWAs für Meta Quest-Geräte mit dem Befehl create-pwa verpacken und im Meta Quest Store und im App Lab veröffentlichen.

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

Verweisen Sie das Tool über den Parameter --web-manifest-url auf die Live-URL des Manifests der Web-App.

Wenn es kein Manifest für Ihre Live-PWA gibt oder Sie 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.

Wenn Sie das Manifest so rein wie möglich halten möchten, verwenden Sie den Parameter --package-name mit einem Wert in umgekehrter Domainnamen-Notation (z. B. com.company.app.pwa), anstatt dem Manifest das proprietäre Feld ovr_package_name 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 empfohlene Methode, um PWAs für Meta Quests zu verpacken.

PWABuilder ist ein von Microsoft entwickeltes Open-Source-Projekt, mit dem Entwickler ihre PWAs verpacken und signieren können, um sie in verschiedenen Stores wie Microsoft Store, Google Play Store, App Store und Meta Quest Store zu veröffentlichen.

Das Packen von PWAs mit PWABuilder ist so einfach, wie Sie die URL einer PWA eingeben, die Metadaten für die App eingeben bzw. bearbeiten und auf die Schaltfläche Generieren klicken.

Mit PWABuilder haben Entwickler die Wahl, mit welchem Tool sie PWAs für Meta Quest-Geräte verpacken möchten.

Du kannst die Option Meta Quest auswählen, um das Oculus Platform-Dienstprogramm zu verwenden.

PWABuilder-Paketoptionen

Du kannst die Option Android auswählen, um Bubblewrap zu verwenden, und dann das Kästchen Mit Meta Quest kompatibel anklicken.

PWAs mit PWABuilder verpacken und Bubblewrap erstellen

PWAs mit ADB installieren

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

adb install app-release-signed.apk

Wenn Sie die Bubblewrap-Befehlszeile zum Verpacken von PWAs verwenden, bietet sie einen praktischen Alias-Befehl zum Sideload der APK-Datei:

bubblewrap install

Per Sideload übertragene Apps werden in der App-Leiste im Bereich Unbekannte Quellen angezeigt.

App-Einreichung

Wie Sie PWAs hochladen und im Oculus Store einreichen, wird in der Oculus Developer Center-Dokumentation ausführlich beschrieben.

Entwickler können ihre Apps nicht nur an den Oculus Store senden, sondern sie auch über Plattformen wie SideQuest sicher und geschützt an Verbraucher vertreiben, ohne dass eine Genehmigung des Geschäfts erforderlich ist. Auf diese Weise können sie Endnutzern eine App direkt zur Verfügung stellen, auch wenn sie sich noch in der Entwicklung befindet, noch experimentell ist oder auf eine bestimmte Zielgruppe ausgerichtet ist.

Apps mit mehreren Tabs testen

Zum Testen von Apps mit mehreren Tabs habe ich eine kleine Test-PWA erstellt, die die verschiedenen Linkfunktionen zeigt: einen neuen In-PWA-Tab öffnen, auf dem aktuellen Tab bleiben, ein neues Browserfenster öffnen und in einer WebView bleiben und dabei auf dem aktuellen Tab bleiben. Erstellen Sie eine lokal installierbare Kopie dieser Anwendung, 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

Ich habe eine Oculus-Version meiner neuesten PWA SVGcode erstellt, um die Anleitung auszuprobieren. Du kannst die resultierende APK-Datei output.apk aus Google Drive herunterladen. Wenn Sie das Paket weiter untersuchen möchten, habe ich auch eine dekompilierte Version. Die Build-Anleitung finden Sie unter package.json.

Die App auf Oculus funktioniert problemlos, 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 ist hilfreich. Die einzige Funktion, die nicht funktioniert hat, ist das Zoomen mit 2 Fingern. Ich erwartete, dass es funktioniert, indem man die Trigger-Taste auf beiden Controllern drückt und die Controller dann in entgegengesetzte Richtungen bewegt. Abgesehen davon war alles andere leistungsstark und reaktionsschnell, wie Sie an dem eingebetteten Screencast sehen können.

Immersive 3D WebXR-PWAs

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

Fragen Sie sich vielleicht, wie verschiedene Aufforderungen (PWA-Installation, Berechtigungsanfragen, Benachrichtigungen) in VR verarbeitet werden (falls überhaupt)?

Hier ist ein Screencast von User-Agent-Prompts aus den WebXR-Tests der Immersive Web Working Group.

Wie Sie sehen, benötigt der Nutzer die Berechtigung zum Aufrufen des VR-Modus. Berechtigungen werden einmal pro Ursprung angefordert. Wenn Berechtigungen angefordert werden, wird der immersive Modus beendet. Benachrichtigungen werden derzeit nicht unterstützt.

Hand tracking

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

Hier ist ein Screencast von Hand Tracking Samples (Hand-Tracking-Beispiel) aus den WebXR Samples der Immersive Web Working Group.

Augmented Reality/Mixed Reality (Passthrough)

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

Sehen wir uns ein leicht abgewandeltes Startbeispiel für einen A-Frame mit verkleinerten Modellen sowie einem verborgenen Himmel und einer Ebene für Augmented Reality an.

A-Frame ist ein Open-Source-Web-Framework zum Erstellen von 3D-/VR-/AR-Erlebnissen, das vollständig aus deklarativen, wiederverwendbaren benutzerdefinierten HTML-Elementen besteht, die leicht zu lesen, zu verstehen sowie einfach zu kopieren und einzufügen sind.

Hier ist ein Screencast dieser Demo von Meta Quest 2.

Meta Quest 2 hat monochrome Kameras, sodass der Passthrough in Graustufen angezeigt wird, während Meta Quest Pro Farbkameras hat.

Ergebnisse

PWAs auf Oculus Quest 2 machen viel Spaß und sind sehr vielversprechend. Die endlose virtuelle Leinwand, mit der Nutzer ihren Bildschirm an die Anforderungen der aktuellen Aufgabe skalieren können, hat viel Potenzial, unsere Arbeitsweise in Zukunft zu verändern. Die VR-Eingabe mit Handtracking ist zwar noch in den Kinderschuhen und funktioniert, zumindest für mich, noch nicht sehr zuverlässig, aber es funktioniert gut zum Eingeben von URLs oder kurzen Texten.

Am meisten gefällt mir an PWAs in Oculus Quest 2, dass es sich um normale PWAs handelt, die unverändert auf einem Browsertab oder über einen schlanken APK-Wrapper ohne plattformspezifische APIs verwendet werden können. Nie war es einfacher, mit demselben Code mehrere Plattformen anzusteuern. Ein Beispiel zu PWAs in VR und AR im Web. Die Zukunft ist rosig!

Danksagungen

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