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.

Oculus Quest 2

Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. È il successore del precedente visore 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 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.

Dispositivo Oculus Quest 2 con controller.

Browser Oculus

Attualmente sono disponibili tre browser per Oculus Quest 2: Wolvic, il successore di Firefox Reality e il browser integrato Oculus. Questo articolo è incentrato su quest'ultimo. 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."

Browser Oculus con tre finestre del browser aperte.

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, la versione corrente 18.1.0.2.46.337441587 del browser Oculus è basata su Chrome95.0.4638.74, ovvero una sola versione dietro la versione stabile corrente di Chrome, ovvero96.0.4664.110. Se l'utente passa alla modalità mobile, VR diventa Mobile VR.

Pagina Informazioni del browser Oculus.

Interfaccia utente

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

  • Pulsante Indietro
  • Pulsante Ricarica
  • Informazioni sito
  • Barra degli URL
  • Pulsante Crea segnalibro
  • Pulsante per ridimensionare con opzioni strette, medie e larghe, nonché 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 descrivo l'esperienza 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 il browser Oculus e le PWA, consentendo agli utenti di passare facilmente da un servizio all'altro. Naturalmente, Accesso con Facebook è supportato immediatamente. Il browser Oculus include un gestore delle password che consente agli utenti di memorizzare e condividere le proprie password in modo sicuro tra il browser e le esperienze delle app installate.

Dimensioni delle finestre delle PWA

Le finestre del browser e le finestre delle PWA installate possono essere ridimensionate liberamente dall'utente. L'altezza può variare tra 625 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 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 maturerà.

Autorizzazioni in Oculus Browser.

Eseguire il 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 Eseguire il 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.

Ispezione di un'app in esecuzione su Oculus Quest 2 con Chrome DevTools.

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. Gli utenti che hanno già installato l'app potranno passare facilmente all'app se lo desiderano grazie a Oculus Browser.

Browser Oculus che invita l'utente a installare l'app MyEmail.

PWA esemplari su Oculus Quest 2

PWA di Meta

Diversi reparti 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.

App Facebook Oculus Quest 2.

App Instagram per Oculus Quest 2

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.

App Oculus Quest 2 con picchi.

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 del 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 con scrittura da sinistra verso 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 essere in notazione di nome di dominio inverso, 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. Questo è diverso 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 in fase di standardizzazione 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).

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 un'app 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.

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.

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

Se non hai un file manifest nella tua PWA pubblicata o vuoi sostituire il file 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ù 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

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 da utilizzare per il packaging delle PWA per i dispositivi Meta Quest.

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

Opzioni di packaging di PWABuilder.

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

Imballaggio delle PWA con PWABuilder utilizzando Bubblewrap.

Installazione di PWA con ADB

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 il packaging delle PWA, hai a disposizione un comodo comando alias per eseguire il sideload del file APK:

bubblewrap install

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

Invio di app

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

Oltre a inviare le app all'Oculus Store, gli sviluppatori possono anche distribuire le proprie 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.

Testare le app con più schede

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 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 di 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 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 immersive 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. Al momento le notifiche non sono 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 in occasione di 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.

Vediamo un esempio introduttivo di A-Frame leggermente modificato con modelli ridotti e cielo e aereo nascosti per la realtà aumentata.

A-Frame è un framework web open source per la creazione di esperienze 3D/VR/AR interamente costituite 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 molto 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.