Oculus Quest 2 הם משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, חטיבה של Meta. מפתחים יכולים עכשיו ליצור ולהפיץ אפליקציות Progressive Web App (PWA) בדו-ממד ובתלת-ממד, שמאפשרות להשתמש בתכונה "ריבוי משימות" של Oculus Quest 2.
Oculus Quest 2
Oculus Quest 2 הם משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, חטיבה של Meta. היא היורשת של קסדת המציאות המדומה הקודמת של החברה, Oculus Quest. המכשיר יכול לפעול גם כמשקפי VR עצמאיים עם מערכת הפעלה פנימית שמבוססת על Android, וגם עם תוכנת VR שתואמת ל-Oculus שפועלת במחשב שמחובר באמצעות USB או Wi-Fi. הוא משתמש במערכת על שבב (SoC) מסוג Qualcomm Snapdragon XR2 עם זיכרון RAM בנפח 6GB. התצוגה של Quest 2 היא פאנל LCD יחיד עם החלפה מהירה, ברזולוציה של 1,832 × 1,920 פיקסלים לכל עין, שפועל בקצב רענון של עד 120Hz.

דפדפן Oculus
נכון לעכשיו, יש שלושה דפדפנים זמינים ל-Oculus Quest 2: Wolvic, היורש של Firefox Reality, ו-Oculus Browser המובנה. במאמר הזה נתמקד באפשרות השנייה. באתר של Oculus מוצג דפדפן Oculus באופן הבא:
"דפדפן Oculus תומך בתקני האינטרנט העדכניים ביותר ובטכנולוגיות אחרות כדי לעזור לכם ליצור חוויות VR באינטרנט. אתרי האינטרנט הדו-ממדיים של היום פועלים מצוין ב-Oculus Browser כי הוא מבוסס על מנוע הרינדור של Chromium. הוא עבר אופטימיזציה נוספת למשקפי Oculus כדי להשיג את הביצועים הטובים ביותר ולאפשר למפתחי אתרים לנצל את מלוא הפוטנציאל של VR באמצעות ממשקי API חדשים, כמו WebXR. באמצעות WebXR, אנחנו פותחים את הדלתות לעתיד של האינטרנט".

סוכן משתמש
מחרוזת סוכן המשתמש של הדפדפן בזמן הכתיבה היא:
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 Browser מבוססת על Chrome 95.0.4638.74, שהיא רק גרסה אחת לפני הגרסה היציבה הנוכחית של Chrome, שהיא 96.0.4664.110. אם המשתמש עובר למצב נייד, VR משתנה ל-Mobile VR.

