PWA ใน Oculus Quest 2

Oculus Quest 2 เป็นอุปกรณ์สวมศีรษะ Virtual Reality (VR) ที่สร้างโดย Oculus ซึ่งเป็นแผนกหนึ่งของ Meta ตอนนี้นักพัฒนาแอปสามารถสร้างและเผยแพร่ Progressive Web App (PWA) แบบ 2 มิติและ 3 มิติที่ใช้ประโยชน์จากฟีเจอร์การทำงานหลายอย่างพร้อมกันของ Oculus Quest 2 ได้แล้ว

Thomas Steiner

Alexey Rodionov

Oculus Quest 2

Oculus Quest 2 เป็นอุปกรณ์สวมศีรษะเทคโนโลยีความจริงเสมือน (VR) ที่สร้างโดย Oculus ซึ่งเป็นแผนกหนึ่งของ Meta ซึ่งเป็นรุ่นต่อจากชุดหูฟังรุ่นก่อนหน้าของบริษัทอย่าง Oculus Quest อุปกรณ์นี้สามารถทำงานได้ทั้งในรูปแบบชุดหูฟังแบบสแตนด์อโลนที่มีระบบปฏิบัติการภายในที่ใช้ Android และซอฟต์แวร์ VR ที่เข้ากันได้กับ Oculus ซึ่งทำงานบนคอมพิวเตอร์เดสก์ท็อปเมื่อเชื่อมต่อผ่าน USB หรือ Wi-Fi โดยใช้ระบบวงจรรวมบนชิป Qualcomm Snapdragon XR2 พร้อม RAM ขนาด 6 GB จอแสดงผลของ Quest 2 เป็นแผง LCD แบบ Fast-Switch แผงเดียวที่มีความละเอียด 1,832 × 1,920 พิกเซลต่อตา 1 ข้าง ซึ่งทำงานที่อัตราการรีเฟรชสูงสุด 120 Hz

Oculus Browser

ปัจจุบันมีเบราว์เซอร์ 3 รายการที่พร้อมใช้งานสำหรับ Oculus Quest 2 ได้แก่ Wolvic ซึ่งเป็นเวอร์ชันต่อจาก Firefox Reality และ Oculus Browser ในตัว บทความนี้จะมุ่งเน้นไปที่อย่างหลัง เว็บไซต์ Oculus แนะนำเบราว์เซอร์ Oculus ดังนี้

"Oculus Browser รองรับมาตรฐานเว็บล่าสุดและเทคโนโลยีอื่นๆ เพื่อช่วยคุณสร้างประสบการณ์ VR บนเว็บ เว็บไซต์ 2 มิติในปัจจุบันทำงานได้ดีใน Oculus Browser เนื่องจากขับเคลื่อนโดยเครื่องมือแสดงผล Chromium นอกจากนี้ยังได้รับการเพิ่มประสิทธิภาพเพิ่มเติมสำหรับชุดหูฟัง Oculus เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด และช่วยให้นักพัฒนาเว็บใช้ประโยชน์จากศักยภาพของ VR ได้อย่างเต็มที่ด้วย API ใหม่ๆ เช่น WebXR เรากำลังเปิดประตูสู่พรมแดนใหม่ของเว็บผ่าน WebXR"

User Agent

สตริง User Agent ของเบราว์เซอร์ ณ เวลาที่เขียนมีดังนี้

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

ดังที่คุณเห็น เวอร์ชันปัจจุบัน 18.1.0.2.46.337441587 ของเบราว์เซอร์ Oculus อิงตาม Chrome 95.0.4638.74 ซึ่งเป็นเวอร์ชันที่เก่ากว่าเวอร์ชันเสถียรปัจจุบันของ Chrome เพียงเวอร์ชันเดียว ซึ่งก็คือ 96.0.4664.110 หากผู้ใช้เปลี่ยนเป็นโหมดอุปกรณ์เคลื่อนที่ VR จะเปลี่ยนเป็น Mobile VR

อินเทอร์เฟซผู้ใช้

อินเทอร์เฟซผู้ใช้ของเบราว์เซอร์ (แสดงด้านบน) มีฟีเจอร์ต่อไปนี้ (แถวบนสุดจากซ้ายไปขวา)

