PWA di Oculus Quest 2

Oculus Quest 2 adalah headset virtual reality (VR) yang dibuat oleh Oculus, divisi Meta. Developer kini dapat membuat dan mendistribusikan Progressive Web App (PWA) 2D dan 3D yang memanfaatkan fitur multitasking Oculus Quest 2.

Misi Oculus 2

Oculus Quest 2 adalah headset virtual reality (VR) yang dibuat oleh Oculus, divisi Meta. Ini adalah penerus headset perusahaan sebelumnya, Oculus Quest. Perangkat ini mampu berjalan sebagai headset mandiri dengan sistem operasi internal berbasis Android, dan dengan software VR yang kompatibel dengan Oculus yang berjalan di komputer desktop saat terhubung melalui USB atau Wi-Fi. Smartwatch ini menggunakan sistem Qualcomm Snapdragon XR2 pada chip dengan RAM 6 GB. Layar Quest 2 adalah satu panel LCD switch cepat tunggal dengan resolusi 1.832 × 1.920 piksel per mata yang berjalan pada kecepatan refresh hingga 120 Hz.

Browser Oculus

Saat ini ada tiga browser yang tersedia untuk Oculus Quest 2: Wolvic, penerus Firefox Reality, dan Oculus Browser bawaan. Artikel ini berfokus pada yang terakhir. Situs Oculus memperkenalkan Browser Oculus sebagai berikut.

"Oculus Browser memberikan dukungan untuk standar web terbaru dan teknologi lainnya untuk membantu Anda menciptakan pengalaman VR di web. Situs 2D saat ini berfungsi dengan baik di Browser Oculus karena didukung oleh mesin rendering Chromium. Fitur ini lebih dioptimalkan untuk headset Oculus guna mendapatkan performa terbaik dan memungkinkan developer web memanfaatkan potensi penuh VR dengan API baru, seperti WebXR. Melalui WebXR, kami membuka pintu ke batas web berikutnya."

Agen pengguna

String agen pengguna browser pada saat penulisan adalah sebagai berikut.

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

Seperti yang dapat Anda lihat, versi 18.1.0.2.46.337441587 Browser Oculus saat ini didasarkan pada Chrome 95.0.4638.74, yang hanya satu versi di belakang versi stabil Chrome saat ini, yaitu 96.0.4664.110. Jika pengguna beralih ke mode seluler, VR akan berubah menjadi Mobile VR.

Antarmuka pengguna

Antarmuka pengguna browser (ditampilkan di atas) memiliki fitur berikut (baris atas dari kiri ke kanan):

• Tombol kembali
• Tombol muat ulang
• Informasi situs
• Kolom URL
• Tombol buat bookmark
• Tombol ubah ukuran dengan opsi sempit, sedang, dan lebar serta fitur zoom
• Tombol minta situs seluler
• Tombol menu dengan opsi berikut:
  • Masuk ke mode pribadi
  • Tutup semua tab
  • Setelan
  • Bookmark
  • Hasil download
  • Histori
  • Hapus data penjelajahan

Baris terbawah mencakup fitur berikut:

• Tombol tutup
• Tombol perkecil
• Tombol tiga titik dengan opsi kembali, maju, dan muat ulang

Kecepatan refresh dan rasio piksel perangkat

Untuk Oculus Quest 2, Oculus Browser merender konten halaman web 2D dan WebXR pada kecepatan refresh 90 Hz. Saat menonton media layar penuh, Browser Oculus akan mengoptimalkan kecepatan refresh perangkat berdasarkan kecepatan frame video, misalnya, 24 fps. Oculus Quest 2 memiliki rasio piksel perangkat 1,5 untuk teks yang tajam.

PWA di Oculus Browser dan Oculus Store

Pada 28 Oktober 2021, Jacob Rossi, Product Management Lead di Meta (Oculus), menjelaskan bahwa PWA akan hadir ke Oculus Quest dan Oculus Quest 2. Di bagian berikut, saya menjelaskan pengalaman PWA di Oculus dan cara mem-build, melakukan sideload, dan menguji PWA Anda di Oculus Quest 2.

