PWA w Oculus Quest 2

Oculus Quest 2 to gogle do wirtualnej rzeczywistości (VR) stworzone przez Oculus, oddział firmy Meta. Deweloperzy mogą teraz tworzyć i rozpowszechniać progresywne aplikacje internetowe (PWA) 2D i 3D, które korzystają z funkcji wielozadaniowości Oculus Quest 2.

Oculus Quest 2

Oculus Quest 2 to gogle do wirtualnej rzeczywistości (VR) stworzone przez Oculus, oddział firmy Meta. Jest to następca poprzedniego zestawu słuchawkowego firmy, Oculus Quest. Urządzenie może działać zarówno jako samodzielny zestaw słuchawkowy z wewnętrznym systemem operacyjnym opartym na Androidzie, jak i z oprogramowaniem VR zgodnym z Oculus działającym na komputerze stacjonarnym po podłączeniu przez USB lub Wi-Fi. Wykorzystuje ona system na chipie Qualcomm Snapdragon XR2 z 6 GB pamięci RAM. Wyświetlacz Quest 2 to pojedynczy panel LCD z szybkim przełączaniem o rozdzielczości 1832 × 1920 pikseli na oko i częstotliwości odświeżania do 120 Hz.

Urządzenie Oculus Quest 2 z kontrolerami.

Przeglądarka Oculus

Obecnie na Oculus Quest 2 dostępne są 3 przeglądarki: Wolvic, następca Firefox Reality, oraz wbudowana Oculus Browser. W tym artykule skupimy się na tym drugim. Na stronie internetowej Oculus przedstawiono przeglądarkę Oculus w ten sposób:

„Przeglądarka Oculus obsługuje najnowsze standardy internetowe i inne technologie, które pomagają tworzyć wirtualną rzeczywistość w internecie. Dzisiejsze strony internetowe 2D działają świetnie w przeglądarce Oculus, ponieważ korzysta ona z silnika renderującego Chromium. Jest on dodatkowo zoptymalizowany pod kątem gogli Oculus, aby zapewnić jak najlepszą wydajność i umożliwić deweloperom internetowym pełne wykorzystanie potencjału VR dzięki nowym interfejsom API, takim jak WebXR. Dzięki WebXR otwieramy drzwi do kolejnej granicy internetu”.

Oculus Browser z otwartymi 3 oknami przeglądarki.

Klient użytkownika

Ciąg znaków klienta użytkownika przeglądarki w momencie pisania tego artykułu wygląda tak:

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

Jak widać, obecna wersja 18.1.0.2.46.337441587 przeglądarki Oculus jest oparta na Chrome 95.0.4638.74, czyli jest tylko o 1 wersję starsza od obecnej stabilnej wersji Chrome, która ma numer 96.0.4664.110. Jeśli użytkownik przełączy się na tryb mobilny, ikona VR zmieni się na Mobile VR.

Strona Informacje o przeglądarce Oculus Browser.

Interfejs użytkownika

Interfejs przeglądarki (widoczny powyżej) ma te funkcje (górny wiersz od lewej do prawej):

  • Przycisk Wstecz
  • Przycisk Załaduj ponownie
  • Informacje o witrynie
  • Pasek adresu URL
  • Przycisk tworzenia zakładki
  • Przycisk zmiany rozmiaru z opcjami wąskim, średnim i szerokim oraz funkcją powiększania
  • Przycisk „Poproś o wersję mobilną witryny”
  • Przycisk menu z tymi opcjami:
    • Włączanie trybu prywatnego
    • Zamknij wszystkie karty
    • Ustawienia
    • Zakładki
    • Pobrane
    • Historia
    • Wyczyść dane przeglądania

Dolny wiersz zawiera te funkcje:

  • Przycisk zamykania
  • Przycisk minimalizacji
  • Przycisk z 3 kropkami z opcjami Wstecz, Dalej i Odśwież

Częstotliwość odświeżania i współczynnik pikseli urządzenia