• ปุ่มย้อนกลับ
• ปุ่มโหลดซ้ำ
• ข้อมูลเว็บไซต์
• แถบ URL
• ปุ่มสร้างบุ๊กมาร์ก
• ปุ่มปรับขนาดที่มีตัวเลือกแคบ ปานกลาง และกว้าง รวมถึงฟีเจอร์ซูม
• ปุ่มขอเว็บไซต์เวอร์ชันมือถือ
• ปุ่มเมนูที่มีตัวเลือกต่อไปนี้
  • เข้าสู่โหมดส่วนตัว
  • ปิดแท็บทั้งหมด
  • การตั้งค่า
  • บุ๊กมาร์ก
  • ดาวน์โหลด
  • ประวัติ
  • ล้างข้อมูลการท่องเว็บ

แถวล่างมีฟีเจอร์ต่อไปนี้

• ปุ่มปิด
• ปุ่มย่อ
• ปุ่ม 3 จุดที่มีตัวเลือกย้อนกลับ ไปข้างหน้า และโหลดซ้ำ

อัตราการรีเฟรชและอัตราส่วนพิกเซลของอุปกรณ์

สำหรับ Oculus Quest 2 นั้น Oculus Browser จะแสดงผลทั้งเนื้อหาหน้าเว็บ 2 มิติและ WebXR ที่อัตราการรีเฟรช 90 Hz เมื่อรับชมสื่อแบบเต็มหน้าจอ Oculus Browser จะเพิ่มประสิทธิภาพอัตราการรีเฟรชของอุปกรณ์ตามอัตราเฟรมของวิดีโอ เช่น 24 FPS Oculus Quest 2 มีอัตราส่วนพิกเซลของอุปกรณ์อยู่ที่ 1.5 เพื่อให้ข้อความคมชัด

PWA ในเบราว์เซอร์ Oculus และ Oculus Store

เมื่อวันที่ 28 ตุลาคม 2021 Jacob Rossi หัวหน้าฝ่ายการจัดการผลิตภัณฑ์ของ Meta (Oculus) ได้แชร์ว่า PWA กำลังจะมาใน Oculus Quest และ Oculus Quest 2 ในส่วนต่อไปนี้ เราจะอธิบายประสบการณ์การใช้งาน PWA ใน Oculus และอธิบายวิธีสร้าง ไซด์โหลด และทดสอบ PWA ใน Oculus Quest 2

การแชร์สถานะ

ระบบจะแชร์สถานะการเข้าสู่ระบบระหว่าง Oculus Browser กับ PWA ซึ่งช่วยให้ผู้ใช้สลับไปมาระหว่างทั้ง 2 อย่างได้อย่างราบรื่น แน่นอนว่าระบบรองรับ Facebook Login ทันทีที่ติดตั้ง Oculus Browser มีเครื่องมือจัดการรหัสผ่านที่ช่วยให้ผู้ใช้จัดเก็บและแชร์รหัสผ่านได้อย่างปลอดภัยระหว่างเบราว์เซอร์และประสบการณ์การใช้งานแอปที่ติดตั้งไว้

ขนาดหน้าต่าง PWA

ผู้ใช้สามารถปรับขนาดหน้าต่างเบราว์เซอร์และหน้าต่างของ PWA ที่ติดตั้งได้อย่างอิสระ ความสูงอาจแตกต่างกันไปตั้งแต่ 625 พิกเซลถึง 1,200 พิกเซล คุณตั้งค่าความกว้างได้ระหว่าง 400 พิกเซลถึง 2,000 พิกเซล ขนาดเริ่มต้นคือ 1,000 × 625 พิกเซล

การโต้ตอบกับ PWA

คุณสามารถควบคุม PWA ได้ด้วยตัวควบคุม Oculus ด้านซ้ายและขวา เมาส์และแป้นพิมพ์บลูทูธ และผ่านการติดตามการเคลื่อนไหวของมือ การเลื่อนจะทำงานผ่านสติ๊กควบคุมบนคอนโทรลเลอร์ Oculus หรือโดยการบีบนิ้วโป้งและนิ้วชี้เข้าหากันแล้วเลื่อนไปในทิศทางที่ต้องการ หากต้องการเลือกบางอย่าง ผู้ใช้สามารถชี้และบีบนิ้วได้

สิทธิ์สำหรับ PWA

สิทธิ์ใน Oculus Browser ทำงานคล้ายกับใน Chrome มาก ระบบจะแชร์สถานะระหว่างแอปที่ทำงานในเบราว์เซอร์และ PWA ที่ติดตั้งไว้ เพื่อให้ผู้ใช้สลับไปมาระหว่างประสบการณ์การใช้งานทั้ง 2 แบบได้โดยไม่ต้องให้สิทธิ์เดิมอีกครั้ง

