PWA w Oculus Quest 2

Oculus Quest 2 to gogle do rzeczywistości wirtualnej (VR) stworzone przez Oculus, dział firmy Meta. Deweloperzy mogą teraz tworzyć i rozpowszechniać progresywne aplikacje internetowe (PWA) 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, dział firmy Meta. Jest to następca poprzednich gogli firmy, Oculus Quest. Urządzenie może działać zarówno jako samodzielne gogle z wewnętrznym systemem operacyjnym opartym na Androidzie, jak i z oprogramowaniem VR zgodnym z Oculus, działającym na komputerze stacjonarnym po połączeniu przez USB lub Wi-Fi. Wykorzystuje układ SOC Qualcomm Snapdragon XR2 z 6 GB pamięci RAM. Wyświetlacz gogli 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.

Oculus Browser,

Obecnie na urządzeniu Oculus Quest 2 dostępne są 3 przeglądarki: Wolvic, następca Firefox Reality, oraz wbudowana przeglądarka Oculus. W tym artykule skupimy się na tym drugim przypadku. Na stronie Oculusa przeglądarka Oculus Browser jest przedstawiona w ten sposób:

„Przeglądarka Oculus obsługuje najnowsze standardy internetowe i inne technologie, które pomagają tworzyć doświadczenia związane z VR w internecie. Dzisiejsze witryny 2D działają świetnie w przeglądarce Oculus, ponieważ jest ona oparta na silniku renderującym Chromium. Jest ona dodatkowo zoptymalizowana pod kątem gogli Oculus, aby zapewnić najlepszą wydajność i umożliwić programistom stron internetowych wykorzystanie pełnego potencjału VR dzięki nowym interfejsom API, takim jak WebXR. Dzięki WebXR otwieramy drzwi do kolejnego etapu rozwoju internetu”.

Przeglądarka Oculus z 3 otwartymi oknami.

Klient użytkownika

W momencie pisania tego artykułu ciąg znaków klienta użytkownika przeglądarki 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ć, bieżąca wersja 18.1.0.2.46.337441587 przeglądarki Oculus Browser jest oparta na Chrome 95.0.4638.74, czyli tylko o jedną wersję starszej niż bieżąca wersja stabilna Chrome, którą jest 96.0.4664.110. Jeśli użytkownik przełączy się na tryb mobilny, VR zmieni się na Mobile VR.

Strona Informacje w przeglądarce Oculus.

Interfejs użytkownika

