PWA w Oculus Quest 2

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

Oculus Quest 2

Oculus Quest 2 to gogle do rzeczywistości wirtualnej (VR) stworzone przez Oculus, oddział firmy Meta. 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 z Androidem, jak i z oprogramowaniem VR obsługującym Oculus, uruchomionym na komputerze po podłączeniu przez USB lub Wi-Fi. Wykorzystuje system Qualcomm Snapdragon XR2 i układ czip z 6 GB pamięci RAM. Wyświetlacz Quest 2 to pojedynczy panel LCD z szybkim przełącznikiem i rozdzielczością 1832 × 1920 pikseli na oko. Działa z częstotliwością odświeżania do 120 Hz.

Urządzenie Oculus Quest 2 z kontrolerami.

Przeglądarka Oculus

Obecnie aplikacja Oculus Quest 2 jest dostępna w 3 przeglądarkach: Wolvic, następczyni Firefox Reality, oraz Oculus Browser. Ten artykuł koncentruje się na tej drugiej kwestii. W witrynie Oculus wprowadzamy przeglądarkę Oculus w następujący sposób.

„Oculus Browser zapewnia obsługę najnowszych standardów internetowych i innych technologii, aby pomóc Ci tworzyć treści VR w internecie. Dzisiejsze witryny 2D działają doskonale w przeglądarce Oculus, ponieważ korzysta ona z silnika renderowania Chromium. Jest on dodatkowo zoptymalizowany pod kątem gogli Oculus, co pozwala uzyskać najlepszą wydajność i pozwala programistom stron internetowych w pełni wykorzystać potencjał rzeczywistości wirtualnej dzięki nowym interfejsom API, takim jak WebXR. Dzięki WebXR otwieramy drzwi na kolejną granicę internetu”.

Przeglądarka Oculus z otwartymi oknami.

Klient użytkownika

Ciąg znaków klienta użytkownika przeglądarki w momencie jego zapisywania 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 przeglądarki Oculus (18.1.0.2.46.337441587) opiera się na Chrome 95.0.4638.74. Jest to o jedną wersję starszą niż stabilna wersja Chrome, czyli 96.0.4664.110. Jeśli użytkownik przełączy się w tryb mobilny, VR zmieni się na Mobile VR.

Strona Informacje o przeglądarce Oculus.

Interfejs użytkownika

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

  • Przycisk Wstecz
  • Przycisk Odśwież
  • Informacje o stronie
  • Pasek adresu URL
  • Przycisk tworzenia zakładki
  • Przycisk zmiany rozmiaru z opcjami wąskiego, średniego i szerokiego oraz powiększenia
  • Przycisk wysyłania prośby o dostęp do witryny mobilnej
  • Przycisk menu z tymi opcjami:
    • Włącz tryb prywatny
    • Zamknij wszystkie karty
    • Ustawienia
    • Zakładki
    • Pliki do pobrania
    • Historia
    • Wyczyść dane przeglądania

Dolny wiersz zawiera te funkcje:

  • Przycisk zamykania
  • Przycisk minimalizowania
  • Przycisk z 3 kropkami z opcjami przejścia wstecz, dalej i ponownego załadowania

Częstotliwość odświeżania i proporcje pikseli urządzenia

W przypadku Oculus Quest 2 przeglądarka Oculus renderuje zarówno treść stron internetowych w 2D, jak i WebXR z częstotliwością odświeżania 90 Hz. Podczas oglądania multimediów na pełnym ekranie przeglądarka Oculus Browser optymalizuje częstotliwość odświeżania urządzenia na podstawie liczby klatek w filmie (na przykład 24 kl./s). Współczynnik pikseli urządzenia Oculus Quest 2 wynosi 1,5, co oznacza ostry tekst.

PWA w przeglądarce Oculus i sklepie Oculus Store

28 października 2021 r. Jacob Rossi, dyrektor ds. zarządzania usługą w Meta (Oculus), poinformował, że aplikacje PWA będą wkrótce dostępne w Oculus Quest i Oculus Quest 2. Poniżej opiszę działanie PWA w Oculus i wyjaśnię, jak utworzyć i przetestować PWA w ramach kursu Oculus Quest 2.

Udostępnianie stanu