แม้ว่าจะมีการใช้สิทธิ์หลายรายการ แต่ระบบก็ไม่รองรับฟีเจอร์ทั้งหมด ตัวอย่างเช่น แม้ว่าการขอสิทธิ์เข้าถึงตำแหน่งทางภูมิศาสตร์จะสำเร็จ แต่อุปกรณ์ไม่เคยได้รับตำแหน่งจริง ในทำนองเดียวกัน API ฮาร์ดแวร์ต่างๆ เช่น WebHID, Web Bluetooth ฯลฯ ทั้งหมดจะผ่านการตรวจหาฟีเจอร์ แต่จะไม่แสดงเครื่องมือเลือกที่จะให้ผู้ใช้จับคู่ Oculus กับอุปกรณ์ฮาร์ดแวร์จริงๆ ฉันคิดว่าความสามารถในการตรวจจับฟีเจอร์ของ API จะได้รับการปรับปรุงเมื่อเบราว์เซอร์มีความสมบูรณ์มากขึ้น

การแก้ไขข้อบกพร่อง PWA ผ่านเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

หลังจากเปิดใช้โหมดนักพัฒนาซอฟต์แวร์ การแก้ไขข้อบกพร่อง PWA ใน Oculus Quest 2 จะทำงานตามที่อธิบายไว้ในแก้ไขข้อบกพร่องอุปกรณ์ Android ระยะไกล

1. ในอุปกรณ์ Oculus ให้เรียกดูเว็บไซต์ที่ต้องการในเบราว์เซอร์ Oculus
2. เปิด Google Chrome ในคอมพิวเตอร์ แล้วไปที่ chrome://inspect/#devices
3. ค้นหาอุปกรณ์ Oculus ที่ต้องการ ซึ่งจะตามด้วยชุดแท็บเบราว์เซอร์ Oculus ที่เปิดอยู่ในอุปกรณ์นั้น
4. คลิกตรวจสอบในแท็บ Oculus Browser ที่ต้องการ

การค้นพบแอป

ผู้ใช้สามารถใช้เบราว์เซอร์หรือ Oculus Store เพื่อค้นหา PWA ได้ PWA ที่ติดตั้งไว้จะทำงานใน Oculus Browser เป็นเว็บไซต์ที่ทำงานในแท็บเช่นเดียวกับเบราว์เซอร์อื่นๆ เมื่อผู้ใช้เข้าชมเว็บไซต์ เบราว์เซอร์ Oculus จะช่วยให้ผู้ใช้ค้นพบแอปหาก (และเฉพาะในกรณีที่) แอปนั้นพร้อมให้บริการใน Oculus Store สำหรับผู้ใช้ที่ติดตั้งแอปไว้แล้ว Oculus Browser จะช่วยให้ผู้ใช้เปลี่ยนไปใช้แอปได้อย่างง่ายดายหากต้องการ

หมายเหตุ: ปัจจุบันเหตุการณ์ BeforeInstallPrompt จะไม่เริ่มทำงานใน Oculus Browser แม้ว่าการตรวจหาฟีเจอร์จะรายงานว่ารองรับก็ตาม

PWA ตัวอย่างใน Oculus Quest 2

PWA โดย Meta

แผนกต่างๆ ของ Meta ได้สร้าง PWA สำหรับ Oculus Quest 2 เช่น Instagram และ Facebook PWA เหล่านี้จะทำงานในหน้าต่างแอปแบบสแตนด์อโลนที่ไม่มีแถบ URL และปรับขนาดได้อย่างอิสระ

PWA โดยนักพัฒนาแอปรายอื่นๆ

ในขณะที่เขียนบทความนี้ มี PWA จำนวนไม่มากแต่ก็เพิ่มขึ้นเรื่อยๆ สำหรับ Oculus Quest 2 ใน Oculus Store Spike ช่วยให้ผู้ใช้ได้สัมผัสประสบการณ์การใช้เครื่องมือที่จำเป็นทั้งหมดในการทำงาน เช่น อีเมล, แชท, การโทร, บันทึก, งาน และสิ่งที่ต้องทำจากกล่องจดหมายในฮับสภาพแวดล้อมเสมือนจริงในแอป Spike โดยตรง

อีกตัวอย่างหนึ่งคือ Smartsheet ซึ่งเป็นพื้นที่ทำงานแบบไดนามิกที่ให้บริการการจัดการโครงการ เวิร์กโฟลว์อัตโนมัติ และการสร้างโซลูชันใหม่ๆ อย่างรวดเร็ว

