PWA su Oculus Quest 2

Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. Ora gli sviluppatori possono creare e distribuire app web progressive (PWA) 2D e 3D che sfruttano la funzionalità di multitasking di Oculus Quest 2.

Thomas Steiner

Alexey Rodionov

Oculus Quest 2

Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. È il successore del visore precedente dell'azienda, Oculus Quest. Il dispositivo è in grado di funzionare sia come visore autonomo con un sistema operativo interno basato su Android, sia con un software VR compatibile con Oculus in esecuzione su un computer desktop quando è connesso tramite USB o Wi-Fi. Utilizza il sistema su chip Qualcomm Snapdragon XR2 con 6 GB di RAM. Il display di Quest 2 è un singolo pannello LCD a commutazione rapida con una risoluzione di 1832 x 1920 pixel per occhio e una frequenza di aggiornamento fino a 120 Hz.

Oculus Browser

Al momento sono disponibili tre browser per Oculus Quest 2: Wolvic, un successore di Firefox Reality, e il browser Oculus integrato. Questo articolo si concentra su quest'ultimo. Il sito web di Oculus presenta Oculus Browser come segue.

"Oculus Browser fornisce supporto per gli standard web più recenti e altre tecnologie per aiutarti a creare esperienze VR sul web. I siti web 2D di oggi funzionano perfettamente in Oculus Browser perché sono basati sul motore di rendering Chromium. È ulteriormente ottimizzato per i visori Oculus per ottenere le migliori prestazioni e consentire agli sviluppatori web di sfruttare tutto il potenziale della VR con nuove API, come WebXR. Tramite WebXR, stiamo aprendo le porte alla prossima frontiera del web."

User agent

La stringa user agent del browser al momento della scrittura è la seguente.

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

Come puoi vedere, la versione attuale 18.1.0.2.46.337441587 di Oculus Browser è basata su Chrome 95.0.4638.74, che è solo una versione precedente alla versione stabile attuale di Chrome, ovvero 96.0.4664.110. Se l'utente passa alla modalità mobile, VR diventa Mobile VR.

Interfaccia utente

L'interfaccia utente del browser (mostrata sopra) ha le seguenti funzionalità (riga superiore da sinistra a destra):

• Pulsante Indietro
• Pulsante Ricarica
• Informazioni sito
• Barra degli URL
• Pulsante Crea preferito
• Pulsante di ridimensionamento con opzioni di larghezza ridotta, media e ampia, oltre a una funzionalità di zoom
• Pulsante Richiedi sito web mobile
• Pulsante del menu con le seguenti opzioni:
  • Attiva la modalità privata
  • Chiudi tutte le schede
  • Impostazioni
  • Preferiti
  • Download
  • Cronologia
  • Cancella dati di navigazione

La riga inferiore include le seguenti funzionalità:

• Pulsante Chiudi
• Pulsante Riduci a icona
• Pulsante con tre puntini con le opzioni Indietro, Avanti e Ricarica

Frequenza di aggiornamento e rapporto pixel del dispositivo

Per Oculus Quest 2, Oculus Browser esegue il rendering dei contenuti delle pagine web 2D e di WebXR con una frequenza di aggiornamento di 90 Hz. Quando guardi contenuti multimediali a schermo intero, Oculus Browser ottimizza la frequenza di aggiornamento del dispositivo in base alla frequenza fotogrammi del video, ad esempio 24 fps. Oculus Quest 2 ha un rapporto pixel del dispositivo di 1,5 per un testo nitido.

PWA in Oculus Browser e nell'Oculus Store

Il 28 ottobre 2021, Jacob Rossi, Product Management Lead di Meta (Oculus), ha condiviso che le PWA sarebbero state disponibili su Oculus Quest e Oculus Quest 2. Di seguito descrivo l'esperienza con le PWA su Oculus e spiego come creare, eseguire il sideload e testare la tua PWA su Oculus Quest 2.

Condivisione dello stato

Lo stato di accesso è condiviso tra Oculus Browser e le PWA, consentendo agli utenti di passare facilmente da un'app all'altra. Naturalmente, Facebook Login è supportato fin da subito. Oculus Browser include un gestore delle password che consente agli utenti di archiviare e condividere le proprie password in modo sicuro tra il browser e le esperienze con le app installate.

Dimensioni delle finestre delle PWA