Stan logowania jest wspólny dla przeglądarki Oculus i aplikacji PWA, co pozwala użytkownikom płynnie przełączać się między nimi. Usługa Facebook Login jest oczywiście obsługiwana 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

Okna i okna zainstalowanych PWA przeglądarki mogą dowolnie zmieniać użytkownicy. Wysokość może wynosić od 625 do 1200 pikseli. Szerokość może wynosić od 400 do 2000 pikseli. Domyślne wymiary to 1000 × 625 pikseli.

Interakcja z PWA

PWA można sterować za pomocą lewego i prawego kontrolera Oculus, myszy i klawiatur Bluetooth oraz za pomocą śledzenia dłoni. Przewijanie odbywa się za pomocą gałków analogowych na kontrolerach Oculus lub przez ściąganie kciuka i palca wskazującego oraz poruszanie się w wybranym kierunku. Aby coś wybrać, użytkownik może wskazać palcem i ściągnąć palce.

Uprawnienia do aplikacji PWA

Uprawnienia w przeglądarce Oculus działają prawie tak samo jak w Chrome. Stan jest wspólny dla aplikacji działających w przeglądarce i zainstalowanych aplikacji PWA, dzięki czemu użytkownicy mogą przełączać się między tymi dwoma środowiskami bez ponownego przyznawania tych samych uprawnień.

Chociaż wdrożono wiele uprawnień, nie wszystkie funkcje są obsługiwane. Jeśli na przykład prośba o przyznanie uprawnień geolokalizacji zostanie zrealizowana, urządzenie nie otrzyma lokalizacji. Różne interfejsy API sprzętowe, takie jak WebHID, Web Bluetooth itp., przechodzą wykrywanie funkcji, ale nie wyświetlają selektora, który pozwoliłby użytkownikowi sparować Oculus z urządzeniem sprzętowym. Przypuszczam, że wykrywalność funkcji interfejsów API zostanie ulepszona w miarę rozwoju przeglądarki.

Uprawnienia w przeglądarce Oculus.

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

Po włączeniu trybu programisty debugowanie PWA w Oculus Quest 2 działa dokładnie zgodnie z opisem w sekcji Zdalne debugowanie urządzeń z Androidem.

  1. Na urządzeniu Oculus otwórz wybraną stronę w przeglądarce Oculus.
  2. Uruchom Google Chrome na komputerze i przejdź do chrome://inspect/#devices.
  3. Znajdź odpowiednie urządzenie Oculus. Za chwilę wyświetlą się otwarte na urządzeniu karty przeglądarki Oculus.
  4. Kliknij inspect na karcie przeglądarki Oculus.

Sprawdzanie aplikacji uruchomionej w Oculus Quest 2 w Chrome DevTools.

Odkrywanie aplikacji

Użytkownicy mogą odkrywać PWA bezpośrednio w przeglądarce lub w Oculus Store. Zainstalowane aplikacje PWA, podobnie jak inne przeglądarki, działają w przeglądarce Oculus jako witryny działające na karcie. Gdy użytkownik wejdzie na stronę, przeglądarka Oculus pomoże mu odkryć aplikację, o ile jest ona dostępna w sklepie Oculus Store (i tylko wtedy, gdy jest dostępna). Użytkownikom, którzy mają już zainstalowaną aplikację, przeglądarka Oculus ułatwi im przejście na nią.

Oculus Browser zaprasza użytkownika w prośbie o zainstalowanie aplikacji MyEmail.

Przykładowe aplikacje PWA w Oculus Quest 2

PWA firmy Meta

Wiele działów Meta utworzyło aplikacje PWA na potrzeby Oculus Quest 2, np. Instagram i Facebook. Działają one w samodzielnych oknach aplikacji bez paska adresu URL, którego rozmiar można dowolnie zmieniać.

Aplikacja Oculus Quest 2 Facebooka.

Aplikacja Oculus Quest 2 na Instagramie

PWA innych deweloperów

W momencie pisania tego tekstu w sklepie Oculus Store jest jeszcze niewielka liczba aplikacji PWA do Oculus Quest 2. Spike zapewnia użytkownikom dostęp do wszystkich niezbędnych narzędzi do pracy, takich jak e-maile, czat, połączenia, notatki, zadania i zadania do wykonania, z poziomu skrzynki odbiorczej, w centrum środowiska wirtualnego bezpośrednio w aplikacji Spike.