PWA อื่นๆ เช่น Slack, Dropbox หรือ Canva กำลังจะเปิดตัวตามที่ได้มีการพูดถึงในวิดีโอที่มี Jacob Rossi ซึ่งเผยแพร่ในบริบทของการประชุม Connect ของ Facebook ในปี 2021

การสร้าง PWA สำหรับ Oculus

Meta ได้ระบุขั้นตอนที่จำเป็นไว้ในเอกสารประกอบ โดยทั่วไปแล้ว PWA ที่ติดตั้งได้ใน Chrome มักจะทำงานบน Oculus ได้ทันที

ข้อกำหนดของไฟล์ Manifest ของเว็บแอป

มีความแตกต่างที่สำคัญบางประการเมื่อเทียบกับเกณฑ์ความสามารถในการติดตั้งของ Chrome และข้อกำหนดไฟล์ Manifest ของเว็บแอป ตัวอย่างเช่น ปัจจุบัน Oculus รองรับเฉพาะภาษาที่เขียนจากซ้ายไปขวาเท่านั้น ในขณะที่ข้อกำหนดไฟล์ Manifest ของเว็บแอปไม่ได้บังคับใช้ข้อจำกัดดังกล่าว อีกตัวอย่างหนึ่งคือ start_url ซึ่ง Chrome กำหนดไว้อย่างเคร่งครัดว่าแอปต้องติดตั้งได้ แต่ Oculus ไม่ได้บังคับ Oculus มีเครื่องมือบรรทัดคำสั่งที่ช่วยให้นักพัฒนาแอปสร้าง PWA สำหรับ Oculus Quest 2 ได้ ซึ่งช่วยให้นักพัฒนาแอปส่งพารามิเตอร์ที่ขาดหายไป (หรือลบล้างพารามิเตอร์ที่มีอยู่) ในไฟล์ Manifest ของเว็บแอปได้

ชื่อ	คำอธิบาย
name	(ต้องระบุ) ชื่อของ PWA ปัจจุบัน Oculus รองรับเฉพาะภาษาที่อ่านจากซ้ายไปขวาสำหรับชื่อ
display	(ต้องระบุ) "standalone" หรือ "minimal-ui" ปัจจุบัน Oculus ไม่รองรับค่าอื่นๆ
short_name	(จำเป็น) ชื่อแอปเวอร์ชันที่สั้นกว่า หากจำเป็น
scope	(ไม่บังคับ) URL หรือเส้นทางที่ควรพิจารณาว่าเป็นส่วนหนึ่งของแอป
start_url	(ไม่บังคับ) URL ที่จะแสดงเมื่อเปิดแอป

Oculus มีช่องไฟล์ Manifest ของเว็บแอปที่เป็นกรรมสิทธิ์ซึ่งไม่บังคับจำนวนหนึ่ง ซึ่งสามารถใช้เพื่อปรับแต่งประสบการณ์การใช้งาน PWA ได้

ชื่อ	คำอธิบาย
ovr_package_name	(ไม่บังคับ) ตั้งชื่อแพ็กเกจของ APK ที่สร้างขึ้นสำหรับ PWA โดยต้องอยู่ในรูปแบบสัญกรณ์ชื่อโดเมนแบบย้อนกลับ เช่น "com.company.app.pwa" หากไม่ได้ตั้งค่า นักพัฒนาแอปต้องระบุชื่อแพ็กเกจให้กับเครื่องมือบรรทัดคำสั่งด้วยพารามิเตอร์ --package-name (ซึ่งจำเป็น)
ovr_multi_tab_enabled	(ไม่บังคับ) หากเป็น true ช่องบูลีนนี้จะทำให้ PWA มีแถบแท็บที่คล้ายกับ Oculus Browser ใน PWA แบบหลายแท็บ ลิงก์ภายในที่กำหนดเป้าหมายเป็นแท็บใหม่ (target="_new" หรือ target="_blank") จะเปิดในแท็บใหม่ภายในหน้าต่าง PWA ซึ่งแตกต่างจาก PWA แบบแท็บเดียวที่ลิงก์ดังกล่าวจะเปิดในหน้าต่าง Oculus Browser ปัจจุบันฟีเจอร์นี้ได้รับการกำหนดมาตรฐานเป็นโหมดแอปพลิเคชันแบบแท็บ
ovr_scope_extensions	(ไม่บังคับ) อนุญาตให้ PWA รวมหน้าเว็บเพิ่มเติมภายในขอบเขตของเว็บแอปพลิเคชัน ซึ่งประกอบด้วยพจนานุกรม JSON ที่มี URL ของส่วนขยายหรือรูปแบบไวลด์การ์ด ปัจจุบันฟีเจอร์นี้ได้รับการกำหนดมาตรฐานเป็นส่วนขยายขอบเขตสำหรับเว็บแอป