Berbagi status

Status login digunakan bersama oleh Browser Oculus dan PWA, sehingga pengguna dapat beralih di antara keduanya dengan lancar. Tentunya, Login dengan Facebook sudah didukung secara bawaan. Browser Oculus dilengkapi pengelola sandi yang memungkinkan pengguna menyimpan dan membagikan sandi mereka dengan aman antara browser dan pengalaman aplikasi yang diinstal.

Ukuran jendela PWA

Jendela dan jendela browser dari PWA yang diinstal dapat diubah ukurannya secara bebas oleh pengguna. Tingginya dapat bervariasi antara 625 px dan 1.200 px. Lebarnya dapat disetel antara 400 px dan 2.000 px. Dimensi default adalah 1.000 × 625 piksel.

Berinteraksi dengan PWA

PWA dapat dikontrol dengan pengontrol kiri dan kanan Oculus, mouse dan keyboard Bluetooth, serta melalui pelacakan tangan. Scrolling dapat dilakukan melalui thumb stick di pengontrol Oculus, atau dengan menjepit ibu jari dan jari telunjuk, lalu bergerak ke arah yang diinginkan. Untuk memilih sesuatu, pengguna dapat menunjuk dan mencubit.

Izin untuk PWA

Izin di Browser Oculus berfungsi hampir sama seperti di Chrome. Status dibagikan antara aplikasi yang berjalan di browser dan PWA yang diinstal, sehingga pengguna dapat beralih di antara kedua pengalaman tersebut tanpa harus memberikan izin yang sama lagi.

Meskipun banyak izin diterapkan, tidak semua fitur didukung. Misalnya, meskipun permintaan izin geolokasi berhasil, perangkat tidak pernah benar-benar mendapatkan lokasi. Demikian pula, berbagai API hardware seperti WebHID, Web Bluetooth, dll. semuanya meneruskan deteksi fitur, tetapi tidak benar-benar menampilkan pemilih yang memungkinkan pengguna menyambungkan Oculus dengan perangkat hardware. Saya rasa kemampuan mendeteksi API akan ditingkatkan setelah browser matang.

Men-debug PWA melalui Chrome DevTools

Setelah mengaktifkan Mode Developer, proses debug PWA di Oculus Quest 2 akan berfungsi persis seperti yang dijelaskan di Perangkat Android debug jarak jauh.

1. Di perangkat Oculus, buka situs yang diinginkan di Browser Oculus.
2. Luncurkan Google Chrome di komputer dan buka chrome://inspect/#devices.
3. Temukan perangkat Oculus yang dimaksud, yang akan diikuti dengan serangkaian tab Browser Oculus yang saat ini terbuka di perangkat.
4. Klik inspect pada tab Browser Oculus yang diinginkan.

Penemuan aplikasi

Pengguna dapat menggunakan browser itu sendiri atau Oculus Store untuk menemukan PWA. Sama seperti browser lainnya, PWA yang diinstal juga berfungsi di Browser Oculus sebagai situs yang berjalan di tab. Saat pengguna mengunjungi situs, Browser Oculus akan membantu mereka menemukan aplikasi jika (dan hanya jika) aplikasi tersedia di Oculus Store. Bagi pengguna yang telah menginstal aplikasi, Oculus Browser akan membantu mereka beralih ke aplikasi dengan mudah jika diinginkan.

Contoh PWA di Oculus Quest 2

PWA dari Meta

Beberapa divisi Meta telah membuat PWA untuk Oculus Quest 2, misalnya Instagram dan Facebook. PWA ini berjalan di jendela aplikasi mandiri yang tidak memiliki kolom URL dan dapat diubah ukurannya secara bebas.

PWA oleh developer lain