W przypadku Oculus Quest 2 przeglądarka Oculus renderuje zarówno treści stron internetowych 2D, jak i WebXR z częstotliwością odświeżania 90 Hz. Podczas oglądania multimediów w trybie pełnoekranowym przeglądarka Oculus optymalizuje częstotliwość odświeżania urządzenia na podstawie liczby klatek na sekundę filmu, np. 24 klatki na sekundę. Oculus Quest 2 ma współczynnik pikseli urządzenia wynoszący 1,5, co zapewnia wyraźny tekst.

Progresywne aplikacje internetowe w przeglądarce Oculus Browser i sklepie Oculus Store

28 października 2021 r. Jacob Rossi, kierownik ds. zarządzania produktem w firmie Meta (Oculus), poinformował, że aplikacje PWA będą dostępne na urządzeniach Oculus Quest i Oculus Quest 2. Poniżej opisuję działanie PWA na urządzeniu Oculus i wyjaśniam, jak tworzyć, instalować i testować PWA na Oculus Quest 2.

Udostępnianie stanu

Stan logowania jest udostępniany między przeglądarką Oculus Browser a progresywnymi aplikacjami internetowymi, co pozwala użytkownikom płynnie przełączać się między nimi. Oczywiście logowanie przez Facebooka jest obsługiwane od razu. Przeglądarka Oculus zawiera menedżera haseł, który umożliwia użytkownikom bezpieczne przechowywanie i udostępnianie haseł między przeglądarką a zainstalowanymi aplikacjami.

Rozmiary okien PWA

Użytkownik może dowolnie zmieniać rozmiar okien przeglądarki i okien zainstalowanych aplikacji PWA. Wysokość może się wahać od 625 pikseli do 1200 pikseli. Szerokość może wynosić od 400 pikseli do 2000 pikseli. Domyślne wymiary to 1000 × 625 pikseli.

Interakcja z aplikacjami PWA

Aplikacjami PWA można sterować za pomocą lewego i prawego kontrolera Oculus, myszy i klawiatury Bluetooth oraz śledzenia dłoni. Przewijanie działa za pomocą drążków na kontrolerach Oculus lub przez ściśnięcie kciuka i palca wskazującego i przesunięcie w wybranym kierunku. Aby coś wybrać, użytkownik może wskazać i uszczypnąć.

Uprawnienia w przypadku PWA

Uprawnienia w Oculus Browser działają w zasadzie tak samo jak w Chrome. Stan jest udostępniany między aplikacjami działającymi w przeglądarce a zainstalowanymi progresywnymi aplikacjami internetowymi, dzięki czemu użytkownicy mogą przełączać się między tymi dwoma sposobami korzystania bez konieczności ponownego przyznawania tych samych uprawnień.

Wiele uprawnień jest zaimplementowanych, ale nie wszystkie funkcje są obsługiwane. Na przykład żądanie uprawnień do geolokalizacji może się powieść, ale urządzenie nigdy nie uzyska lokalizacji. Podobnie różne interfejsy API sprzętu, takie jak WebHID czy Web Bluetooth, przechodzą wykrywanie funkcji, ale nie wyświetlają selektora, który umożliwiałby użytkownikowi sparowanie urządzenia Oculus z urządzeniem sprzętowym. Zakładam, że wykrywalność funkcji interfejsów API zostanie dopracowana, gdy przeglądarka będzie bardziej zaawansowana.

Uprawnienia w przeglądarce Oculus Browser.

Debugowanie aplikacji PWA za pomocą Narzędzi deweloperskich w Chrome

Po włączeniu trybu deweloperskiego debugowanie progresywnych aplikacji internetowych na Oculus Quest 2 działa dokładnie tak, jak opisano w artykule Zdalne debugowanie urządzeń z Androidem.

  1. Na urządzeniu Oculus otwórz wybraną witrynę w przeglądarce Oculus Browser.
  2. Uruchom Google Chrome na komputerze i otwórz chrome://inspect/#devices.
  3. Znajdź urządzenie Oculus, a następnie zestaw kart przeglądarki Oculus, które są obecnie otwarte na urządzeniu.
  4. Kliknij Zbadaj na wybranej karcie przeglądarki Oculus.

Sprawdzanie aplikacji działającej na Oculusie Quest 2 za pomocą Narzędzi deweloperskich w Chrome.