Le finestre del browser e quelle delle PWA installate possono essere ridimensionate liberamente dall'utente. L'altezza può variare tra 625 px e 1200 px. La larghezza può essere impostata tra 400 px e 2000 px. Le dimensioni predefinite sono 1000 × 625 px.

Interazione con le PWA

Le PWA possono essere controllate con i controller Oculus sinistro e destro, con mouse e tastiere Bluetooth e tramite il tracciamento delle mani. Lo scorrimento avviene tramite le levette dei controller Oculus o pizzicando il pollice e l'indice e spostandoli nella direzione desiderata. Per selezionare un elemento, l'utente può puntare e pizzicare.

Autorizzazioni per le PWA

Le autorizzazioni in Oculus Browser funzionano in modo molto simile a quelle di Chrome. Lo stato è condiviso tra le app in esecuzione nel browser e le PWA installate, in modo che gli utenti possano passare da un'esperienza all'altra senza dover concedere nuovamente le stesse autorizzazioni.

Sebbene siano implementate molte autorizzazioni, non tutte le funzionalità sono supportate. Ad esempio, anche se la richiesta dell'autorizzazione di accesso alla geolocalizzazione va a buon fine, il dispositivo non riceve mai una posizione. Analogamente, le varie API hardware come WebHID, Web Bluetooth e così via superano tutte il rilevamento delle funzionalità, ma non mostrano un selettore che consenta all'utente di accoppiare Oculus con un dispositivo hardware. Suppongo che la rilevabilità delle funzionalità delle API verrà perfezionata man mano che il browser matura.

Debug delle PWA tramite Chrome DevTools

Dopo aver attivato la modalità sviluppatore, il debug delle PWA su Oculus Quest 2 funziona esattamente come descritto in Esegui il debug remoto dei dispositivi Android.

1. Sul dispositivo Oculus, vai al sito che ti interessa in Oculus Browser.
2. Avvia Google Chrome sul computer e vai all'indirizzo chrome://inspect/#devices.
3. Trova il dispositivo Oculus in questione, che sarà seguito da un insieme di schede del browser Oculus attualmente aperte sul dispositivo.
4. Fai clic su Ispeziona nella scheda del browser Oculus desiderata.

Rilevabilità delle app

Gli utenti possono utilizzare il browser stesso o l'Oculus Store per scoprire le PWA. Come per qualsiasi altro browser, le PWA installate funzionano anche in Oculus Browser come siti web eseguiti in una scheda. Quando un utente visita un sito, il browser Oculus lo aiuta a scoprire l'app se (e solo se) è disponibile nell'Oculus Store. Per gli utenti che hanno già installato l'app, Oculus Browser li aiuterà a passare facilmente all'app, se lo desiderano.

Nota: al momento l'evento BeforeInstallPrompt non viene attivato in Oculus Browser, nonostante il rilevamento delle funzionalità indichi che è supportato.

PWA esemplari su Oculus Quest 2

PWA di Meta

Ad esempio, diverse divisioni di Meta hanno creato PWA per Oculus Quest 2, come Instagram e Facebook. Queste PWA vengono eseguite in finestre di app autonome che non hanno una barra degli URL e che possono essere ridimensionate liberamente.

PWA di altri sviluppatori

Al momento della stesura di questo documento, sull'Oculus Store è presente un numero ridotto, ma in crescita, di PWA per Oculus Quest 2. Spike consente agli utenti di sperimentare tutti gli strumenti di lavoro essenziali, come email, chat, chiamate, note, attività e cose da fare, dalla loro posta in arrivo in un hub di ambiente virtuale direttamente nell'app Spike.

Un altro esempio è Smartsheet, uno spazio di lavoro dinamico che fornisce gestione dei progetti, flussi di lavoro automatizzati e creazione rapida di nuove soluzioni.

Sono in arrivo altre PWA come Slack, Dropbox o Canva, come anticipato in un video con Jacob Rossi pubblicato nel contesto della conferenza Connect di Facebook nel 2021.

Creazione di PWA per Oculus

Meta ha descritto i passaggi richiesti nella sua documentazione. In generale, le PWA installabili in Chrome dovrebbero spesso funzionare immediatamente su Oculus.

Requisiti del file manifest dell'app web