ממשק משתמש
ממשק המשתמש של הדפדפן (שמוצג למעלה) כולל את התכונות הבאות (בשורה העליונה, מימין לשמאל):
- הכפתור "הקודם"
- כפתור לטעינה מחדש
- פרטי אתר
- סרגל כתובות ה-URL
- כפתור ליצירת סימנייה
- כפתור לשינוי הגודל עם אפשרויות לרוחב צר, בינוני ורחב, וגם תכונת זום
- כפתור לבקשת אתר לנייד
- כפתור תפריט עם האפשרויות הבאות:
- כניסה למצב פרטי
- סגירת כל הכרטיסיות
- הגדרות
- סימניות
- הורדות
- היסטוריה
- ניקוי נתוני גלישה
השורה התחתונה כוללת את התכונות הבאות:
- כפתור הסגירה
- כפתור מזעור
- כפתור שלוש הנקודות עם האפשרויות "הקודם", "הבא" ו"טעינה מחדש"
קצב הרענון ויחס הפיקסלים של המכשיר
ב-Oculus Quest 2, דפדפן Oculus מעבד גם תוכן של דפי אינטרנט דו-ממדיים וגם WebXR בקצב רענון של 90Hz. כשצופים במדיה במסך מלא, דפדפן Oculus משפר את קצב הרענון של המכשיר על סמך קצב הפריימים של הסרטון, למשל 24 פריימים לשנייה. ב-Oculus Quest 2 יש יחס פיקסלים של 1.5, שמאפשר להציג טקסט חד.
אפליקציות PWA בדפדפן Oculus ובחנות Oculus
ב-28 באוקטובר 2021, ג'ייקוב רוסי, מנהל ניהול מוצר ב-Meta (Oculus), שיתף שאפליקציות PWA מגיעות ל-Oculus Quest ול-Oculus Quest 2. בהמשך, אתאר את חוויית השימוש ב-PWA ב-Oculus ואסביר איך לפתח, להעביר ולבדוק את ה-PWA ב-Oculus Quest 2.
שיתוף מצב
מצב ההתחברות משותף בין Oculus Browser לבין אפליקציות PWA, כך שהמשתמשים יכולים לעבור בקלות בין שתי האפליקציות. כמובן ש-Facebook Login נתמך באופן מובנה. דפדפן Oculus כולל מנהל סיסמאות שמאפשר למשתמשים לאחסן ולשתף את הסיסמאות שלהם באופן מאובטח בין הדפדפן לבין חוויות השימוש באפליקציות המותקנות.
גודלי החלונות של PWA
המשתמשים יכולים לשנות את הגודל של חלונות הדפדפן ושל חלונות של אפליקציות PWA מותקנות. הגובה יכול להיות בין 625 פיקסלים ל-1,200 פיקסלים. אפשר להגדיר את הרוחב בין 400 פיקסלים ל-2,000 פיקסלים. המידות שמוגדרות כברירת מחדל הן 1,000 × 625 פיקסלים.
אינטראקציה עם אפליקציות אינטרנט מתקדמות (PWA)
אפשר לשלוט באפליקציות PWA באמצעות השלטים הימני והשמאלי של Oculus, עכברים ומקלדות Bluetooth, וגם באמצעות מעקב ידיים. כדי לגלול, משתמשים בסטיקים של בקרי Oculus, או מצמידים את האגודל והאצבע ומזיזים אותם בכיוון הרצוי. כדי לבחור משהו, המשתמש יכול להצביע ולעשות תנועת צביטה.
הרשאות לאפליקציות אינטרנט מתקדמות (PWA)
ההרשאות ב-Oculus Browser פועלות באופן דומה להרשאות ב-Chrome. המצב משותף בין אפליקציות שפועלות בדפדפן לבין אפליקציות PWA מותקנות, כך שהמשתמשים יכולים לעבור בין שתי החוויות בלי להעניק שוב את אותן הרשאות.
למרות שהרבה הרשאות מוטמעות, לא כל התכונות נתמכות. לדוגמה, בקשת ההרשאה למיקום גיאוגרפי תצליח, אבל המכשיר לא יקבל מיקום בפועל. באופן דומה, ממשקי ה-API השונים של החומרה, כמו WebHID, Web Bluetooth וכו', עוברים את זיהוי התכונות, אבל לא מציגים כלי בחירה שמאפשר למשתמש להתאים את Oculus למכשיר חומרה. אני מניח שזיהוי התכונות של ממשקי ה-API ישתפר ככל שהדפדפן יתפתח.

ניפוי באגים באפליקציות אינטרנט מתקדמות (PWA) באמצעות כלי הפיתוח ל-Chrome
אחרי הפעלת מצב פיתוח, ניפוי באגים של אפליקציות PWA ב-Oculus Quest 2 פועל בדיוק כמו שמתואר במאמר ניפוי באגים מרחוק במכשירי Android.
- במכשיר Oculus, עוברים לאתר הרצוי ב-Oculus Browser.
- מפעילים את Google Chrome במחשב ועוברים אל
chrome://inspect/#devices. - מוצאים את מכשיר Oculus הרלוונטי, שמתחתיו תופיע קבוצה של כרטיסיות בדפדפן Oculus שפתוחות כרגע במכשיר.
- לוחצים על בדיקה בכרטיסייה הרצויה של Oculus Browser.