Widoczność aplikacji

Użytkownicy mogą odkrywać PWA w samej przeglądarce lub w Oculus Store. Podobnie jak w przypadku innych przeglądarek, zainstalowane progresywne aplikacje internetowe działają w Oculus Browser jako strony internetowe uruchomione na karcie. Gdy użytkownik odwiedzi witrynę, przeglądarka Oculus Browser pomoże mu odkryć aplikację, jeśli (i tylko wtedy, gdy) jest ona dostępna w Oculus Store. Użytkownicy, którzy mają już zainstalowaną aplikację, mogą łatwo przełączyć się na nią w przeglądarce Oculus Browser.

Przeglądarka Oculus wyświetla prośbę o zainstalowanie aplikacji MyEmail.

Przykładowe progresywne aplikacje internetowe na Oculus Quest 2

Aplikacje PWA od Mety

Wiele działów firmy Meta utworzyło PWA na potrzeby Oculus Quest 2, np. InstagramFacebook. Te progresywne aplikacje internetowe działają w osobnych oknach aplikacji, które nie mają paska adresu URL i których rozmiar można dowolnie zmieniać.

Aplikacja Facebook Oculus Quest 2.

Aplikacja Instagram na Oculus Quest 2

PWA innych deweloperów

W momencie pisania tego artykułu w Oculus Store dostępna jest niewielka, ale rosnąca liczba aplikacji PWA na Oculus Quest 2. Spike umożliwia użytkownikom korzystanie ze wszystkich niezbędnych narzędzi do pracy, takich jak e-mail, czat, połączenia, notatki, zadania i listy rzeczy do zrobienia, bezpośrednio w aplikacji Spike.

Aplikacja Spike Oculus Quest 2.

Innym przykładem jest Smartsheet, dynamiczne miejsce pracy, które umożliwia zarządzanie projektami, automatyzowanie przepływów pracy i szybkie tworzenie nowych rozwiązań.

Więcej aplikacji PWA, takich jak Slack, Dropbox czy Canva, pojawi się w przyszłości, co zostało zapowiedziane w filmie z Jacobem Rossim, który został opublikowany w 2021 r. w ramach konferencji Facebook Connect.

Tworzenie aplikacji PWA na Oculus

Meta opisała wymagane kroki w swojej dokumentacji. Ogólnie rzecz biorąc, aplikacje PWA, które można zainstalować w Chrome, powinny często działać od razu na urządzeniach Oculus.

Wymagania dotyczące pliku manifestu aplikacji internetowej

Występują jednak pewne istotne różnice w porównaniu z kryteriami instalacji Chromespecyfikacją pliku manifestu aplikacji internetowej. Na przykład Oculus obsługuje obecnie tylko języki pisane od lewej do prawej, podczas gdy specyfikacja pliku manifestu aplikacji internetowej nie nakłada takich ograniczeń. Innym przykładem jest start_url, którego Chrome bezwzględnie wymaga, aby aplikacja była instalowalna, ale na Oculusie jest opcjonalny. Oculus udostępnia narzędzie wiersza poleceń, które umożliwia deweloperom tworzenie progresywnych aplikacji internetowych na Oculus Quest 2. Dzięki temu mogą oni przekazywać brakujące parametry w pliku manifestu aplikacji internetowej (lub zastępować istniejące).

Nazwa Opis
name (Wymagane) Nazwa progresywnej aplikacji internetowej. Obecnie Oculus obsługuje tylko języki zapisywane od lewej do prawej.
display (Wymagany) Może to być "standalone" lub "minimal-ui". Oculus nie obsługuje obecnie żadnych innych wartości.
short_name (Wymagane) Krótsza wersja nazwy aplikacji (w razie potrzeby).
scope (Opcjonalnie) Adres URL lub ścieżki, które powinny być traktowane jako część aplikacji.
start_url (Opcjonalnie) Adres URL, który ma się wyświetlać po uruchomieniu aplikacji.

Oculus ma kilka opcjonalnych własnych pól pliku manifestu aplikacji internetowej, które można wykorzystać do dostosowania działania PWA.

