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.

Alexey Rodionov

Thomas Steiner

Oculus Quest 2

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

Browser Oculus

Attualmente sono disponibili tre browser per Oculus Quest 2: Wolvic, un successore di Firefox Reality, e il browser Oculus integrato. Questo articolo si concentra su questi ultimi. Il sito web di Oculus presenta il browser Oculus come segue.

"Oculus Browser supporta gli standard web più recenti e altre tecnologie per aiutarti a creare esperienze VR sul web. I siti web 2D di oggi funzionano alla grande in Oculus Browser perché è basato 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 realtà virtuale con nuove API, come WebXR. Con WebXR, stiamo aprendo le porte alla prossima frontiera del web."

User agent

La stringa user agent del browser al momento della stesura di questo articolo è 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, l'attuale versione 18.1.0.2.46.337441587 del browser Oculus è basata su Chrome 95.0.4638.74, ovvero una sola versione rispetto all'attuale versione stabile 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) offre le seguenti funzionalità (riga superiore da sinistra a destra):

• Pulsante Indietro
• Pulsante Ricarica
• Informazioni sito
• Barra degli URL
• Pulsante Crea segnalibro
• Pulsante Ridimensiona con opzioni stretta, media e larga e una funzionalità di zoom
• Pulsante Richiedi sito web mobile
• Pulsante del menu con le seguenti opzioni:
  • Attivare 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 opzioni Indietro, Avanti e Ricarica

Frequenza di aggiornamento e rapporto pixel del dispositivo

Per Oculus Quest 2, Oculus Browser esegue il rendering sia dei contenuti delle pagine web 2D sia di WebXR a 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 f/s. 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 comunicato che le PWA saranno presto disponibili su Oculus Quest e Oculus Quest 2. Di seguito descriviamo l'esperienza con le PWA su Oculus e spiegherò come creare, installare tramite sideload e testare la PWA in Oculus Quest 2.

Condivisione dello stato

Lo stato di accesso è condiviso tra il browser Oculus e le PWA, consentendo agli utenti di passare facilmente da un servizio all'altro. Naturalmente, Accesso con Facebook è supportato immediatamente. 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 delle app installate.

Dimensioni delle finestre PWA

Le finestre del browser e le finestre 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 e 2000 pixel. Le dimensioni predefinite sono 1000 x 625 px.

Interazione con le PWA

Le PWA possono essere controllate con i controller Oculus sinistro e destro, mouse e tastiere Bluetooth e tramite il rilevamento dei movimenti delle mani. Puoi scorrere utilizzando i tasti freccia sui controller Oculus oppure pizzicando il pollice e l'indice e muovendoti nella direzione desiderata. Per selezionare qualcosa, l'utente può fare clic e pizzicare.

Autorizzazioni per le PWA

Le autorizzazioni in Oculus Browser funzionano in modo molto simile a come funzionano in Chrome. Lo stato viene 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 di nuovo le stesse autorizzazioni.

Sebbene siano implementate molte autorizzazioni, non tutte le funzionalità sono supportate. Ad esempio, anche se la richiesta dell'autorizzazione di geolocalizzazione ha esito positivo, il dispositivo non ottiene 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 una volta maturato il browser.

Eseguire il debug delle PWA tramite Chrome DevTools

Dopo l'attivazione della modalità sviluppatore, il debug delle PWA su Oculus Quest 2 funziona esattamente come descritto in Debug remoto dei dispositivi Android.

1. Sul dispositivo Oculus, vai al sito desiderato in Oculus Browser.
2. Avvia Google Chrome sul computer e vai alla pagina chrome://inspect/#devices.
3. Trova il dispositivo Oculus in questione, seguito da una serie di schede del browser Oculus attualmente aperte sul dispositivo.
4. Fai clic su Esamina nella scheda del browser Oculus che ti interessa.

Rilevamento delle app

Gli utenti possono utilizzare il browser stesso o l'Oculus Store per scoprire le PWA. Come con qualsiasi altro browser, le PWA installate funzionano anche in Oculus Browser come siti web in esecuzione 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 nel browser Oculus, nonostante il rilevamento delle funzionalità lo segnali come supportato.

PWA esemplari in Oculus Quest 2

PWA di Meta

Diverse divisioni di meta hanno creato PWA per Oculus Quest 2, ad esempio 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, nell'Oculus Store è disponibile un numero ridotto, ma in crescita, di PWA per Oculus Quest 2. Spike consente agli utenti di provare tutti gli strumenti di lavoro essenziali come email, chat, chiamate, note, attività e promemoria dalla posta in arrivo in un hub di ambiente virtuale direttamente nell'app Spike.

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

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

Creare PWA per Oculus

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

Requisiti dei file manifest dell'app web

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

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

Oculus dispone di una serie di campi manifest dell'app web proprietari facoltativi 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 usare la notazione inversa del nome di dominio, ad esempio "com.company.app.pwa". Se non è impostato, gli sviluppatori devono fornire un nome del pacchetto allo strumento a riga di comando con il parametro --package-name (obbligatorio).
ovr_multi_tab_enabled	(Facoltativo) Se true, questo campo booleano assegnerà 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. Ciò differisce dalle PWA a scheda singola in cui questi link si aprono in una finestra del browser Oculus. Questa funzionalità è attualmente in fase di standardizzazione come Modalità applicazione a schede.
ovr_scope_extensions	(Facoltativo) Consente a una PWA di includere più pagine web nell'ambito dell'applicazione web. Consiste in un dizionario JSON contenente URL di estensioni o pattern generici. Questa funzionalità è attualmente standardizzata come Estensioni di ambito per le app web.