Interfejs przeglądarki (pokazany 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ąskiego, średniego i szerokiego widoku oraz funkcją powiększenia
  • Przycisk „Otwórz witrynę mobilną”
  • Przycisk menu z tymi opcjami:
    • Włącz tryb prywatny
    • Zamknij wszystkie karty
    • Ustawienia
    • Zakładki
    • Pobrane
    • Historia
    • Wyczyść dane przeglądania

Dolny wiersz zawiera te funkcje:

  • Przycisk zamykania
  • Przycisk minimalizowania
  • 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 na pełnym ekranie przeglądarka Oculus optymalizuje częstotliwość odświeżania urządzenia na podstawie liczby klatek na sekundę filmu, np. 24 kl./s. Oculus Quest 2 ma współczynnik pikseli urządzenia wynoszący 1,5, co zapewnia wyraźny tekst.

Aplikacje PWA w przeglądarce Oculus i sklepie Oculus Store

28 października 2021 r. Jacob Rossi, Product Management Lead w firmie Meta (Oculus), poinformował, że PWA będą dostępne na urządzeniach Oculus Quest i Oculus Quest 2. Poniżej opisuję działanie PWA na Oculusie i wyjaśniam, jak utworzyć, zainstalować z nieoficjalnego źródła i przetestować PWA na Oculusie Quest 2.

Udostępnianie stanu

Stan logowania jest udostępniany między przeglądarką Oculus a aplikacjami PWA, co umożliwia użytkownikom płynne przełączanie 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 wrażeniami użytkownika aplikacji instalowanych.

Rozmiary okien PWA

Użytkownik może dowolnie zmieniać rozmiar okien przeglądarki i zainstalowanych aplikacji PWA. Wysokość może wynosić od 625 do 1200 pikseli. Szerokość można ustawić w zakresie od 400 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 rąk. Przewijanie działa za pomocą drążków na kontrolerach Oculus lub przez ściągnięcie kciuka i palca wskazującego i przesunięcie w żądanym kierunku. Aby coś wybrać, użytkownik może wskazać i ścisnąć palcami.

Uprawnienia aplikacji PWA

Uprawnienia w przeglądarce Oculus działają podobnie jak w Chrome. Stan jest udostępniany między aplikacjami działającymi w przeglądarce a zainstalowanymi aplikacjami PWA, dzięki czemu użytkownicy mogą przełączać się między tymi 2 środowiskami bez konieczności ponownego przyznawania tych samych uprawnień.

Chociaż wiele uprawnień jest zaimplementowanych, nie wszystkie funkcje są obsługiwane. Na przykład, mimo że prośba o dostęp do geolokalizacji zostanie zaakceptowana, urządzenie nigdy nie uzyska lokalizacji. Podobnie różne interfejsy API sprzętu, takie jak WebHID, Web Bluetooth itp., przechodzą wykrywanie funkcji, ale nie wyświetlają selektora, który pozwoliłby użytkownikowi sparować Oculusa z urządzeniem. Przypuszczam, że wykrywanie funkcji interfejsów API zostanie ulepszone, gdy przeglądarka będzie bardziej dojrzała.

Uprawnienia w przeglądarce Oculus.

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

Po włączeniu trybu programisty debugowanie aplikacji PWA 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.
  2. Uruchom Google Chrome na komputerze i wejdź na chrome://inspect/#devices.
  3. Znajdź urządzenie Oculus, po którym nastąpi zestaw kart przeglądarki Oculus aktualnie otwartych na urządzeniu.
  4. Kliknij Zbadaj na wybranej karcie przeglądarki Oculus.

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

Widoczność aplikacji

Użytkownicy mogą odkrywać PWA za pomocą przeglądarki lub Oculus Store. Podobnie jak w przypadku innych przeglądarek, zainstalowane aplikacje PWA działają również w przeglądarce Oculus jako witryny uruchomione na karcie. Gdy użytkownik odwiedzi witrynę, przeglądarka Oculus pomoże mu znaleźć aplikację, jeśli (i tylko wtedy, gdy) jest ona dostępna w sklepie Oculus Store. Użytkownikom, którzy mają już zainstalowaną aplikację, przeglądarka Oculus Browser ułatwi przełączenie się na nią, jeśli będą tego chcieli.

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

Przykładowe aplikacje PWA na Oculus Quest 2

PWA firmy Meta

Wiele działów Meta utworzyło aplikacje PWA na Oculus Quest 2, na przykład Instagram i Facebook. Te aplikacje PWA działają w samodzielnych 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 sklepie Oculus Store jest dostępna niewielka, ale rosnąca liczba aplikacji PWA na urządzenie Oculus Quest 2. Spike umożliwia użytkownikom korzystanie ze wszystkich niezbędnych narzędzi do pracy, takich jak poczta e-mail, czat, połączenia, notatki, zadania i listy zadań, ze skrzynki odbiorczej w wirtualnym centrum środowiska 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, automatyzację przepływów pracy i szybkie tworzenie nowych rozwiązań.

Wkrótce pojawi się więcej aplikacji PWA, takich jak Slack, Dropbox czy Canva, jak zapowiedziano w filmie z udziałem Jacoba Rossiego, który został opublikowany w ramach konferencji Facebook Connect w 2021 r.

Tworzenie PWA na Oculusa

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

Wymagania dotyczące pliku manifestu aplikacji internetowej

Istnieją pewne istotne różnice w porównaniu z kryteriami możliwości instalacji w Chrome i specyfikacją 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óry jest wymagany przez Chrome, aby aplikacja mogła zostać zainstalowana, ale na Oculusie jest opcjonalny. Oculus oferuje narzędzie wiersza poleceń, które umożliwia deweloperom tworzenie aplikacji PWA na urządzenie Oculus Quest 2. Dzięki temu mogą oni przekazywać brakujące parametry (lub zastępować istniejące) w pliku manifestu aplikacji internetowej.

Nazwa Opis
name (Wymagane) Nazwa PWA. Obecnie Oculus obsługuje tylko nazwy w językach zapisywanych od lewej do prawej.
display (Wymagane) "standalone" lub "minimal-ui". Oculus nie obsługuje obecnie żadnych innych wartości.
short_name (Wymagana) Krótsza wersja nazwy aplikacji, jeśli jest potrzebna.
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 zastrzeżonych pól pliku manifestu aplikacji internetowej, których można użyć do dostosowania działania PWA.

Nazwa Opis
ovr_package_name (Opcjonalnie) Ustawia nazwę pakietu pliku APK wygenerowanego dla aplikacji PWA. Musi być zapisany w odwrotnej notacji nazwy domeny, np. "com.company.app.pwa". Jeśli nie jest ustawiona, deweloperzy muszą podać nazwę pakietu w narzędziu wiersza poleceń z parametrem --package-name (który jest wtedy wymagany).
ovr_multi_tab_enabled (Opcjonalnie) Jeśli ma wartość true, to pole logiczne spowoduje, że aplikacja PWA będzie miała pasek kart podobny do przeglądarki Oculus. W przypadku wielokartowych aplikacji PWA linki wewnętrzne, które kierują do nowej karty (target="_new" lub target="_blank"), będą otwierane w nowych kartach w oknie aplikacji PWA. Różni się to od aplikacji PWA z jedną kartą, w których takie linki otwierają 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 symboli wieloznacznych. Ta funkcja jest obecnie standaryzowana jako rozszerzenia zakresu aplikacji internetowych.

Pakowanie aplikacji PWA za pomocą interfejsu wiersza poleceń Bubblewrap

Bubblewrap to zbiór źródeł 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 aplikacji na Androida uruchamiające aplikacje PWA jako zaufane aktywności internetowe (TWA).

Przeglądarka Meta Quest nie obsługuje obecnie w pełni TWA, ale od wersji 1.18.0 Bubblewrap obsługuje pakowanie 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 zainstalowane środowisko Node.js, możesz zainstalować interfejs wiersza poleceń Bubblewrap za pomocą tego polecenia:

npm i -g @bubblewrap/cli

Gdy uruchomisz Bubblewrap po raz pierwszy, pojawi się propozycja automatycznego pobrania i zainstalowania wymaganych zależności zewnętrznych – Java Development Kit (JDK) i Android SDK Build Tools.

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

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, Sklepie Google Play lub na dowolnej innej platformie rozpowszechniania aplikacji na Androida.

Pakowanie aplikacji PWA 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ż pakowanie aplikacji PWA na urządzenia Meta Quest za pomocą polecenia create-pwa i publikowanie ich w Meta Quest Store i App Lab.

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

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

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

Aby zachować jak najczystszy plik manifestu, użyj parametru --package-name z wartością w notacji odwrotnej nazwy domeny (np. 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ą PWABuilder

Zdaniem autorów korzystanie z narzędzia PWABuilder jest obecnie najprostszym i zalecanym sposobem pakowania aplikacji PWA na Meta Quest.

PWABuilder to projekt open source opracowany przez firmę Microsoft, który umożliwia deweloperom pakowanie i podpisywanie aplikacji PWA w celu publikowania ich w różnych sklepach z aplikacjami, takich jak Microsoft Store, Sklep Google Play, App Store i Meta Quest Store.

Pakowanie aplikacji PWA za pomocą PWABuildera jest bardzo proste – wystarczy wpisać adres URL aplikacji PWA, wpisać lub edytować jej metadane i kliknąć przycisk Generate (Generuj).

PWABuilder daje deweloperom możliwość wyboru narzędzia do pakowania aplikacji PWA na urządzenia Meta Quest.

Możesz wybrać opcję Meta Quest, aby użyć narzędzia Oculus Platform Utility.

Opcje pakowania PWABuilder.

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

Pakowanie PWA za pomocą PWABuilder i Bubblewrap.

Instalowanie aplikacji PWA za pomocą ADB

Po utworzeniu pliku APK możesz zainstalować go z nieoficjalnego źródła na urządzeniu Meta Quest, używając ADB przez USB lub Wi-Fi:

adb install app-release-signed.apk

Jeśli do pakowania aplikacji PWA używasz interfejsu wiersza poleceń Bubblewrap, możesz skorzystać z wygodnego polecenia aliasu, aby zainstalować plik APK z nieoficjalnego źródła:

bubblewrap install

Aplikacje zainstalowane z nieoficjalnych źródeł są widoczne w sekcji Nieznane źródła w panelu aplikacji.

Przesyłanie aplikacji

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

Oprócz przesyłania aplikacji do Oculus Store deweloperzy mogą też rozpowszechniać je bezpośrednio wśród konsumentów za pomocą platform takich jak SideQuest, bez konieczności uzyskiwania zgody sklepu. Dzięki temu mogą udostępniać aplikację bezpośrednio użytkownikom, nawet jeśli jest ona na wczesnym etapie rozwoju, ma charakter eksperymentalny lub jest skierowana do unikalnej 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: otwieranie nowej karty w aplikacji PWA, pozostawanie na bieżącej karcie, otwieranie nowego okna przeglądarki i otwieranie w komponencie WebView na bieżącej karcie. Utwórz kopię tej aplikacji, którą można zainstalować lokalnie, uruchamiając na 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 screencast aplikacji testowej.

Wersja SVGcode na Oculusa

Aby przetestować instrukcje, utworzyłem wersję Oculus mojej najnowszej PWA, SVGcode. Możesz pobrać wynikowy plik APK output.apk z mojego Dysku Google. Jeśli chcesz dokładniej zbadać pakiet, mam też wersję zdekompilowaną. Instrukcje kompilacji znajdziesz w pliku package.json.

Korzystanie z aplikacji na Oculusie działa prawidłowo, w tym możliwość otwierania i zapisywania plików. Przeglądarka Oculus nie obsługuje interfejsu File System Access API, ale podejście zastępcze pomaga. Jedyną rzeczą, która nie działała, było powiększanie przez rozciąganie. Oczekiwałem, że będzie to działać po naciśnięciu przycisku aktywacji na obu kontrolerach, a następnie poruszaniu kontrolerami w przeciwnych kierunkach. Poza tym wszystko działało wydajnie i płynnie, co widać na osadzonym nagraniu ekranu.

Progresywne aplikacje internetowe WebXR z realistycznym obrazem 3D

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

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

Oto screencast z testu promptów klienta użytkownika z testów WebXR grupy Immersive Web Working Group.

Jak widać, przejście do trybu 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 pojemnego. Powiadomienia nie są obecnie obsługiwane.

śledzenie rąk,

Dzięki interfejsowi WebXR Hand Input API i opartemu na AI systemowi śledzenia rąk firmy Meta możesz używać rąk do interakcji z aplikacjami PWA w trybie imersji.

Oto screencast z przykładowym śledzeniem rąk z przykładowych aplikacji WebXR grupy roboczej Immersive Web.

Rzeczywistość rozszerzona/mieszana (tryb Passthrough)

Zgodnie z zapowiedzią na Meta Connect 2022 przeglądarka Meta Quest dodała obsługę rzeczywistości rozszerzonej (AR) WebXR, znanej również jako rzeczywistość mieszana (MR), na urządzeniach Meta Quest 2 i Meta Quest Pro.

Przyjrzyjmy się nieco zmodyfikowanemu przykładu dla początkujących z A-Frame ze zmniejszonymi modelami oraz ukrytym niebem i płaszczyzną na potrzeby rzeczywistości rozszerzonej.

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

Oto screencast z tej wersji demonstracyjnej na Meta Quest 2.

Meta Quest 2 ma kamery monochromatyczne, więc tryb passthrough jest w odcieniach szarości, natomiast Meta Quest Pro ma kamery kolorowe.

Podsumowanie

PWA na Oculus Quest 2 są bardzo ciekawe i obiecujące. Nieskończone wirtualne płótno, które pozwala użytkownikom skalować ekran do rozmiaru, który najlepiej pasuje do bieżącego zadania, ma ogromny potencjał, aby zmienić sposób, w jaki będziemy pracować w przyszłości. Pisanie w VR za pomocą śledzenia rąk jest jeszcze w powijakach i przynajmniej u mnie nie działa zbyt niezawodnie, ale wystarcza do wpisywania adresów URL czy krótkich tekstów.

W PWA na 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 interfejsów API specyficznych dla platformy. Kierowanie na wiele platform za pomocą tego samego kodu nigdy nie było łatwiejsze. Oto PWA w VR i AR w internecie. Przyszłość jest jasna!

Podziękowania

Zdjęcie Oculus Quest 2: Maximilian Prandstätter, Flickr. Obrazy aplikacji Instagram, Facebook, Oculus Browser i Spike w Oculus Store oraz ilustracja odkrywania aplikacji i animacja śledzenia rąk dzięki uprzejmości firmy Meta. Ten post został sprawdzony przez Joe Medleya.