การแพ็กเกจ PWA ด้วย Bubblewrap CLI

Bubblewrap เป็นชุดไลบรารีโอเพนซอร์สและเครื่องมือบรรทัดคำสั่ง (CLI) สำหรับ Node.js Bubblewrap ได้รับการพัฒนาโดยทีม Google Chrome เพื่อช่วยให้นักพัฒนาซอฟต์แวร์สร้าง บิลด์ และลงชื่อในโปรเจ็กต์ Android ที่เปิดใช้งาน PWA เป็นกิจกรรมในเว็บซึ่งเชื่อถือได้ (TWA)

ปัจจุบันเบราว์เซอร์ Meta Quest ยังไม่รองรับ TWA อย่างเต็มรูปแบบ แต่ตั้งแต่เวอร์ชัน 1.18.0 เป็นต้นไป Bubblewrap จะรองรับการแพ็กเกจ PWA สำหรับอุปกรณ์ Meta Quest

โดยสามารถสร้างไฟล์ APK สากลที่เปิด TWA ในอุปกรณ์ Android ทั่วไปและเบราว์เซอร์ Meta Quest ในอุปกรณ์ Meta Quest

สมมติว่าคุณติดตั้ง Node.js ไว้แล้ว คุณจะติดตั้ง Bubblewrap CLI ได้ด้วยคำสั่งต่อไปนี้

npm i -g @bubblewrap/cli

เมื่อเรียกใช้ Bubblewrap เป็นครั้งแรก ระบบจะเสนอให้ดาวน์โหลดและติดตั้งทรัพยากรภายนอกที่จำเป็นโดยอัตโนมัติ ซึ่งได้แก่ Java Development Kit (JDK) และเครื่องมือสร้าง Android SDK

หากต้องการสร้างโปรเจ็กต์ Android ที่เข้ากันได้กับ Meta Quest ซึ่งรวม PWA ของคุณไว้ ให้เรียกใช้คำสั่ง init พร้อมแฟล็ก --metaquest แล้วทำตามวิซาร์ด

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

เมื่อสร้างโปรเจ็กต์แล้ว ให้สร้างและลงนามโดยเรียกใช้คำสั่งต่อไปนี้

bubblewrap build

ซึ่งจะแสดงผลไฟล์ชื่อ app-release-signed.apk ไฟล์นี้สามารถติดตั้งในอุปกรณ์หรือเผยแพร่ไปยัง Meta Quest Store, Google Play Store หรือแพลตฟอร์มการจัดจำหน่ายแอป Android อื่นๆ

หมายเหตุ: เคล็ดลับมือโปร: คุณยังใช้แฟล็ก --chromeosonly นอกเหนือจากแฟล็ก --metaquest เพื่อทำให้ไฟล์ APK เข้ากันได้กับ Meta Quest และอุปกรณ์ Android ทั่วไป รวมถึงอุปกรณ์ ChromeOS ได้ด้วย

การแพ็กเกจ PWA ด้วย Oculus Platform Utility

Oculus Platform Utility เป็นเครื่องมือบรรทัดคำสั่งอย่างเป็นทางการที่ Meta พัฒนาขึ้นเพื่อเผยแพร่แอปสำหรับอุปกรณ์ Oculus Rift และ Meta Quest

นอกจากนี้ ยังช่วยให้คุณรวมแพ็กเกจ PWA สำหรับอุปกรณ์ Meta Quest ด้วยคำสั่ง create-pwa และเผยแพร่ไปยัง Meta Quest Store และ App Lab ได้ด้วย

ตั้งชื่อไฟล์เอาต์พุตผ่านพารามิเตอร์ -o และเส้นทางไปยัง Android SDK ผ่านพารามิเตอร์ --android-sdk

ชี้เครื่องมือไปที่ URL ที่เผยแพร่อยู่ของไฟล์ Manifest ของเว็บแอปผ่านพารามิเตอร์ --web-manifest-url

หากไม่มีไฟล์ Manifest ใน PWA ที่เผยแพร่อยู่หรือต้องการลบล้างไฟล์ Manifest ที่เผยแพร่อยู่ คุณยังคงสร้าง APK สำหรับ PWA ได้โดยใช้ไฟล์ Manifest ในเครื่องและพารามิเตอร์ --manifest-content-file

