PWA di Oculus Quest 2

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

Thomas Steiner

Alexey Rodionov

Oculus Quest 2

Oculus Quest 2 adalah headset virtual reality (VR) yang dibuat oleh Oculus, sebuah divisi dari Meta. Headset ini adalah penerus headset perusahaan sebelumnya, Oculus Quest. Perangkat ini dapat 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. Perangkat ini menggunakan sistem di chip Qualcomm Snapdragon XR2 dengan RAM 6 GB. Layar Quest 2 adalah panel LCD fast-switch tunggal dengan resolusi 1.832 × 1.920 piksel per mata yang berjalan pada kecepatan refresh hingga 120 Hz.

Oculus Browser

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

"Oculus Browser memberikan dukungan untuk standar web terbaru dan teknologi lainnya untuk membantu Anda membuat pengalaman VR di web. Situs 2D saat ini berfungsi dengan baik di Oculus Browser karena didukung oleh mesin rendering Chromium. Browser ini dioptimalkan lebih lanjut 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 Anda lihat, versi 18.1.0.2.46.337441587 Oculus Browser saat ini didasarkan pada Chrome 95.0.4638.74, yang hanya tertinggal satu versi dari 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
  • Download
  • Histori
  • Hapus data penjelajahan

Baris bawah 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, Oculus Browser mengoptimalkan kecepatan refresh perangkat berdasarkan kecepatan frame video, misalnya, 24 fps. Oculus Quest 2 memiliki rasio piksel perangkat sebesar 1,5 untuk teks yang jelas.

PWA di Oculus Browser dan Oculus Store

Pada 28 Oktober 2021, Jacob Rossi, Product Management Lead di Meta (Oculus), menyampaikan bahwa PWA akan hadir di Oculus Quest dan Oculus Quest 2. Berikut ini, saya akan menjelaskan pengalaman PWA di Oculus dan menjelaskan cara membangun, melakukan sideload, dan menguji PWA Anda di Oculus Quest 2.

Berbagi status

Status login dibagikan antara Oculus Browser dan PWA, sehingga pengguna dapat beralih dengan lancar di antara keduanya. Tentu saja, Login dengan Facebook didukung secara langsung. Oculus Browser menyertakan pengelola sandi yang memungkinkan pengguna menyimpan dan membagikan sandi mereka dengan aman antara browser dan pengalaman aplikasi terinstal.

Ukuran jendela PWA

Jendela browser dan jendela PWA yang diinstal dapat diubah ukurannya secara bebas oleh pengguna. Tinggi dapat bervariasi antara 625 px dan 1.200 px. Lebar dapat ditetapkan antara 400 px dan 2.000 px. Dimensi defaultnya adalah 1.000 × 625 px.

Berinteraksi dengan PWA

PWA dapat dikontrol dengan pengontrol kiri dan kanan Oculus, mouse dan keyboard Bluetooth, serta melalui pelacakan gerak tangan. Men-scroll dapat dilakukan melalui thumb stick pada pengontrol Oculus, atau dengan mencubit ibu jari dan jari telunjuk, lalu menggerakkannya ke arah yang diinginkan. Untuk memilih sesuatu, pengguna dapat menunjuk dan mencubit.

Izin untuk PWA

Izin di Oculus Browser berfungsi hampir sama seperti di Chrome. Status ini 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 yang 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 lulus deteksi fitur, tetapi tidak benar-benar menampilkan alat pilih yang memungkinkan pengguna menyambungkan Oculus dengan perangkat hardware. Saya rasa deteksi fitur API akan disempurnakan setelah browser berkembang.

Men-debug PWA melalui Chrome DevTools

Setelah mengaktifkan Mode Developer, proses debug PWA di Oculus Quest 2 berfungsi persis seperti yang dijelaskan dalam Men-debug perangkat Android dari jarak jauh.

1. Di perangkat Oculus, buka situs yang diinginkan di Oculus Browser.
2. Luncurkan Google Chrome di komputer Anda 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 di tab browser Oculus yang diinginkan.

Penemuan aplikasi

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

Catatan: Saat ini, peristiwa BeforeInstallPrompt tidak akan diaktifkan di Oculus Browser, meskipun deteksi fitur melaporkannya sebagai didukung.

PWA yang patut dicontoh di Oculus Quest 2

PWA oleh 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