Pada saat penulisan ini, ada sejumlah PWA yang kecil tetapi terus bertambah untuk Oculus Quest 2 di Oculus Store. Spike memungkinkan pengguna merasakan semua alat kerja yang penting seperti email, chat, panggilan telepon, catatan, tugas, dan daftar tugas dari kotak masuk mereka di hub lingkungan virtual, langsung di aplikasi Spike.

Contoh lainnya adalah Smartsheet, ruang kerja dinamis yang menyediakan pengelolaan project, alur kerja otomatis, dan pembuatan solusi baru dengan cepat.

PWA seperti Slack, Dropbox, atau Canva lainnya akan segera hadir, seperti yang dipromosikan dalam video yang menampilkan Jacob Rossi yang dirilis dalam konteks konferensi Connect Facebook pada tahun 2021.

Membuat PWA untuk Oculus

Meta menguraikan langkah-langkah yang diperlukan dalam dokumentasinya. Secara umum, PWA yang dapat diinstal di Chrome sering kali dapat langsung berfungsi di Oculus.

Persyaratan Manifes Aplikasi Web

Ada beberapa perbedaan penting dibandingkan dengan kriteria kemampuan penginstalan Chrome dan spesifikasi Manifes Aplikasi Web. Misalnya, Oculus saat ini hanya mendukung bahasa dari kiri ke kanan, sedangkan spesifikasi Manifes Aplikasi Web tidak menerapkan batasan tersebut. Contoh lainnya adalah start_url, yang sangat diperlukan Chrome agar aplikasi dapat diinstal, tetapi yang di Oculus bersifat opsional. Oculus menawarkan alat command line yang memungkinkan developer membuat PWA untuk Oculus Quest 2, yang memungkinkan mereka meneruskan parameter yang tidak ada (atau mengganti yang sudah ada) di Manifes Aplikasi Web.

Oculus memiliki sejumlah kolom Manifes Aplikasi Web kepemilikan opsional yang dapat digunakan untuk menyesuaikan pengalaman PWA.

Mengemas PWA dengan Bubblewrap CLI

Bubblewrap adalah kumpulan library open source dan alat command line (CLI) untuk Node.js. Bubblewrap dikembangkan oleh tim Google Chrome, untuk membantu developer membuat, membangun, dan menandatangani project Android yang meluncurkan PWA Anda sebagai Aktivitas Web Tepercaya (TWA).

Browser Meta Quest saat ini tidak sepenuhnya mendukung TWA, tetapi mulai versi 1.18.0, Bubblewrap mendukung pengemasan PWA untuk perangkat Meta Quest.

API ini dapat menghasilkan file APK universal yang membuka TWA di perangkat Android biasa dan Browser Meta Quest di perangkat Meta Quest.

Dengan asumsi Anda telah menginstal Node.js, Bubblewrap CLI dapat diinstal dengan perintah berikut:

npm i -g @bubblewrap/cli

Saat menjalankan Bubblewrap untuk pertama kalinya, Bubblewrap akan menawarkan untuk otomatis mendownload dan menginstal dependensi eksternal yang diperlukan, yaitu Java Development Kit (JDK) dan Android SDK Build Tools.

Untuk membuat project Android yang kompatibel dengan Meta Quest yang menggabungkan PWA Anda, jalankan perintah init dengan flag --metaquest dan ikuti wizard:

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

Setelah project dibuat, build dan tanda tangani dengan menjalankan:

bubblewrap build

Tindakan ini akan menghasilkan file bernama app-release-signed.apk. File ini dapat diinstal di perangkat atau dipublikasikan ke Meta Quest Store, Google Play Store, atau platform distribusi aplikasi Android lainnya.

Mengemas PWA dengan Oculus Platform Utility

Oculus Platform Utility adalah alat command line resmi yang dikembangkan oleh Meta untuk memublikasikan aplikasi untuk perangkat Oculus Rift dan Meta Quest.