Nazwa Opis
ovr_package_name (Opcjonalnie) Ustawia nazwę pakietu APK wygenerowanego dla aplikacji PWA. Musi być zapisana w notacji odwróconej nazwy domeny, np. "com.company.app.pwa". Jeśli nie jest ustawiona, deweloperzy muszą podać nazwę pakietu w narzędziu wiersza poleceń za pomocą (wymaganego wówczas) parametru --package-name.
ovr_multi_tab_enabled (Opcjonalnie) Jeśli true, to pole logiczne spowoduje, że aplikacja PWA będzie miała pasek kart podobny do przeglądarki Oculus. W wielokartkowych aplikacjach PWA linki wewnętrzne, które kierują do nowej karty (target="_new" lub target="_blank"), będą się otwierać w nowych kartach w oknie aplikacji PWA. Różni się to od aplikacji PWA z jedną kartą, w których takie linki otwierałyby się w oknie przeglądarki Oculus. Ta funkcja jest obecnie standaryzowana jako tryb aplikacji z kartami.
ovr_scope_extensions (Opcjonalnie) Umożliwia aplikacji PWA uwzględnienie większej liczby stron internetowych w zakresie aplikacji internetowej. Składa się ze słownika JSON zawierającego adresy URL rozszerzeń lub wzorce z symbolami wieloznacznymi. Ta funkcja jest obecnie standaryzowana jako rozszerzenia zakresu dla aplikacji internetowych.

Pakowanie aplikacji PWA za pomocą interfejsu wiersza poleceń Bubblewrap

Bubblewrap to zestaw bibliotek open source i narzędzie wiersza poleceń (CLI) dla Node.js. Bubblewrap to narzędzie opracowane przez zespół Google Chrome, które pomaga deweloperom generować, tworzyć i podpisywać projekty na Androida uruchamiające PWA jako zaufaną aktywność w internecie (TWA).

Przeglądarka Meta Quest nie obsługuje obecnie w pełni TWA, ale od wersji 1.18.0 Bubblewrap obsługuje pakowanie aplikacji PWA na urządzenia Meta Quest.

Może generować uniwersalne pliki APK, które otwierają TWA na zwykłych urządzeniach z Androidem i przeglądarkę Meta Quest na urządzeniach Meta Quest.

Jeśli masz zainstalowany Node.js, możesz zainstalować wiersz poleceń Bubblewrap za pomocą tego polecenia:

npm i -g @bubblewrap/cli

Przy pierwszym uruchomieniu narzędzie Bubblewrap zaproponuje automatyczne pobranie i zainstalowanie wymaganych zależności zewnętrznych: pakietu Java Development Kit (JDK) i narzędzi do kompilacji pakietu Android SDK.

Aby wygenerować projekt na Androida zgodny z Meta Quest, który będzie opakowywać Twoją progresywną aplikację internetową, uruchom polecenie init z flagą --metaquest i postępuj zgodnie z instrukcjami kreatora:

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

Po wygenerowaniu projektu skompiluj go i podpisz, wykonując to polecenie:

bubblewrap build

Spowoduje to utworzenie pliku o nazwie app-release-signed.apk. Ten plik można zainstalować na urządzeniu lub opublikować w Meta Quest Store, Google Play Store lub na dowolnej innej platformie dystrybucji aplikacji na Androida.

Pakowanie progresywnych aplikacji internetowych za pomocą narzędzia Oculus Platform Utility

Oculus Platform Utility to oficjalne narzędzie wiersza poleceń opracowane przez firmę Meta do publikowania aplikacji na urządzenia Oculus Rift i Meta Quest.

Umożliwia też tworzenie pakietów PWA na urządzenia Meta Quest za pomocą polecenia create-pwa i publikowanie ich w Meta Quest Store oraz App Lab.

Ustaw nazwę pliku wyjściowego za pomocą parametru -o, a ścieżkę do pakietu Android SDK za pomocą parametru --android-sdk.

Skieruj narzędzie na adres URL pliku manifestu aplikacji internetowej za pomocą parametru --web-manifest-url.