Saat tulisan ini dibuat, ada sejumlah kecil PWA yang terus bertambah untuk Oculus Quest 2 di Oculus Store. Spike memungkinkan pengguna menggunakan semua alat kerja penting seperti email, chat, panggilan, 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 yang cepat.

PWA lainnya seperti Slack, Dropbox, atau Canva akan segera hadir, seperti yang diungkapkan 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 biasanya akan langsung berfungsi di Oculus.

Persyaratan manifes aplikasi web

Ada beberapa perbedaan penting dibandingkan dengan kriteria 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 diwajibkan secara ketat oleh Chrome agar aplikasi dapat diinstal, tetapi bersifat opsional di Oculus. Oculus menawarkan alat command line yang memungkinkan developer membuat PWA untuk Oculus Quest 2, yang memungkinkan mereka meneruskan parameter yang tidak ada (atau mengganti parameter yang ada) di Manifes Aplikasi Web.

Nama	Deskripsi
name	(Wajib) Nama PWA. Saat ini, Oculus hanya mendukung bahasa yang dibaca dari kiri ke kanan untuk nama.
display	(Wajib) "standalone" atau "minimal-ui". Oculus saat ini tidak mendukung nilai lain.
short_name	(Wajib) Versi nama aplikasi yang lebih singkat, jika diperlukan.
scope	(Opsional) URL atau jalur yang harus dianggap sebagai bagian dari aplikasi.
start_url	(Opsional) URL yang akan ditampilkan saat peluncuran aplikasi.

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

Nama	Deskripsi
ovr_package_name	(Opsional) Menetapkan nama paket APK yang dibuat untuk PWA. ID ini harus dalam notasi nama domain terbalik, misalnya, "com.company.app.pwa". Jika tidak ditetapkan, developer harus memberikan nama paket ke alat command line dengan parameter --package-name (yang kemudian diperlukan).
ovr_multi_tab_enabled	(Opsional) Jika true, kolom boolean ini akan memberi PWA bilah tab yang mirip dengan Oculus Browser. Di PWA multi-tab, link internal yang menargetkan tab baru (target="_new" atau target="_blank") akan terbuka di tab baru dalam jendela PWA. Hal ini berbeda dengan PWA satu tab yang link-nya akan terbuka di jendela Oculus Browser. Fitur ini sedang distandardisasi sebagai Mode Aplikasi Bertab.
ovr_scope_extensions	(Opsional) Mengizinkan PWA menyertakan lebih banyak halaman web dalam cakupan aplikasi web. Kebijakan ini terdiri dari kamus JSON yang berisi URL ekstensi atau pola karakter pengganti. Fitur ini saat ini sedang distandardisasi sebagai Ekstensi Cakupan untuk Aplikasi Web.

Memaketkan 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.

Alat ini dapat membuat 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 dijalankan untuk pertama kalinya, Bubblewrap akan menawarkan untuk otomatis mendownload dan menginstal dependensi eksternal yang diperlukan—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, bangun 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.

Catatan: Tips pro: Anda juga dapat menggunakan flag --chromeosonly selain flag --metaquest untuk membuat file APK kompatibel tidak hanya dengan Meta Quest dan perangkat Android biasa, tetapi juga dengan perangkat ChromeOS.

Memaketkan 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.

Alat ini juga memungkinkan pengemasan 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 Anda tidak memiliki manifes di PWA aktif atau ingin mengganti manifes aktif, Anda masih dapat membuat APK untuk PWA menggunakan file manifes lokal dan parameter --manifest-content-file.

Agar manifes tetap murni, gunakan parameter --package-name dengan nilai dalam notasi nama domain terbalik (misalnya, com.company.app.pwa), daripada menambahkan kolom ovr_package_name eksklusif 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

Perhatian: File APK yang dihasilkan oleh Oculus Platform Utility hanya kompatibel dengan perangkat Meta Quest dan tidak dapat dijalankan di perangkat Android biasa. Selain itu, aplikasi tersebut hanya dapat dipublikasikan ke Meta Quest Store dan App Lab.

Mengemas PWA dengan PWABuilder

Menurut penulis, menggunakan PWABuilder adalah cara termudah dan direkomendasikan untuk memaketkan PWA untuk Meta Quest saat ini.

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

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

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

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

