PWA ใน Oculus Quest 2

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

Oculus Quest 2

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

อุปกรณ์ Oculus Quest 2 พร้อมตัวควบคุม

เบราว์เซอร์ Oculus

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

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

Oculus Browser ที่มีหน้าต่างเบราว์เซอร์ 3 หน้าต่างเปิดอยู่

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

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

หน้า "เกี่ยวกับ" ของเบราว์เซอร์ Oculus

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

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

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

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

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

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

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

PWA ใน Oculus Browser และ 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 อยู่แล้ว Oculus Browser มีเครื่องมือจัดการรหัสผ่านที่ช่วยให้ผู้ใช้จัดเก็บและแชร์รหัสผ่านได้อย่างปลอดภัยระหว่างประสบการณ์การใช้งานเบราว์เซอร์กับแอปที่ติดตั้ง

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

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

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

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

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

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

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

สิทธิ์ในเบราว์เซอร์ Oculus

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

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

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

การตรวจสอบแอปที่ทำงานใน Oculus Quest 2 ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

การค้นพบแอป

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

Oculus Browser เชิญให้ผู้ใช้ติดตั้งแอป MyEmail

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

PWA โดย Meta

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

แอป Facebook Oculus Quest 2

แอป Instagram สำหรับ Oculus Quest 2

PWA ของนักพัฒนาแอปรายอื่น

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

แอป Spike สำหรับ Oculus Quest 2

อีกตัวอย่างหนึ่งคือ 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 ขณะนี้เรากําลังกําหนดมาตรฐานฟีเจอร์นี้ให้เป็นโหมดแอปพลิเคชันแบบแท็บ
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 เป็นต้นไป บับเบิ้ลแวร์รองรับการจัดแพ็กเกจ PWA สำหรับอุปกรณ์ Meta Quest

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

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

npm i -g @bubblewrap/cli

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

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

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

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

bubblewrap build

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

การสร้างแพ็กเกจ 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

การจัดแพ็กเกจ 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

ตัวเลือกการบรรจุ PWABuilder

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

การจัดแพ็กเกจ PWA ด้วย PWABuilder โดยใช้ Bubblewrap

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

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

adb install app-release-signed.apk

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

bubblewrap install

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

การส่งแอป

การอัปโหลดและส่ง PWA ไปยัง Oculus Store มีรายละเอียดอยู่ในเอกสารของศูนย์นักพัฒนาแอป Oculus

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

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

ในการทดสอบแอปหลายแท็บ เราได้สร้าง 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

ต่อไปนี้เป็นภาพหน้าจอของแอปทดสอบ

โค้ด SVG เวอร์ชัน Oculus

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

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

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

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

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

ต่อไปนี้เป็นภาพหน้าจอของการทดสอบข้อความแจ้ง User Agent จากการทดสอบ WebXR ของกลุ่มทํางานเว็บที่สมจริง

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

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

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

ต่อไปนี้เป็นภาพหน้าจอของตัวอย่างการติดตามมือจากตัวอย่าง WebXR ของกลุ่มทำงานเว็บที่สมจริง

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

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

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

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

ต่อไปนี้เป็นภาพหน้าจอของการสาธิตนี้ใน Meta Quest 2

Meta Quest 2 มีกล้องโมโนโครม ดังนั้นภาพจากกล้องจึงเป็นแบบโมโนโครม ส่วน Meta Quest Pro มีกล้องสี

สรุป

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

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

ขอขอบคุณ

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