Jeśli nie masz manifestu w aktywnej progresywnej aplikacji internetowej lub chcesz zastąpić aktywny manifest, możesz wygenerować plik APK dla progresywnej aplikacji internetowej za pomocą lokalnego pliku manifestu i parametru --manifest-content-file.

Aby plik manifestu był jak najprostszy, użyj parametru --package-name z wartością w notacji nazwy domeny odwróconej (np. com.company.app.pwa) zamiast dodawać do pliku manifestu pola ovr_package_name.

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

Pakowanie aplikacji PWA za pomocą PWABuilder

Zdaniem autorów PWABuilder to obecnie najprostszy i dlatego zalecany sposób pakowania aplikacji PWA na Meta Quest.

PWABuilder to projekt open source opracowany przez Microsoft, który umożliwia deweloperom pakowanie i podpisywanie progresywnych aplikacji internetowych w celu publikowania ich w różnych sklepach, w tym w Microsoft Store, Sklepie Google Play, App Store i Meta Quest Store.

Aby spakować aplikację PWA za pomocą PWABuilder, wystarczy wpisać adres URL aplikacji PWA, wprowadzić lub edytować metadane aplikacji i kliknąć przycisk Generate (Wygeneruj).

PWABuilder daje deweloperom możliwość wyboru narzędzia, które będzie używane do pakowania aplikacji PWA na urządzenia Meta Quest.

Aby użyć narzędzia Oculus Platform Utility, wybierz opcję Meta Quest.

Opcje pakowania PWABuilder.

Możesz wybrać opcję Android, aby użyć Bubblewrap, i zaznaczyć pole wyboru Zgodne z Meta Quest.

Pakowanie aplikacji PWA za pomocą PWABuilder przy użyciu Bubblewrap.

Instalowanie PWA za pomocą ADB

Po utworzeniu pliku APK możesz go wgrać na urządzenie Meta Quest za pomocą ADB przez USB lub Wi-Fi:

adb install app-release-signed.apk

Jeśli do pakowania aplikacji PWA używasz interfejsu wiersza poleceń Bubblewrap, udostępnia on wygodne polecenie aliasu do wczytywania pliku APK:

bubblewrap install

Aplikacje wgrane z zewnątrz są widoczne w sekcji Nieznane źródła w menu aplikacji.

Przesyłanie aplikacji

Przesyłanie i zgłaszanie aplikacji PWA do sklepu Oculus jest szczegółowo opisane w dokumentacji Centrum deweloperów Oculus.

Oprócz przesyłania aplikacji do Oculus Store deweloperzy mogą też rozpowszechniać je za pomocą platform takich jak SideQuest bezpośrednio do konsumentów w bezpieczny sposób, bez konieczności uzyskania zgody sklepu. Dzięki temu mogą udostępniać aplikację bezpośrednio użytkownikom, nawet jeśli jest ona w początkowej fazie rozwoju, eksperymentalna lub przeznaczona dla wyjątkowej grupy odbiorców.

Testowanie aplikacji z wieloma kartami

Aby przetestować aplikacje z wieloma kartami, utworzyłem małą testową aplikację PWA, która demonstruje różne funkcje linków, a mianowicie otwieranie nowej karty w aplikacji PWA, pozostawanie na bieżącej karcie, otwieranie nowego okna przeglądarki i otwieranie w komponencie WebView z pozostawaniem na bieżącej karcie. Utwórz kopię tej aplikacji, którą można zainstalować lokalnie, uruchamiając na swoim komputerze poniższe polecenia.

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

Oto nagranie ekranu z aplikacją testową.

wersja SVGcode na Oculusa,

Aby przetestować instrukcje, utworzyłem wersję mojej najnowszej aplikacji PWA, SVGcode, na Oculus. Wynikowy plik APK możesz pobraćoutput.apk z Mojego dysku Google. Jeśli chcesz dokładniej zbadać pakiet, mam też zdekompilowaną wersję. Instrukcje znajdziesz na stronie package.json.