Library ini juga memungkinkan PWA untuk perangkat Meta Quest dengan perintah create-pwa dan memublikasikannya ke Meta Quest Store dan App Lab.

Tetapkan nama file output melalui parameter -o dan jalur ke Android SDK melalui parameter --android-sdk.

Arahkan alat ke URL aktif manifes aplikasi web melalui parameter --web-manifest-url.

Jika tidak memiliki manifes di PWA live atau ingin mengganti manifes langsung, Anda masih dapat membuat APK untuk PWA menggunakan file manifes lokal dan parameter --manifest-content-file.

Untuk membiarkan manifes semurni mungkin, gunakan parameter --package-name dengan nilai dalam notasi nama domain terbalik (misalnya, com.company.app.pwa), bukan menambahkan kolom ovr_package_name kepemilikan ke manifes.

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

Mengemas PWA dengan PWABuilder

Menggunakan PWABuilder dalam tampilan penulis adalah cara termudah dan karenanya direkomendasikan untuk mengemas PWA untuk Meta Quest saat ini.

PWABuilder adalah project open source yang dikembangkan oleh Microsoft, yang memungkinkan developer mengemas dan menandatangani PWA mereka untuk dipublikasikan ke berbagai toko, termasuk Microsoft Store, Google Play Store, App Store, dan Meta Quest Store.

Mengemas PWA dengan PWABuilder semudah memasukkan URL PWA, memasukkan/mengedit metadata untuk aplikasi, dan mengklik tombol Buat.

PWABuilder memberi developer pilihan alat di balik layar yang akan digunakan untuk memaketkan PWA untuk perangkat Meta Quest.

Anda dapat memilih opsi Meta Quest untuk menggunakan Oculus Platform Utility.

Anda dapat memilih opsi Android untuk menggunakan Balon dan mencentang kotak Meta Quest yang kompatibel.

Menginstal PWA dengan ADB

Setelah membuat file APK, Anda dapat melakukan sideload ke perangkat Meta Quest menggunakan ADB melalui USB atau Wi-Fi:

adb install app-release-signed.apk

Jika Anda menggunakan CLI Bubblewrap untuk memaketkan PWA, Anda akan mendapatkan perintah alias yang mudah untuk melakukan sideload file APK:

bubblewrap install

Aplikasi yang di-sideload akan muncul di bagian Sumber Tidak Dikenal di panel daftar aplikasi.

Pengiriman aplikasi

Mengupload dan mengirimkan PWA ke Oculus Store dibahas secara mendetail dalam dokumen Oculus Developer Center.

Selain mengirimkan aplikasi ke Oculus Store, developer juga dapat mendistribusikan aplikasi mereka melalui platform seperti SideQuest langsung kepada konsumen secara aman dan terlindungi, tanpa memerlukan persetujuan toko. Hal ini memungkinkan mereka mengirimkan aplikasi langsung ke pengguna akhir, meskipun masih dalam tahap awal pengembangan, eksperimental, atau ditujukan untuk audiens unik.

Menguji aplikasi multi-tab

Untuk menguji aplikasi multi-tab, saya membuat sedikit PWA pengujian yang menunjukkan berbagai fitur link: yaitu membuka tab di-PWA baru, tetap menggunakan tab saat ini, membuka jendela browser baru, dan membuka di WebView agar tetap berada di tab saat ini. Buat salinan aplikasi ini yang dapat diinstal secara lokal dengan menjalankan perintah di bawah ini di komputer Anda.

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

Berikut adalah screencast aplikasi uji coba.

SVGcode versi Oculus

Untuk mempelajarinya, saya membuat versi Oculus dari PWA terbaru saya, SVGcode. Anda dapat mendownload file APK yang dihasilkan output.apk dari Google Drive saya. Jika Anda ingin menyelidiki paket lebih lanjut, saya juga memiliki versi yang didekompilasi. Temukan petunjuk build di package.json.