หากต้องการให้ไฟล์ Manifest มีความบริสุทธิ์มากที่สุด ให้ใช้พารามิเตอร์ --package-name ที่มีค่าในรูปแบบชื่อโดเมนแบบย้อนกลับ (เช่น com.company.app.pwa) แทนการเพิ่มช่อง ovr_package_name ที่เป็นกรรมสิทธิ์ลงในไฟล์ 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

ข้อควรระวัง: ไฟล์ APK ที่สร้างโดย Oculus Platform Utility ใช้ได้กับอุปกรณ์ Meta Quest เท่านั้น และไม่สามารถเรียกใช้ในอุปกรณ์ Android ทั่วไปได้ นอกจากนี้ ยังเผยแพร่ได้เฉพาะใน Meta Quest Store และ App Lab เท่านั้น

การจัดแพ็กเกจ PWA ด้วย PWABuilder

การใช้ PWABuilder เป็นวิธีที่ง่ายที่สุดในมุมมองของผู้เขียน และเป็นวิธีที่แนะนำในการแพ็กเกจ PWA สำหรับ Meta Quest ในขณะนี้

PWABuilder เป็นโปรเจ็กต์โอเพนซอร์สที่พัฒนาโดย Microsoft ซึ่งช่วยให้นักพัฒนาแอปสามารถแพ็กเกจและรับรอง PWA เพื่อเผยแพร่ใน Store ต่างๆ ได้ เช่น Microsoft Store, Google Play Store, App Store และ Meta Quest Store

การแพ็กเกจ PWA ด้วย PWABuilder นั้นง่ายพอๆ กับการป้อน URL ของ PWA, การป้อน/แก้ไขข้อมูลเมตาของแอป และการคลิกปุ่มสร้าง

PWABuilder ช่วยให้นักพัฒนาแอปเลือกเครื่องมือที่อยู่เบื้องหลังเพื่อใช้ในการแพ็กเกจ PWA สำหรับอุปกรณ์ Meta Quest ได้

คุณเลือกตัวเลือก Meta Quest เพื่อใช้ Oculus Platform Utility ได้

หมายเหตุ: เคล็ดลับมือโปร: PWABuilder ใช้ Oculus Platform Utility เวอร์ชันที่ปรับแต่งเล็กน้อย ซึ่งจะสร้างไฟล์ APK ที่มีขนาดเล็กลงมากโดยนำโค้ดและทรัพยากรที่ไม่ได้ใช้ออก

คุณสามารถเลือกตัวเลือก Android เพื่อใช้ Bubblewrap และเลือกช่องทำเครื่องหมายเข้ากันได้กับ Meta Quest

หมายเหตุ: เคล็ดลับมือโปร: เนื่องจาก PWABuilder เป็น PWA ที่ทำงานได้ทุกที่ที่มีเบราว์เซอร์ คุณจึงเปิดในเบราว์เซอร์ Meta Quest และทำตามขั้นตอนทั้งหมดใน Meta Quest ได้เลย

การติดตั้ง PWA ด้วย ADB

ประเด็นสำคัญ: หากต้องการเปิดใช้ Android Debug Bridge (ADB) ในอุปกรณ์ Meta Quest คุณต้องเปิดใช้โหมดนักพัฒนาซอฟต์แวร์ในแอปที่ใช้ร่วมกันบนอุปกรณ์เคลื่อนที่ ก่อนที่จะทำให้อุปกรณ์อยู่ในโหมดนักพัฒนาซอฟต์แวร์ได้ คุณต้องเป็นสมาชิก (หรือสร้าง) องค์กรนักพัฒนาซอฟต์แวร์ใน Oculus Developer Center

หลังจากสร้างไฟล์ APK แล้ว คุณสามารถไซด์โหลดไฟล์ดังกล่าวไปยังอุปกรณ์ Meta Quest โดยใช้ ADB ผ่าน USB หรือ Wi-Fi ได้โดยทำดังนี้

adb install app-release-signed.apk

หากคุณใช้ Bubblewrap CLI สำหรับการแพ็กเกจ PWA เครื่องมือนี้จะมีคำสั่งชื่อแทนที่สะดวกในการไซด์โหลดไฟล์ APK ดังนี้

bubblewrap install

หมายเหตุ: เคล็ดลับมือโปร: คุณสามารถใช้ Android Web Toolbox เพื่อไซด์โหลดไฟล์ APK ได้ ซึ่งเป็นเว็บแอปโอเพนซอร์สที่ช่วยให้คุณเข้าถึงฟังก์ชันการทำงานทั้งหมดของ ADB ได้จากเบราว์เซอร์ แม้จะมาจากอุปกรณ์ Android เครื่องอื่นก็ตาม คุณไม่จำเป็นต้องติดตั้งหรือใช้ไดรเวอร์เนื่องจากมี Web USB API

