PWA ใน Oculus Quest 2

Oculus Quest 2 เป็นชุดหูฟัง Virtual Reality (VR) ที่สร้างขึ้นโดย Oculus ซึ่งเป็นหน่วยงานหนึ่งของ Meta ตอนนี้นักพัฒนาแอปสามารถสร้างและเผยแพร่ Progressive Web App (PWA) แบบ 2D และ 3D ที่ใช้ประโยชน์จากฟีเจอร์การทำงานหลายอย่างพร้อมกันของ 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 พิกเซลที่มีความละเอียดระดับ 1,920 พิกเซลต่อความละเอียดของดวงตา และรีเฟรชด้วยอัตราการรีเฟรชสูงสุด 120 Hz

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

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

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

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

เบราว์เซอร์ Oculus ที่มีหน้าต่างเบราว์เซอร์เปิดอยู่ 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

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

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

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

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

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

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

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

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

สำหรับ Oculus Quest 2 เบราว์เซอร์ Oculus จะแสดงผลทั้งเนื้อหาหน้าเว็บ 2 มิติ และ WebXR ที่อัตราการรีเฟรช 90 Hz เมื่อดูสื่อแบบเต็มหน้าจอ เบราว์เซอร์ Oculus จะปรับอัตราการรีเฟรชของอุปกรณ์ให้เหมาะสมตามอัตราเฟรมของวิดีโอ เช่น 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 กับ PWA เพื่อให้ผู้ใช้สลับระหว่าง 2 แพลตฟอร์มนี้ได้อย่างราบรื่น โดยปกติแล้ว ระบบสนับสนุนการเข้าสู่ระบบ Facebook ตั้งแต่เริ่มต้น เบราว์เซอร์ Oculus มีเครื่องมือจัดการรหัสผ่านที่ช่วยให้ผู้ใช้จัดเก็บและแชร์รหัสผ่านอย่างปลอดภัยระหว่างเบราว์เซอร์และประสบการณ์การใช้งานแอปที่ติดตั้ง

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

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

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

คุณควบคุม PWA ได้ด้วยตัวควบคุมซ้ายและขวาของ Oculus, เมาส์และแป้นพิมพ์บลูทูธ รวมถึงผ่านการติดตามด้วยมือ การเลื่อนจะทำงานผ่านไม้นิ้วหัวแม่มือบนตัวควบคุม 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. คลิก inspect ในแท็บเบราว์เซอร์ Oculus ที่ต้องการ

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

การค้นพบแอป

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

เบราว์เซอร์ Oculus เชิญผู้ใช้ในข้อความแจ้งให้ติดตั้งแอป 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 ใน 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 Bubblewrap จะรองรับ PWA สำหรับการจัดแพ็กเกจสำหรับอุปกรณ์ Meta Quest

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

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

npm i -g @bubblewrap/cli

เมื่อเรียกใช้ Bubblewrap เป็นครั้งแรก แอปจะเสนอให้ดาวน์โหลดและติดตั้งทรัพยากร Dependency ภายนอกที่จำเป็น เช่น 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 อื่นๆ ก็ได้

การจัดแพ็กเกจ 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 เพื่อเผยแพร่ไปยังร้านค้าต่างๆ รวมถึง Microsoft Store, Google Play Store, App Store และ Meta Quest Store ได้

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

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

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

ตัวเลือกแพ็กเกจ 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 Developer Center

นอกเหนือจากการส่งแอปไปยัง 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

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

SVGcode เวอร์ชัน Oculus

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

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

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

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

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

นี่คือ Screencast ของการทดสอบ User Agent Prompt จากการทดสอบ WebXR ของImmersive Web Working Group

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

การติดตามมือ

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

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

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

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

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

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

นี่คือ Screencast ของเดโมนี้ใน Meta Quest 2

Meta Quest 2 มีกล้องแบบโมโนโครม การส่งผ่านจะเป็นโทนสีเทา ส่วน 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 และ Spike รวมถึงภาพ การค้นพบได้ของแอปและการติดตามด้วยมือ เอื้อเฟื้อภาพเคลื่อนไหวจาก Meta รูปภาพหลักโดย Arnau Marín i Puig โพสต์นี้ได้รับการตรวจสอบโดย Joe Medley