Catatan: Tips pro: PWABuilder menggunakan versi Oculus Platform Utility yang sedikit dimodifikasi yang menghasilkan file APK yang jauh lebih kecil dengan menghapus kode dan resource yang tidak digunakan.

Anda dapat memilih opsi Android untuk menggunakan Bubblewrap dan mencentang kotak Kompatibel dengan Meta Quest.

Catatan: Tips pro: karena PWABuilder sendiri adalah PWA yang berfungsi di mana pun ada browser, Anda dapat membukanya di Browser Meta Quest dan melakukan semua langkah langsung di Meta Quest.

Menginstal PWA dengan ADB

Poin penting: Untuk mengaktifkan Android Debug Bridge (ADB) di perangkat Meta Quest, Anda harus mengaktifkan mode developer di aplikasi seluler pendamping. Sebelum dapat mengaktifkan mode developer di perangkat, Anda harus menjadi anggota (atau telah membuat) organisasi developer di Oculus Developer Center.

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 Bubblewrap CLI untuk memaketkan PWA, alat ini menyediakan perintah alias yang praktis untuk melakukan sideload file APK:

bubblewrap install

Catatan: Tips pro: Anda dapat menggunakan Android Web Toolbox untuk melakukan sideload file APK. Ini adalah aplikasi web open source yang memungkinkan Anda mengakses semua fungsi ADB langsung dari browser, bahkan dari perangkat Android lain. Tidak perlu penginstalan atau driver berkat Web USB API.

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

Pengiriman aplikasi

Poin penting: Pengiriman dan pertimbangan untuk Oculus Store hanya tersedia jika Anda telah disetujui sebagai developer Meta Quest Store. Distribusi PWA melalui App Lab saat ini tidak tersedia. Tim Meta akan segera menyampaikan informasi selengkapnya tentang kapan dan cara Anda dapat mengirimkan PWA ke App Lab.

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

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

Menguji aplikasi multi-tab

Untuk menguji aplikasi multi-tab, saya membuat PWA pengujian kecil yang menunjukkan berbagai fitur link: yaitu membuka tab baru dalam PWA, tetap berada di tab saat ini, membuka jendela browser baru, dan membuka di WebView tetap berada di tab saat ini. Buat salinan aplikasi ini yang dapat diinstal secara lokal dengan menjalankan perintah di bawah 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 screencast aplikasi pengujian.

SVGcode versi Oculus

Untuk mencoba petunjuknya, 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.

Penggunaan aplikasi di Oculus berfungsi dengan baik, termasuk kemampuan untuk membuka dan menyimpan file. Oculus Browser tidak mendukung File System Access API, tetapi pendekatan penggantian dapat membantu. Satu-satunya hal yang tidak berfungsi adalah cubit untuk zoom. Saya berharap fitur ini berfungsi dengan menekan tombol pemicu di kedua pengontrol, lalu menggerakkan pengontrol ke arah yang berlawanan. Selain itu, semuanya berperforma baik dan responsif, seperti yang dapat Anda lihat dalam screencast yang disematkan.

PWA WebXR 3D yang Imersif

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

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

Berikut adalah screencast pengujian Dialog Agen Pengguna dari Pengujian WebXR Immersive Web Working Group.

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

Pelacakan gerak tangan

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

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

Augmented/mixed reality (Passthrough)

Seperti yang diumumkan di Meta Connect 2022, Meta Quest Browser 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 skalanya serta langit dan bidang yang disembunyikan untuk augmented reality.

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

Berikut screencast demo ini di Meta Quest 2.

Meta Quest 2 memiliki kamera monokrom, sehingga passthrough-nya dalam hitam putih, sedangkan Meta Quest Pro memiliki kamera berwarna.

Kesimpulan

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

Yang paling saya sukai dari PWA di Oculus Quest 2 adalah bahwa PWA tersebut 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 kini menjadi lebih mudah. Berikut adalah PWA dalam VR dan AR di web. Masa depan cerah!

Ucapan terima kasih

Foto Oculus Quest 2 oleh Maximilian Prandstätter di Flickr. Gambar Oculus Store untuk aplikasi Instagram, Facebook, Oculus Browser, dan Spike serta ilustrasi visibilitas aplikasi dan animasi pelacakan gerak tangan milik Meta. Postingan ini ditinjau oleh Joe Medley.