aplikacja Spike Oculus Quest 2.

Innym przykładem jest Smartsheet – dynamiczny obszar roboczy, który umożliwia zarządzanie projektami, automatyczne przepływy pracy i szybkie tworzenie nowych rozwiązań.

Wkrótce udostępnimy więcej aplikacji PWA, takich jak Slack, Dropbox czy Canva, o czym zapowiadamy w filmie z Jacobem Rossim opublikowanym w kontekście konferencji Facebook Connect w 2021 roku.

Tworzenie aplikacji PWA dla Oculus

Meta omówiła wymagane kroki w swojej dokumentacji. PWA, które można zainstalować w Chrome, zwykle powinny działać od razu w Oculus.

Wymagania dotyczące pliku manifestu aplikacji internetowej

Istnieją pewne ważne różnice w porównaniu z kryteriami instalowania w Chrome i specyfikacją pliku manifestu aplikacji internetowych. Na przykład Oculus obsługuje w tej chwili tylko języki pisane od lewej do prawej, podczas gdy specyfikacja pliku manifestu aplikacji internetowej nie wymusza takich ograniczeń. Innym przykładem jest start_url, który Chrome bezwzględnie wymaga możliwości zainstalowania aplikacji. W Oculusie jest to opcjonalne. Oculus udostępnia narzędzie wiersza poleceń, które umożliwia tworzenie aplikacji PWA dla Oculus Quest 2, co umożliwia przekazywanie brakujących (lub zastępowanie istniejących) parametrów w pliku manifestu aplikacji internetowych.

Nazwa Opis
name (Wymagane) Nazwa aplikacji PWA. Obecnie Oculus obsługuje tylko języki pisane od lewej do prawej.
display (Wymagane) "standalone" lub "minimal-ui". Oculus obecnie nie obsługuje żadnych innych wartości.
short_name (Wymagane) Krótsza wersja nazwy aplikacji, jeśli jest taka potrzeba.
scope (Opcjonalnie) Adres URL lub ścieżki, które powinny być uznane za część aplikacji.
start_url (Opcjonalnie) Adres URL wyświetlany podczas uruchamiania aplikacji.

Oculus zawiera wiele opcjonalnych zastrzeżonych pól pliku manifestu aplikacji internetowej, których można używać do dostosowywania PWA.

Nazwa Opis
ovr_package_name (Opcjonalnie) Określa nazwę pakietu APK wygenerowanego dla PWA. Musi to być odwrotny zapis nazwy domeny, np. "com.company.app.pwa". Jeśli zasada nie jest skonfigurowana, deweloperzy muszą podać nazwę pakietu narzędziu wiersza poleceń z (wówczas wymagany) parametrem --package-name.
ovr_multi_tab_enabled (Opcjonalnie) Jeśli ustawiona jest wartość true, to pole wartości logicznej spowoduje wyświetlenie PWA paska kart podobnego do przeglądarki Oculus. W aplikacjach PWA na wielu kartach linki wewnętrzne kierowane na nową kartę (target="_new" lub target="_blank") będą otwierać się w nowych kartach w oknie PWA. Różni się to od jednokartowych aplikacji PWA, w których takie linki otwierają okno przeglądarki Oculus. Ta funkcja jest obecnie ustandaryzowana jako Tryb aplikacji z kartami.
ovr_scope_extensions (Opcjonalnie) Zezwala PWA na dołączenie większej liczby stron internetowych z zakresu aplikacji internetowej. Zawiera słownik JSON zawierający adresy URL rozszerzeń lub wzorce z symboli wieloznacznych. Ta funkcja jest obecnie ustandaryzowane 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ń dla Node.js. Bubblewrap to aplikacja opracowana przez zespół Google Chrome, aby ułatwić programistom generowanie, tworzenie i podpisywanie projektów na Androida uruchamiających Twoją aplikację PWA jako zaufaną aktywność w internecie (TWA).

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

Umożliwia generowanie uniwersalnych plików APK, które otwierają TWA na zwykłych urządzeniach z Androidem oraz w przeglądarce Meta Quest na urządzeniach Meta Quest.

Zakładając, że masz zainstalowany Node.js, Bubblewrap CLI możesz zainstalować za pomocą tego polecenia:

npm i -g @bubblewrap/cli

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