גילוי אפליקציות
אנשים יכולים להשתמש בדפדפן עצמו או ב-Oculus Store כדי למצוא אפליקציות PWA. כמו בכל דפדפן אחר, אפליקציות PWA מותקנות פועלות גם ב-Oculus Browser כאתרים שפועלים בכרטיסייה. כשמשתמש נכנס לאתר, דפדפן Oculus יעזור לו למצוא את האפליקציה אם (ורק אם) היא זמינה ב-Oculus Store. למשתמשים שכבר התקינו את האפליקציה, Oculus Browser יעזור לעבור בקלות לאפליקציה אם הם רוצים.

אפליקציות PWA לדוגמה ב-Oculus Quest 2
אפליקציות PWA של Meta
כמה מחלקות של Meta יצרו אפליקציות PWA ל-Oculus Quest 2, למשל אינסטגרם וFacebook. האפליקציות האלה פועלות בחלונות נפרדים שאין בהם סרגל כתובות, ואפשר לשנות את הגודל שלהם.


אפליקציות PWA של מפתחים אחרים
נכון לזמן כתיבת המאמר הזה, יש מספר קטן אבל הולך וגדל של אפליקציות PWA ל-Oculus Quest 2 בחנות Oculus. Spike מאפשרת למשתמשים לחוות את כל כלי העבודה החיוניים כמו אימייל, צ'אט, שיחות, הערות, משימות ורשימות מטלות מתיבת הדואר הנכנס שלהם במרכז סביבה וירטואלית ישירות באפליקציית Spike.

דוגמה נוספת היא Smartsheet, סביבת עבודה דינמית שמאפשרת לנהל פרויקטים, להגדיר תהליכי עבודה אוטומטיים ולפתח פתרונות חדשים במהירות.
אפליקציות אינטרנט פרוגרסיביות נוספות כמו Slack, Dropbox או Canva יגיעו בקרוב, כפי שניתן לראות בסרטון בהשתתפות ג'ייקוב רוסי שפורסם במסגרת כנס Connect של פייסבוק בשנת 2021.
יצירת אפליקציות PWA ל-Oculus
השלבים הנדרשים מפורטים במסמכי התיעוד של Meta. באופן כללי, אפליקציות PWA שניתן להתקין ב-Chrome אמורות לעבוד ב-Oculus בלי צורך בהתאמות.
הדרישות לגבי קובץ המניפסט של אפליקציית האינטרנט
יש כמה הבדלים חשובים בהשוואה לקריטריונים של Chrome להתקנה ולמפרט של קובץ המניפסט של אפליקציית האינטרנט. לדוגמה, Oculus תומכת כרגע רק בשפות שנכתבות משמאל לימין, ואילו המפרט של קובץ המניפסט של אפליקציית האינטרנט לא אוכף מגבלות כאלה. דוגמה נוספת היא start_url, שנדרש באופן מחמיר ב-Chrome כדי שאפליקציה תהיה ניתנת להתקנה, אבל ב-Oculus הוא אופציונלי. Oculus מציעה כלי שורת פקודה שמאפשר למפתחים ליצור אפליקציות PWA ל-Oculus Quest 2, וכך לקבוע ערך (pass) לפרמטרים החסרים (או לשנות את הפרמטרים הקיימים) בקובץ מניפסט של אפליקציה.
ל-Oculus יש כמה שדות אופציונליים קנייניים בקובץ מניפסט של אפליקציית האינטרנט, שבהם אפשר להשתמש כדי להתאים אישית את חוויית ה-PWA.
אריזת אפליקציות אינטרנט מתקדמות (PWA) באמצעות Bubblewrap CLI
Bubblewrap הוא קבוצה של ספריות בקוד פתוח וכלי שורת פקודה (CLI) ל-Node.js. Bubblewrap פותח על ידי צוות Google Chrome כדי לעזור למפתחים ליצור, לבנות ולחתום על פרויקט Android שמפעיל את ה-PWA כפעילות Trusted Web (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) וכלי ה-build של 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, בחנות Google Play או בכל פלטפורמה אחרת להפצת אפליקציות ל-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 הפעילה של קובץ המניפסט של אפליקציית האינטרנט באמצעות הפרמטר --web-manifest-url.
אם אין לכם מניפסט ב-PWA הפעיל או שאתם רוצים לשנות את המניפסט הפעיל, אתם עדיין יכולים ליצור APK ל-PWA באמצעות קובץ מניפסט מקומי והפרמטר --manifest-content-file.
כדי שהמניפסט יהיה נקי ככל האפשר, צריך להשתמש בפרמטר --package-name עם ערך בסימון שם דומיין הפוך (לדוגמה, com.company.app.pwa), במקום להוסיף את השדה הקנייני ovr_package_name למניפסט.
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, App Store ו-Meta Quest Store.
כדי לארוז אפליקציות אינטרנט מתקדמות באמצעות PWABuilder, פשוט מזינים את כתובת ה-URL של אפליקציית האינטרנט המתקדמת, מזינים או עורכים את המטא-נתונים של האפליקציה ולוחצים על הלחצן Generate (יצירה).
PWABuilder מאפשר למפתחים לבחור באיזה כלי להשתמש כדי לארוז את ה-PWA למכשירי Meta Quest.
אתם יכולים לבחור באפשרות Meta Quest כדי להשתמש ב-Oculus Platform Utility.