แอปที่ไซด์โหลดจะปรากฏในส่วนแหล่งที่มาที่ไม่รู้จักในหน้าที่รวมแอปทั้งหมด

การส่งแอป

ประเด็นสำคัญ: คุณจะส่งและพิจารณาแอปสำหรับ Oculus Store ได้ก็ต่อเมื่อคุณได้รับอนุมัติให้เป็นนักพัฒนาแอป Meta Quest Store เท่านั้น ปัจจุบันการเผยแพร่ PWA ผ่าน App Lab ยังไม่พร้อมให้บริการ ทีม Meta จะแชร์ข้อมูลเพิ่มเติมเกี่ยวกับเวลาและวิธีส่ง PWA ไปยัง App Lab ในเร็วๆ นี้

การอัปโหลดและส่ง PWA ไปยัง Oculus Store มีอธิบายไว้อย่างละเอียดในเอกสารของศูนย์นักพัฒนาซอฟต์แวร์ Oculus

นอกจากการส่งแอปไปยัง Oculus Store แล้ว นักพัฒนาแอปยังสามารถเผยแพร่แอปผ่านแพลตฟอร์มต่างๆ เช่น SideQuest ไปยังผู้บริโภคโดยตรงได้อย่างปลอดภัย โดยไม่ต้องขออนุมัติจาก Store ซึ่งช่วยให้นักพัฒนาแอปสามารถเผยแพร่แอปไปยังผู้ใช้ปลายทางได้โดยตรง แม้ว่าแอปจะยังอยู่ในช่วงเริ่มต้นของการพัฒนา อยู่ในขั้นทดลอง หรือมีเป้าหมายเป็นกลุ่มเป้าหมายเฉพาะก็ตาม

การทดสอบแอปแบบหลายแท็บ

ในการทดสอบแอปแบบหลายแท็บ ฉันได้สร้าง PWA ทดสอบเล็กๆ ขึ้นมาเพื่อสาธิตฟีเจอร์ลิงก์ต่างๆ ได้แก่ การเปิดแท็บใหม่ใน PWA, การอยู่ในแท็บปัจจุบัน, การเปิดหน้าต่างเบราว์เซอร์ใหม่ และการเปิดใน WebView โดยอยู่ในแท็บปัจจุบัน สร้างสำเนาของแอปนี้ที่ติดตั้งได้ในเครื่องโดยเรียกใช้คำสั่งด้านล่างในเครื่องของคุณ

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

นี่คือ Screencast ของแอปทดสอบ

SVGcode เวอร์ชัน Oculus

ฉันได้สร้าง PWA เวอร์ชัน Oculus ล่าสุดที่ชื่อว่า SVGcode เพื่อทดลองใช้คำแนะนำดังกล่าว คุณดาวน์โหลดไฟล์ APK ที่ได้ output.apk จาก Google ไดรฟ์ของฉันได้ หากต้องการตรวจสอบแพ็กเกจเพิ่มเติม เราก็มีเวอร์ชันที่ผ่านการดีคอมไพล์ด้วย ดูวิธีการสร้างใน package.json

การใช้แอปใน Oculus ทำงานได้ดี รวมถึงความสามารถในการเปิดและบันทึกไฟล์ เบราว์เซอร์ Oculus ไม่รองรับ File System Access API แต่วิธีการสำรองช่วยได้ สิ่งเดียวที่ใช้งานไม่ได้คือการบีบเพื่อซูม ฉันคาดหวังว่ามันจะทำงานได้โดยการกดปุ่มทริกเกอร์บนตัวควบคุมทั้งสองตัว แล้วขยับตัวควบคุมไปในทิศทางตรงกันข้าม นอกเหนือจากนั้น ทุกอย่างทำงานได้ดีและตอบสนองได้รวดเร็ว ดังที่คุณเห็นใน Screencast ที่ฝังไว้

PWA แบบ WebXR 3 มิติที่สมจริง

การรองรับ PWA ใน Oculus Quest ไม่ได้จำกัดเฉพาะแอป 2 มิติแบบแบนเท่านั้น นักพัฒนาแอปสามารถสร้างประสบการณ์ 3 มิติที่สมจริงสำหรับ VR โดยใช้ WebXR API

หากคุณสงสัยว่าระบบจัดการพรอมต์ต่างๆ (การติดตั้ง PWA, คำขอสิทธิ์, การแจ้งเตือน) จากภายใน VR อย่างไร (หากมี)