Anda dapat menggunakan aplikasi di Oculus, termasuk kemampuan untuk membuka dan menyimpan file. Browser Oculus tidak mendukung File System Access API, tetapi pendekatan penggantian membantu. Satu-satunya hal yang tidak berfungsi adalah cubit-zoom. Harapan saya adalah agar fitur ini berfungsi dengan menekan tombol pemicu di kedua pengontrol, lalu menggerakkan pengontrol ke arah yang berlawanan. Selain itu, fitur lainnya berperforma tinggi dan responsif, seperti yang dapat Anda lihat di screencast tersemat.

PWA WebXR 3D yang imersif

Dukungan PWA di Oculus Quest tidak terbatas pada aplikasi 2D datar. Developer dapat membuat pengalaman 3D yang imersif untuk VR menggunakan WebXR API.

Ingin tahu bagaimana berbagai perintah (penginstalan PWA, permintaan izin, notifikasi) ditangani dari dalam VR, apakah ada?

Berikut adalah screencast pengujian User Agent Prompts dari WebXR Tests Immersive Web Working Group.

Seperti yang terlihat, memasuki mode VR memerlukan izin pengguna. Izin diminta sekali per origin. Meminta izin akan keluar dari mode imersif. Notifikasi saat ini tidak didukung.

Pelacakan tangan

Anda dapat menggunakan tangan Anda untuk berinteraksi dengan PWA dalam mode imersif berkat WebXR Hand Input API dan sistem pelacakan tangan berbasis AI dari Meta.

Berikut adalah screencast Contoh Pelacakan Tangan dari WebXR Samples Immersive Web Working Group.

Augmented Reality/Mixed Reality (Passthrough)

Seperti yang diumumkan di Meta Connect 2022, Browser Meta Quest telah menambahkan dukungan untuk WebXR Augmented Reality (AR), yang juga dikenal sebagai Mixed Reality (MR), di perangkat Meta Quest 2 dan Meta Quest Pro.

Mari kita lihat contoh awal A-Frame yang sedikit dimodifikasi dengan model yang diperkecil serta langit dan bidang tersembunyi untuk augmented reality.

A-Frame adalah framework web open source untuk membangun pengalaman 3D/VR/AR yang sepenuhnya tidak menggunakan elemen HTML kustom deklaratif yang dapat digunakan kembali yang mudah dibaca, dipahami, serta mudah disalin dan ditempel.

Berikut screencast demo ini di Meta Quest 2.

Meta Quest 2 memiliki kamera monokrom, sehingga passthrough berwarna abu-abu, sedangkan Meta Quest Pro memiliki kamera warna.

Kesimpulan

PWA di Oculus Quest 2 sangat menyenangkan dan sangat menjanjikan. Kanvas virtual tak terbatas yang memungkinkan pengguna menskalakan layar mereka sesuai dengan tugas saat ini memiliki banyak potensi untuk mengubah cara kita bekerja di masa mendatang. Meskipun mengetik dalam VR dengan pelacakan tangan masih dalam tahap awal dan, setidaknya bagi saya, belum berfungsi dengan baik, fitur ini cukup baik untuk memasukkan URL atau mengetik teks pendek.

Yang paling saya sukai dari PWA di Oculus Quest 2 adalah PWA ini hanyalah PWA biasa yang dapat digunakan tanpa perubahan di tab browser atau melalui wrapper APK tipis tanpa API khusus platform. Menargetkan beberapa platform dengan kode yang sama tidak pernah semudah ini. Ini untuk PWA di VR dan AR di web. Masa depan cerah!

Ucapan terima kasih

Foto Oculus Quest 2 oleh Maximilian Prandstätter di Flickr. Gambar Oculus Store dari aplikasi Instagram, Facebook, Oculus Browser, dan Spike serta ilustrasi visibilitas aplikasi dan animasi pelacakan tangan dari Meta. Banner besar oleh Arnau Marín i Puig. Postingan ini ditinjau oleh Joe Medley.