אתם יכולים לבחור באפשרות Android כדי להשתמש ב-Bubblewrap ולסמן את התיבה Meta Quest compatible.

התקנת אפליקציות PWA באמצעות ADB
אחרי שיוצרים את קובץ ה-APK, אפשר להעביר אותו למכשיר Meta Quest באמצעות ADB דרך USB או Wi-Fi:
adb install app-release-signed.apk
אם אתם משתמשים ב-Bubblewrap CLI כדי לארוז אפליקציות אינטרנט מתקדמות, הוא מספק פקודת כינוי נוחה לטעינת קובץ ה-APK ממקורות לא מורשים:
bubblewrap install
אפליקציות שהותקנו ממקורות לא מורשים מופיעות בקטע מקורות לא מוכרים בחלונית הזזה לאפליקציות.
שליחת האפליקציה
העלאה ושליחה של אפליקציות PWA ל-Oculus Store מפורטות במסמכים של Oculus Developer Center.
בנוסף לשליחת אפליקציות לחנות Oculus, המפתחים יכולים גם להפיץ את האפליקציות שלהם דרך פלטפורמות כמו SideQuest ישירות לצרכנים בצורה בטוחה ומאובטחת, בלי צורך באישור של החנות. כך הם יכולים להפיץ את האפליקציה ישירות למשתמשי הקצה, גם אם היא בשלבי פיתוח מוקדמים, ניסיונית או מיועדת לקהל ייחודי.
בדיקת אפליקציות עם כמה כרטיסיות
כדי לבדוק אפליקציות עם כמה כרטיסיות, יצרתי אפליקציית אינטרנט פרוגרסיבית קטנה לבדיקה שמדגימה את התכונות השונות של הקישורים: פתיחת כרטיסייה חדשה באפליקציית האינטרנט הפרוגרסיבית, הישארות בכרטיסייה הנוכחית, פתיחת חלון דפדפן חדש ופתיחה ב-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
הנה הקלטת מסך של אפליקציית הבדיקה.
גרסת Oculus של SVGcode
כדי לנסות את ההוראות, יצרתי גרסת Oculus של אפליקציית ה-PWA האחרונה שלי, SVGcode. אפשר להוריד את קובץ ה-APK שנוצר
output.apk
מ-Google Drive שלי. אם אתם רוצים לחקור את החבילה לעומק, יש לי גם גרסה שעברה הידור לאחור. הוראות הבנייה מפורטות במאמר package.json.
האפליקציה פועלת כמו שצריך ב-Oculus, כולל האפשרות לפתוח ולשמור קבצים. דפדפן Oculus לא תומך ב-File System Access API, אבל הגישה החלופית עוזרת. הדבר היחיד שלא עבד הוא שינוי מרחק התצוגה בתנועת צביטה. ציפיתי שזה יעבוד בלחיצה על כפתור ההפעלה בשני הבקרים ואז הזזת הבקרים בכיוונים מנוגדים. חוץ מזה, כל השאר היה מהיר ורספונסיבי, כמו שאפשר לראות בהקלטת המסך המוטמעת.
אפליקציות אינטרנט מתקדמות (PWA) עם WebXR בתלת-ממד ובמסך מלא
התמיכה ב-PWA ב-Oculus Quest לא מוגבלת לאפליקציות דו-ממדיות שטוחות. מפתחים יכולים ליצור חוויות תלת-ממדיות עשירות למציאות מדומה באמצעות WebXR API.
רוצים לדעת איך הנחיות שונות (התקנת PWA, בקשות הרשאה, התראות) מטופלות בתוך VR, אם בכלל?
הנה הקלטת מסך של בדיקת ההנחיות של סוכן המשתמש מתוך בדיקות WebXR של Immersive Web Working Group.
כמו שאתם רואים, כדי להיכנס למצב VR נדרשת הרשאה מהמשתמש. ההרשאות מתבקשות פעם אחת לכל מקור. בקשת הרשאות מוציאה את המשתמש מהמצב האימרסיבי. אין כרגע תמיכה בהתראות.
מעקב ידיים
אתם יכולים להשתמש בידיים כדי לבצע פעולות באפליקציות אינטרנט מתקדמות במצב אימרסיבי, בזכות WebXR Hand Input API ומערכת מעקב הידיים מבוססת ה-AI של Meta.
כאן אפשר לראות הקלטת מסך של דוגמה למעקב ידיים מתוך דוגמאות ל-WebXR של Immersive Web Working Group.
מציאות רבודה/משולבת (Passthrough)
כפי שהוכרז ב-Meta Connect 2022, דפדפן Meta Quest הוסיף תמיכה ב-WebXR Augmented Reality (AR), שנקראת גם מציאות משולבת (MR), במכשירי Meta Quest 2 ו-Meta Quest Pro.
בואו נבדוק דוגמה בסיסית ל-A-Frame עם שינויים קלים, שכוללת מודלים מוקטנים ושמיים ומישור מוסתרים למציאות רבודה.
A-Frame הוא מסגרת אינטרנט בקוד פתוח ליצירת חוויות תלת-ממד, VR ו-AR, שמבוססת על רכיבי HTML מותאמים אישית, הצהרתיים וניתנים לשימוש חוזר, שקל לקרוא, להבין ולהעתיק ולהדביק.
הנה הקלטת מסך של ההדגמה הזו ב-Meta Quest 2.
ב-Meta Quest 2 יש מצלמות מונוכרומטיות, כך שהמעבר הוא בגווני אפור, וב-Meta Quest Pro יש מצלמות צבעוניות.
מסקנות
אפליקציות PWA ב-Oculus Quest 2 הן מהנות מאוד ומבטיחות. המסך הווירטואלי האינסופי מאפשר למשתמשים לשנות את קנה המידה של המסך כך שיתאים בצורה הטובה ביותר למשימה הנוכחית, ויש לו פוטנציאל רב לשנות את האופן שבו נעבוד בעתיד. הקלדה ב-VR עם מעקב ידיים עדיין נמצאת בשלבים מוקדמים, ולפחות בשבילי, היא עדיין לא עובדת בצורה אמינה, אבל היא עובדת מספיק טוב כדי להזין כתובות URL או להקליד טקסטים קצרים.
הדבר שאני הכי אוהב באפליקציות PWA ב-Oculus Quest 2 הוא שהן פשוט אפליקציות PWA רגילות שאפשר להשתמש בהן בלי שינוי בכרטיסייה בדפדפן או דרך מעטפת APK דקה בלי ממשקי API ספציפיים לפלטפורמה. עכשיו קל יותר מתמיד לטרגט כמה פלטפורמות עם אותו קוד. הנה אפליקציות PWA ב-VR וב-AR באינטרנט. העתיד ורוד!
תודות
תמונה של Oculus Quest 2 מאת Maximilian Prandstätter ב-Flickr. תמונות מ-Oculus Store של האפליקציות Instagram, Facebook, Oculus Browser ו-Spike, וגם איור של יכולת הגילוי של האפליקציה ואנימציה של מעקב ידיים, באדיבות Meta. הפוסט הזה נבדק על ידי Joe Medley.