Esistono alcune differenze importanti rispetto ai criteri di installabilità di Chrome e alla specifica del manifest dell'app web. Ad esempio, al momento Oculus supporta solo le lingue da sinistra a destra, mentre la specifica del manifest dell'app web non impone questi vincoli. Un altro esempio è start_url, che Chrome richiede rigorosamente per l'installazione di un'app, ma che su Oculus è facoltativo. Oculus offre uno strumento a riga di comando che consente agli sviluppatori di creare PWA per Oculus Quest 2, in modo da passare i parametri mancanti (o eseguire l'override di quelli esistenti) nel manifest dell'app web.

Nome	Descrizione
name	(Obbligatorio) Il nome della PWA. Al momento Oculus supporta solo le lingue con scrittura da sinistra a destra per il nome.
display	(Obbligatorio) "standalone" o "minimal-ui". Oculus al momento non supporta altri valori.
short_name	(Obbligatorio) Una versione più breve del nome dell'app, se necessario.
scope	(Facoltativo) L'URL o i percorsi che devono essere considerati parte dell'app.
start_url	(Facoltativo) L'URL da mostrare all'avvio dell'app.

Oculus ha una serie di campi facoltativi del manifest dell'app web proprietari che possono essere utilizzati per personalizzare l'esperienza PWA.

Nome	Descrizione
ovr_package_name	(Facoltativo) Imposta il nome del pacchetto dell'APK generato per la PWA. Deve essere in notazione del nome di dominio inverso, ad esempio "com.company.app.pwa". Se non viene impostato, gli sviluppatori devono fornire un nome del pacchetto allo strumento a riga di comando con il parametro (quindi obbligatorio) --package-name.
ovr_multi_tab_enabled	(Facoltativo) Se true, questo campo booleano fornirà alla PWA una barra delle schede simile a quella di Oculus Browser. Nelle PWA con più schede, i link interni che hanno come target una nuova scheda (target="_new" o target="_blank") si apriranno in nuove schede all'interno della finestra della PWA. Questo comportamento è diverso da quello delle PWA a scheda singola, in cui questi link si aprono in una finestra di Oculus Browser. Questa funzionalità è attualmente in fase di standardizzazione come modalità applicazione con schede.
ovr_scope_extensions	(Facoltativo) Consente a una PWA di includere più pagine web nell'ambito dell'applicazione web. È costituito da un dizionario JSON contenente URL di estensioni o pattern con caratteri jolly. Questa funzionalità è attualmente in fase di standardizzazione come Scope Extensions for app web.

Pacchettizzazione delle PWA con l'interfaccia a riga di comando Bubblewrap

Bubblewrap è un insieme open source di librerie e uno strumento a riga di comando (CLI) per Node.js. Bubblewrap è sviluppato dal team di Google Chrome per aiutare gli sviluppatori a generare, creare e firmare un progetto Android che avvia la PWA come Attività web attendibile (TWA).

Al momento, il browser Meta Quest non supporta completamente le TWA, ma a partire dalla versione 1.18.0, Bubblewrap supporta il packaging delle PWA per i dispositivi Meta Quest.

Può generare file APK universali che aprono una TWA sui normali dispositivi Android e sul browser Meta Quest sui dispositivi Meta Quest.

Se hai installato Node.js, l'interfaccia a riga di comando di Bubblewrap può essere installata con il seguente comando:

npm i -g @bubblewrap/cli

Quando esegui Bubblewrap per la prima volta, ti verrà proposto di scaricare e installare automaticamente le dipendenze esterne richieste: Java Development Kit (JDK) e SDK Android Build Tools.

Per generare un progetto Android compatibile con Meta Quest che includa la tua PWA, esegui il comando init con il flag --metaquest e segui la procedura guidata:

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

Una volta generato il progetto, crealo e firmalo eseguendo:

bubblewrap build

Verrà generato un file denominato app-release-signed.apk. Questo file può essere installato sul dispositivo o pubblicato sul Meta Quest Store, sul Google Play Store o su qualsiasi altra piattaforma di distribuzione di app per Android.

Nota: consiglio da pro: puoi anche utilizzare il flag --chromeosonly oltre al flag --metaquest per rendere i file APK compatibili non solo con Meta Quest e i normali dispositivi Android, ma anche con i dispositivi ChromeOS.

Creazione di pacchetti di PWA con Oculus Platform Utility

Oculus Platform Utility è lo strumento a riga di comando ufficiale sviluppato da Meta per la pubblicazione di app per i dispositivi Oculus Rift e Meta Quest.

Consente inoltre di pacchettizzare le PWA per i dispositivi Meta Quest con il comando create-pwa e di pubblicarle su Meta Quest Store e App Lab.

Imposta il nome del file di output tramite il parametro -o e il percorso dell'SDK Android tramite il parametro --android-sdk.

Indica allo strumento l'URL pubblicato del file manifest dell'app web tramite il parametro --web-manifest-url.

Se non hai un manifest nella tua PWA pubblicata o vuoi sostituire il manifest pubblicato, puoi comunque generare un APK per la tua PWA utilizzando un file manifest locale e il parametro --manifest-content-file.

Per mantenere il manifest il più pulito possibile, utilizza il parametro --package-name con un valore nella notazione del nome di dominio inverso (ad esempio, com.company.app.pwa), anziché aggiungere il campo proprietario ovr_package_name al manifest.

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

Attenzione: i file APK generati da Oculus Platform Utility sono compatibili solo con i dispositivi Meta Quest e non possono essere eseguiti su dispositivi Android standard. Inoltre, possono essere pubblicate solo su Meta Quest Store e App Lab.

Pacchettizzazione delle PWA con PWABuilder

Secondo gli autori, l'utilizzo di PWABuilder è il modo più semplice e quindi consigliato per pacchettizzare le PWA per Meta Quest al momento.

PWABuilder è un progetto open source sviluppato da Microsoft, che consente agli sviluppatori di pacchettizzare e firmare le proprie PWA per la pubblicazione in vari store, tra cui Microsoft Store, Google Play Store, App Store e Meta Quest Store.

La pacchettizzazione delle PWA con PWABuilder è semplice: basta inserire l'URL di una PWA, inserire/modificare i metadati dell'app e fare clic sul pulsante Generate (Genera).

PWABuilder offre agli sviluppatori la possibilità di scegliere quale strumento utilizzare per il pacchettizzazione delle PWA per i dispositivi Meta Quest.

Puoi scegliere l'opzione Meta Quest per utilizzare l'utilità della piattaforma Oculus.

Nota: consiglio da pro: PWABuilder utilizza una versione leggermente modificata di Oculus Platform Utility che genera file APK molto più piccoli rimuovendo codice e risorse inutilizzati.

Puoi scegliere l'opzione Android per utilizzare Bubblewrap e selezionare la casella di controllo Compatibile con Meta Quest.

Nota: consiglio da pro: poiché PWABuilder è una PWA che funziona ovunque sia presente un browser, puoi aprirla nel browser Meta Quest ed eseguire tutti i passaggi direttamente su Meta Quest.

Installazione di PWA con ADB

Punto chiave: per attivare Android Debug Bridge (ADB) sul dispositivo Meta Quest, devi attivare la modalità sviluppatore nell'app mobile complementare. Prima di poter attivare la modalità sviluppatore sul dispositivo, devi appartenere a (o aver creato) un'organizzazione di sviluppatori nell'Oculus Developer Center.

Dopo aver creato il file APK, puoi caricarlo tramite sideload sul dispositivo Meta Quest utilizzando ADB tramite USB o Wi-Fi:

adb install app-release-signed.apk

Se utilizzi l'interfaccia a riga di comando Bubblewrap per pacchettizzare le PWA, questa fornisce un comodo comando alias per il sideload del file APK:

bubblewrap install

Nota: consiglio da pro: puoi utilizzare Android Web Toolbox per eseguire il sideload dei file APK. Si tratta di un'app web open source che ti consente di accedere a tutte le funzionalità di ADB direttamente dal browser, anche da un altro dispositivo Android. Non sono necessarie installazioni o driver grazie all'API WebUSB.

Le app trasferite localmente vengono visualizzate nella sezione Origini sconosciute del riquadro a scomparsa delle app.

Invio di app

Punto chiave: l'invio e la valutazione per l'Oculus Store sono disponibili solo se hai ricevuto l'approvazione come sviluppatore di Meta Quest Store. La distribuzione di PWA tramite App Lab non è al momento disponibile. Il team di Meta condividerà presto maggiori informazioni su quando e come inviare una PWA ad App Lab.

Il caricamento e l'invio di PWA all'Oculus Store sono descritti in dettaglio nella documentazione di Oculus Developer Center.

Oltre a inviare le app all'Oculus Store, gli sviluppatori possono anche distribuirle tramite piattaforme come SideQuest direttamente ai consumatori in modo sicuro e protetto, senza richiedere l'approvazione dello store. In questo modo, possono fornire un'app direttamente agli utenti finali, anche se è ancora in fase di sviluppo, è sperimentale o è destinata a un pubblico unico.

Test di app con più schede

Per testare le app con più schede, ho creato una piccola PWA di test che mostra le varie funzionalità dei link, ovvero l'apertura di una nuova scheda nella PWA, la permanenza nella scheda corrente, l'apertura di una nuova finestra del browser e l'apertura in una WebView rimanendo nella scheda corrente. Crea una copia installabile localmente di questa app eseguendo i comandi riportati di seguito sulla tua macchina.

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

Ecco uno screencast dell'app di test.

Una versione per Oculus di SVGcode

Per provare le istruzioni, ho creato una versione per Oculus della mia PWA più recente, SVGcode. Puoi scaricare il file APK risultante output.apk dal mio Google Drive. Se vuoi esaminare ulteriormente il pacchetto, ho anche una versione decompilata. Trova le istruzioni di build in package.json.

L'utilizzo dell'app su Oculus funziona correttamente, inclusa la possibilità di aprire e salvare i file. Il browser Oculus non supporta l'API File System Access, ma l'approccio di riserva è utile. L'unica cosa che non funzionava era lo zoom con pizzico. Mi aspettavo che funzionasse premendo il pulsante di attivazione su entrambi i controller e poi spostandoli in direzioni opposte. A parte questo, tutto il resto era efficiente e reattivo, come puoi vedere nello screencast incorporato.

PWA WebXR 3D immersive

Il supporto delle PWA su Oculus Quest non è limitato alle app 2D piatte. Gli sviluppatori possono creare esperienze 3D immersive per la VR utilizzando l'API WebXR.

Ti stai chiedendo come vengono gestiti i vari prompt (installazione di PWA, richieste di autorizzazione, notifiche) all'interno della VR, se non del tutto?

Ecco uno screencast del test dei prompt dello user agent dai test WebXR dell'Immersive Web Working Group.

Come puoi vedere, l'attivazione della modalità VR richiede l'autorizzazione dell'utente. Le autorizzazioni vengono richieste una volta per origine. La richiesta di autorizzazioni comporta l'uscita dalla modalità immersiva. Al momento le notifiche non sono supportate.

Tracciamento delle mani

Puoi utilizzare le mani per interagire con le PWA in modalità immersiva grazie all'API WebXR Hand Input e al sistema di tracciamento delle mani basato sull'AI di Meta.

Ecco uno screencast di Hand Tracking Sample da WebXR Samples dell'Immersive Web Working Group.

Realtà aumentata/mista (Passthrough)

Come annunciato a Meta Connect 2022, il browser Meta Quest ha aggiunto il supporto per la realtà aumentata (AR) WebXR, nota anche come realtà mista (MR), sui dispositivi Meta Quest 2 e Meta Quest Pro.

Diamo un'occhiata a un esempio iniziale di A-Frame leggermente modificato con modelli ridotti e cielo e piano nascosti per la realtà aumentata.

A-Frame è un framework web open source per la creazione di esperienze 3D/VR/AR interamente basate su elementi HTML personalizzati dichiarativi e riutilizzabili, facili da leggere, comprendere e copiare e incollare.

Ecco uno screencast di questa demo su Meta Quest 2.

Meta Quest 2 ha fotocamere monocromatiche, quindi il passthrough è in scala di grigi, mentre Meta Quest Pro ha fotocamere a colori.

Conclusioni

Le PWA su Oculus Quest 2 sono molto divertenti e promettenti. La tela virtuale infinita che consente agli utenti di ridimensionare lo schermo in base all'attività corrente ha un grande potenziale per cambiare il modo in cui lavoriamo in futuro. Sebbene la digitazione in VR con il tracciamento delle mani sia ancora agli inizi e, almeno per me, non funzioni ancora in modo molto affidabile, è sufficiente per inserire URL o digitare brevi testi.

La cosa che mi piace di più delle PWA su Oculus Quest 2 è che sono normali PWA che possono essere utilizzate senza modifiche in una scheda del browser o tramite un wrapper APK leggero senza API specifiche della piattaforma. Scegliere come target più piattaforme con lo stesso codice non è mai stato così facile. Ecco le PWA in VR e AR sul web. Il futuro è brillante!

Ringraziamenti

Foto di Oculus Quest 2 di Maximilian Prandstätter su Flickr. Immagini dell'Oculus Store delle app Instagram, Facebook, Oculus Browser e Spike, nonché illustrazione della visibilità delle app e animazione del tracciamento delle mani per gentile concessione di Meta. Questo post è stato rivisto da Joe Medley.