Imballaggio di PWA con l'interfaccia a riga di comando Bubblewrap

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

Attualmente il browser Meta Quest non supporta completamente TWA, ma a partire dalla versione 1.18.0, il riquadro Bubblewrap supporta la pacchettizzazione delle PWA per i dispositivi Meta Quest.

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

Supponendo che tu abbia installato Node.js, puoi installare Bubblewrap CLI con il seguente comando:

npm i -g @bubblewrap/cli

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

Per generare un progetto Android compatibile con Meta Quest che ingloba 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, compilalo e firmalo eseguendo:

bubblewrap build

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

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

Imballaggio 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 sul Meta Quest Store e su App Lab.

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

Punta lo strumento all'URL pubblicato del file manifest dell'app web tramite il parametro --web-manifest-url.

Se non hai un manifest per la PWA live o vuoi eseguire l'override del manifest pubblicato, puoi comunque generare un APK per la PWA utilizzando un file manifest locale e il parametro --manifest-content-file.

Per mantenere il manifest il più puro possibile, utilizza il parametro --package-name con un valore in notazione di nome di dominio inverso (ad esempio com.company.app.pwa), anziché aggiungere al manifest il campo proprietario 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

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

Imballaggio delle PWA con PWABuilder

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

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.

Il packaging delle PWA con PWABuilder è semplicissimo: basta inserire l'URL di una PWA, inserire/modificare i metadati dell'app e fare clic sul pulsante Genera.

PWABuilder offre agli sviluppatori la possibilità di scegliere lo strumento di cui utilizzare il codice sottostante per il packaging delle PWA per i dispositivi Meta Quest.

Puoi scegliere l'opzione Meta Quest per utilizzare Oculus Platform Utility.

Nota: suggerimento avanzato: PWABuilder utilizza una versione leggermente modificata di Oculus Platform Utility che genera file APK molto più piccoli rimuovendo il codice e le risorse inutilizzati.

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

Nota: suggerimento per professionisti: poiché PWABuilder è una PWA che funziona ovunque sia presente un browser, puoi aprirlo 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 tuo dispositivo, devi appartenere a (o aver creato) un'organizzazione sviluppatore in Oculus Developer Center.

Dopo aver creato il file APK, puoi eseguirlo 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 la pacchettizzazione delle PWA, ti verrà fornito un comodo comando alias per caricare il file APK tramite sideload:

bubblewrap install

Nota: suggerimento per professionisti: 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 Web USB.

Le app installate tramite sideload vengono visualizzate nella sezione Origini sconosciute del riquadro delle app.

Invio di app

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

Il caricamento e l'invio di PWA all'Oculus Store sono coperti in dettaglio nella documentazione del Centro sviluppatori Oculus.

Oltre a inviare app a Oculus Store, gli sviluppatori possono anche distribuire le loro app tramite piattaforme come SideQuest direttamente ai consumatori in modo sicuro e protetto, senza richiedere l'approvazione dello store. In questo modo possono far arrivare un'app direttamente agli utenti finali, anche se è in una fase iniziale di sviluppo, sperimentale o rivolta a un pubblico specifico.

Test delle app multischeda

Per testare le app con più schede, ho creato una piccola PWA di test che dimostra le varie funzionalità di collegamento: apertura di una nuova scheda all'interno della PWA, mantenimento della scheda corrente, apertura di una nuova finestra del browser e apertura in un WebView mantenendo la 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 prova.

Una versione di SVGcode per Oculus

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 compilazione 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 ha funzionato è lo zoom con due dita. Mi aspettavo che funzionasse premendo il pulsante di attivazione su entrambi i controller e muovendoli in direzioni opposte. A parte questo, tutto il resto ha funzionato bene e in modo 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 coinvolgenti per la realtà virtuale utilizzando l'API WebXR.

Ti stai chiedendo come vengono gestiti i vari prompt (installazione di PWA, richieste di autorizzazione, notifiche) in VR, se sono gestiti?

Ecco uno screencast del test delle richieste di user agent dei test WebXR del Gruppo di lavoro per il web immersivo.

Come puoi vedere, l'accesso alla modalità VR richiede l'autorizzazione dell'utente. Le autorizzazioni vengono richieste una volta per origine. La richiesta di autorizzazioni fa uscire dalla modalità immersiva. Le notifiche non sono attualmente supportate.

Rilevamento delle mani

Puoi usare 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'IA di Meta.

Ecco uno screencast di Hand Tracking Sample tra i Samples WebXR del gruppo di lavoro Immersive Web.

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.

Analizziamo un esempio iniziale A-Frame leggermente modificato con modelli sottoposti a scale down e cielo e piano nascosti per la realtà aumentata.

A-Frame è un framework web open source per la creazione di esperienze 3D/VR/AR completamente a partire da 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 alle esigenze dell'attività corrente ha un grande potenziale per cambiare il nostro modo di lavorare in futuro. Sebbene la digitazione in VR con il rilevamento delle mani sia ancora agli inizi e, almeno per me, non funzioni ancora in modo molto affidabile, funziona abbastanza bene per inserire URL o digitare testi brevi.

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

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à dell'app e animazione del monitoraggio delle mani courtesy of Meta. Immagine hero di Arnau Marín i Puig. Questo post è stato esaminato da Joe Medley.