นี่คือ Screencast ของการทดสอบพรอมต์ User Agent จากการทดสอบ WebXR ของกลุ่มทำงานเว็บที่สมจริง

อย่างที่คุณเห็น การเข้าสู่โหมด VR ต้องได้รับสิทธิ์จากผู้ใช้ ระบบจะขอสิทธิ์ 1 ครั้งต่อต้นทาง การขอสิทธิ์จะออกจากโหมดใหญ่พิเศษ ระบบยังไม่รองรับการแจ้งเตือนในขณะนี้

การติดตามการเคลื่อนไหวของมือ

คุณใช้มือเพื่อโต้ตอบกับ PWA ในโหมดใหญ่พิเศษได้ด้วย WebXR Hand Input API และระบบการติดตามการเคลื่อนไหวของมือที่ทำงานด้วยระบบ AI ของ Meta

นี่คือ Screencast ของตัวอย่างการติดตามการเคลื่อนไหวของมือจากตัวอย่าง WebXR ของ Immersive Web Working Group

เทคโนโลยีความจริงเสริม/ความจริงแบบผสม (Passthrough)

ตามที่ได้ประกาศในงาน Meta Connect 2022 เบราว์เซอร์ Meta Quest ได้เพิ่มการรองรับ WebXR Augmented Reality (AR) หรือที่เรียกว่าเทคโนโลยีความจริงแบบผสม (MR) ในอุปกรณ์ Meta Quest 2 และ Meta Quest Pro

มาดูตัวอย่างเริ่มต้นของ A-Frame ที่มีการปรับเปลี่ยนเล็กน้อยซึ่งมีโมเดลที่ลดขนาดลง รวมถึงท้องฟ้าและระนาบที่ซ่อนอยู่สำหรับเทคโนโลยีความจริงเสริม (AR)

A-Frame เป็นเฟรมเวิร์กเว็บแบบโอเพนซอร์สสำหรับการสร้างประสบการณ์ 3D/VR/AR โดยใช้องค์ประกอบ HTML ที่กำหนดเองแบบประกาศและนำกลับมาใช้ใหม่ได้ ซึ่งอ่าน ทำความเข้าใจ และคัดลอกและวางได้ง่าย

นี่คือ Screencast ของการสาธิตนี้ใน Meta Quest 2

Meta Quest 2 มีกล้องแบบขาวดำ ดังนั้นฟีเจอร์ Passthrough จึงเป็นโทนสีเทา ส่วน Meta Quest Pro มีกล้องแบบสี

บทสรุป

PWA บน Oculus Quest 2 เป็นอะไรที่สนุกและมีแนวโน้มที่ดีมาก ผืนผ้าใบเสมือนจริงที่ไม่มีที่สิ้นสุดซึ่งช่วยให้ผู้ใช้ปรับขนาดหน้าจอให้เหมาะกับงานปัจจุบันมากที่สุดมีศักยภาพสูงในการเปลี่ยนวิธีการทำงานของเราในอนาคต แม้ว่าการพิมพ์ใน VR ด้วยการติดตามการเคลื่อนไหวของมือจะยังอยู่ในช่วงเริ่มต้น และอย่างน้อยสำหรับฉันก็ยังทำงานได้ไม่น่าเชื่อถือมากนัก แต่ก็ทำงานได้ดีพอสำหรับการป้อน URL หรือพิมพ์ข้อความสั้นๆ

สิ่งที่ฉันชอบมากที่สุดเกี่ยวกับ PWA ใน Oculus Quest 2 คือเป็น PWA ทั่วไปที่สามารถใช้ได้โดยไม่มีการเปลี่ยนแปลงในแท็บเบราว์เซอร์หรือผ่าน Wrapper APK แบบบางโดยไม่มี API เฉพาะแพลตฟอร์ม การกำหนดเป้าหมายหลายแพลตฟอร์มด้วยโค้ดเดียวกันทำได้ง่ายกว่าที่เคย นี่คือ PWA ใน VR และ AR บนเว็บ อนาคตสดใส

การรับทราบ

รูปภาพ Oculus Quest 2 โดย Maximilian Prandstätter บน Flickr รูปภาพจาก Oculus Store ของแอป Instagram, Facebook, Oculus Browser และ Spike รวมถึงภาพประกอบการค้นพบได้ของแอปและภาพเคลื่อนไหวการติดตามการเคลื่อนไหวของมือได้รับความอนุเคราะห์จาก Meta โพสต์นี้ได้รับการตรวจสอบโดย Joe Medley