Korzystanie z aplikacji na Oculusie działa prawidłowo, w tym otwieranie i zapisywanie plików. Przeglądarka Oculus Browser nie obsługuje interfejsu File System Access API, ale pomaga w tym metoda rezerwowa. Jedyną rzeczą, która nie działała, było powiększanie przez uszczypnięcie. Spodziewałem się, że będzie działać po naciśnięciu przycisku spustu na obu kontrolerach, a następnie przesunięciu ich w przeciwnych kierunkach. Poza tym wszystko działało sprawnie i szybko, co widać na załączonym nagraniu ekranu.

Wciągające aplikacje internetowe 3D WebXR

Obsługa PWA na Oculus Quest nie ogranicza się do płaskich aplikacji 2D. Deweloperzy mogą tworzyć wciągające środowiska 3D w wirtualnej rzeczywistości za pomocą interfejsu WebXR API.

Zastanawiam się, jak różne prompty (instalacja PWA, prośby o uprawnienia, powiadomienia) są obsługiwane w VR, jeśli w ogóle.

Oto nagranie ekranu testu promptów klienta użytkownikagrupy roboczej Immersive Web w ramach testów WebXR.

Jak widać, wejście w tryb VR wymaga zgody użytkownika. Prośba o uprawnienia jest wysyłana raz na źródło. Prośba o uprawnienia powoduje wyjście z trybu immersyjnego. Powiadomienia nie są obecnie obsługiwane.

Śledzenie rąk

Dzięki interfejsowi WebXR Hand Input APIopartemu na AI systemowi śledzenia rąk od Mety możesz używać rąk do interakcji z PWA w trybie immersyjnym.

Oto nagranie ekranu z przykładowym śledzeniem dłoniprzykładowych projektów WebXR grupy roboczej Immersive Web.

Rzeczywistość rozszerzona/mieszana (przezroczysta)

Jak ogłosiliśmy na konferencji Meta Connect 2022, przeglądarka Meta Quest obsługuje rzeczywistość rozszerzoną (AR) WebXR, znaną też jako rzeczywistość mieszana (MR), na urządzeniach Meta Quest 2 i Meta Quest Pro.

Sprawdźmy nieco zmodyfikowany przykład początkowy A-Frame ze zmniejszonymi modelami oraz ukrytym niebem i samolotem na potrzeby rzeczywistości rozszerzonej.

A-Frame to platforma internetowa typu open source do tworzenia środowisk 3D/VR/AR w całości z deklaratywnych, wielokrotnego użytku niestandardowych elementów HTML, które są łatwe do odczytania, zrozumienia i skopiowania.

Oto nagranie ekranu przedstawiające tę wersję demonstracyjną na urządzeniu Meta Quest 2.

Meta Quest 2 ma kamery monochromatyczne, więc obraz jest w skali szarości, a Meta Quest Pro ma kamery kolorowe.

Podsumowanie

Aplikacje PWA na Oculus Quest 2 są bardzo ciekawe i obiecujące. Nieograniczone wirtualne płótno, które pozwala użytkownikom skalować ekran do rozmiaru najlepiej dopasowanego do bieżącego zadania, ma duży potencjał, aby zmienić sposób, w jaki będziemy pracować w przyszłości. Pisanie w VR za pomocą śledzenia dłoni jest wciąż w powijakach i przynajmniej w moim przypadku nie działa jeszcze zbyt niezawodnie, ale wystarcza do wpisywania adresów URL lub krótkich tekstów.

Najbardziej podoba mi się w progresywnych aplikacjach internetowych na Oculus Quest 2 to, że są to zwykłe progresywne aplikacje internetowe, których można używać bez zmian na karcie przeglądarki lub za pomocą cienkiej otoczki APK bez żadnych interfejsów API specyficznych dla platformy. Kierowanie reklam na wiele platform za pomocą tego samego kodu nigdy nie było łatwiejsze. Więcej PWA w VR i AR w internecie Przyszłość jest jasna!

Podziękowania

Zdjęcie Oculus Quest 2 autorstwa Maximiliana Prandstättera w serwisie Flickr. Obrazy z Oculus Store przedstawiające aplikacje Instagram, Facebook, Oculus BrowserSpike, a także ilustracja odkrywania aplikacji i animacja śledzenia dłoni udostępnione przez firmę Meta. Baner powitalny autorstwa Arnau Marín i Puig. Ten post został sprawdzony przez Joe Medleya.