Aby wygenerować projekt na Androida zgodny z Meta Quest, który pakuje Twoją PWA, 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 i podpisz go, uruchamiając polecenie:

bubblewrap build

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

Pakowanie aplikacji PWA za pomocą narzędzia Oculus Platform

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ż grupowanie aplikacji PWA dla urządzeń Meta Quest za pomocą polecenia create-pwa oraz publikowanie ich w sklepie Meta Quest Store i App Lab.

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

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

Jeśli nie masz pliku manifestu w aktywnej aplikacji PWA lub chcesz zastąpić nią aktywny plik manifestu, możesz wygenerować do niej pakiet APK, korzystając z lokalnego pliku manifestu i parametru --manifest-content-file.

Aby pozostawić plik manifestu jak najczystszy, użyj parametru --package-name z wartością w odwrotnej notacji nazwy domeny (na przykład com.company.app.pwa), zamiast dodawać do pliku manifestu zastrzeżone pole 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ą narzędzia PWABuilder

Korzystanie z PWABuilder jest obecnie najprostszym i dlatego zalecanym sposobem tworzenia pakietów PWA dla Meta Quest.

PWABuilder to opracowany przez firmę Microsoft projekt open source, który umożliwia programistom tworzenie i podpisywanie aplikacji PWA na potrzeby publikacji w różnych sklepach, w tym w Microsoft Store, Google Play Store, App Store i Meta Quest Store.

Pakowanie aplikacji PWABuilder jest proste – wystarczy wpisać adres URL takiej aplikacji, wpisać lub zmodyfikować jej metadane i kliknąć przycisk Wygeneruj.

PWABuilder daje programistom wybór narzędzia do tworzenia pakietów PWA na urządzenia Meta Quest.

Aby skorzystać z narzędzia platformy Oculus, możesz wybrać opcję Meta Quest.

Opcje pakietu PWABuilder.

Możesz wybrać opcję Android, aby użyć folii bąbelkowej, i zaznaczyć pole wyboru Zgodność z Meta Quest.

Pakowanie aplikacji PWA za pomocą narzędzia PWABuilder za pomocą Bubblewrap.

Instalowanie aplikacji PWA za pomocą ADB

Po utworzeniu pliku APK możesz wczytać go z innego urządzenia na urządzenie Meta Quest, korzystając z ADB przez USB lub Wi-Fi:

adb install app-release-signed.apk

Jeśli do tworzenia pakietów PWA używasz interfejsu wiersza poleceń Bubblewrap, udostępnia ono wygodne polecenie aliasów do wczytywania pliku APK z nieoficjalnych źródeł:

bubblewrap install

Aplikacje pobrane lokalnie są widoczne w sekcji Nieznane źródła w panelu aplikacji.

Przesłanie aplikacji

Przesyłanie i przesyłanie aplikacji PWA do sklepu Oculus Store zostało szczegółowo opisane w dokumentacji Oculus Developer Center.

Oprócz przesyłania aplikacji do Oculus Store deweloperzy mogą też rozpowszechniać je za pomocą platform takich jak SideQuest bezpośrednio wśród konsumentów bez konieczności uzyskania zgody sklepu. Dzięki temu mogą dostarczać aplikacje bezpośrednio użytkownikom, nawet jeśli są w fazie rozwoju, eksperymentalnie lub są przeznaczone dla unikalnych odbiorców.

Testowanie aplikacji wielokartowych

Aby przetestować aplikacje na wielu kartach, stworzyłam krótki testowy program PWA demonstrujący różne funkcje dotyczące linków: otwieranie nowej karty w aplikacji PWA, pozostawanie na bieżącej karcie, nowe okno przeglądarki i otwieranie w WebView w bieżącej karcie. Utwórz na komputerze kopię tej aplikacji, którą można zainstalować lokalnie, wykonując na komputerze podane niżej 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 screencast aplikacji testowej.

Wersja kodu SVG Code Oculus

Aby wykonać instrukcje, utworzyłam wersję Oculus mojej najnowszej aplikacji PWA SVGcode. Otrzymany plik APK output.apk możesz pobrać z mojego Dysku Google. Jeśli chcesz dokładniej przeanalizować pakiet, mam też wersję zdekompilowaną. Instrukcje kompilacji znajdziesz w zadaniu package.json.

Korzystanie z aplikacji na Oculusie działa, m.in. pozwala otwierać i zapisywać pliki. Przeglądarka Oculus nie obsługuje interfejsu File System Access API, ale pomocne jest metody zastępcze. Jedyne, co nie zadziałało, to powiększanie ściąganiem palców. Spodziewałem się, że zadziała po naciśnięciu przycisku aktywatora na obu kontrolerach, a potem ich przesuwania w przeciwnych kierunkach. Poza tym wszystko działało sprawnie i elastycznie, co widać w umieszczonym screencastu.

Niesamowite aplikacje PWA WebXR 3D

Obsługa PWA w Oculus Quest nie ogranicza się do płaskich aplikacji 2D. Za pomocą interfejsu WebXR API deweloperzy mogą tworzyć atrakcyjne treści 3D w rzeczywistości wirtualnej.

Zastanawiasz się, jak różne prośby (instalacja PWA, prośby o uprawnienia, powiadomienia) są obsługiwane w rzeczywistości wirtualnej?

Oto screencast pokazujący test promptów klienta użytkownika przygotowany przez firmę Immersive Web znajdującą się w grupie roboczej WebXR Tests.

Jak widać, włączenie trybu VR wymaga zgody użytkownika. O uprawnienia pojawia się jedno pytanie dotyczące każdego źródła. Prośba o uprawnienia powoduje wyjście z trybu pogłębionego. Powiadomienia nie są obecnie obsługiwane.

Śledzenie ręki

Dzięki interfejsowi WebXR Hand Hand metody API i opartemu na AI systemowi śledzenia ruchów dłoni firmy Meta możesz wchodzić w interakcje z aplikacjami PWA w trybie pojemnym, używając rąk.

Oto screencast raportu Hand Tracking Sample przygotowany przez zespół Immersive Web godziny pracy grupy WebXR Samples.

Rzeczywistość rozszerzona/mieszana (przekazywanie)

Zgodnie z zapowiedzią na konferencji Meta Connect w 2022 roku platforma Meta Quest Browserobsługuje urządzenia WebXR Augmented Reality (AR), znanych także jako mieszana rzeczywistość (MR) w serwisie Meta Quest Pro 2 i MR.

Zobaczmy nieco zmodyfikowany przykład startowy ramki A-Frame ze zmniejszonymi modelami oraz ukrytym niebem i samolotem w rzeczywistości rozszerzonej.

A-Frame to internetowa platforma open source do tworzenia obiektów 3D, VR/AR w całości wykorzystująca deklaratywne, wielokrotnego użytku niestandardowe elementy HTML, które łatwo odczytać i zrozumieć oraz skopiować i wkleić.

Oto screencast tego demo na temat Meta Quest 2.

Meta Quest 2 ma monochromatyczne kamery, więc przejście działa w skali szarości, a Meta Quest Pro – kolorowe.

Podsumowanie

PWA w Oculus Quest 2 to świetna zabawa i bardzo obiecujące. Nieskończona wirtualna przestrzeń, która pozwala użytkownikom dostosować rozmiar ekranu do bieżącego zadania, może zniechęcić użytkowników do tego, co będziemy robić w przyszłości. Choć pisanie w rzeczywistości wirtualnej z funkcją śledzenia dłoni to dopiero początek, przynajmniej u mnie nie działa ono zbyt stabilnie, ale świetnie sprawdza się przy wpisywaniu adresów URL lub pisaniu krótkich tekstów.

W Oculus Quest 2 najbardziej podoba mi się to, że są to zwykłe aplikacje PWA, których można używać bez zmian na karcie przeglądarki lub za pomocą cienkiego opakowania APK bez żadnych interfejsów API. Kierowanie reklam na wiele platform za pomocą jednego kodu nigdy nie było łatwiejsze. PWA w rzeczywistości wirtualnej i AR w internecie. Przyszłość jest wspaniała!

Podziękowania

Zdjęcie Oculus Quest 2: Maximilian Prandstätter we Flickr. Zdjęcia Oculus Store w aplikacjach Instagram, Facebook, Oculus Browser i Spike, a także ilustracje dotyczące wykrywalności aplikacji oraz śledzenie ruchów dłoni dzięki uprzejmości firmy Meta. Baner powitalny: Arnau Marín i Puig. Ten post został sprawdzony przez Joe Medley.