בהכנה למצבי התצוגה של מחר

אפליקציות PWA יכולות להשתמש במאפיין display_override כדי להתמודד עם מצבי תצוגה מיוחדים.

Thomas Steiner

קובץ מניפסט של אפליקציית אינטרנט הוא קובץ JSON שמספק לדפדפן מידע על אפליקציית האינטרנט המתקדמת (PWA) ועל האופן שבו היא אמורה לפעול כשהיא מותקנת במחשב או במכשיר הנייד של המשתמש. באמצעות המאפיין display, אתם יכולים להתאים אישית את ממשק המשתמש של הדפדפן שמוצג כשהאפליקציה מופעלת. לדוגמה, אפשר להסתיר את סרגל הכתובות ואת ממשק המשתמש של הדפדפן. אפשר אפילו להגדיר שהמשחקים יופעלו במסך מלא. לסיכום, בהמשך מפורטים מצבי התצוגה שצוינו בזמן כתיבת המאמר הזה.

נכס שימוש
fullscreen אפליקציית האינטרנט נפתחת בלי ממשק משתמש של הדפדפן, ותופסת את כל שטח התצוגה הזמין.
standalone אפליקציית האינטרנט נפתחת ונראית כמו אפליקציה עצמאית. היא פועלת בחלון משלה, בנפרד מהדפדפן, ורכיבי ממשק המשתמש הרגילים של הדפדפן, כמו סרגל כתובות ה-URL, מוסתרים.
minimal-ui המצב הזה דומה ל-standalone, אבל הוא מספק למשתמשים קבוצה מינימלית של רכיבי ממשק משתמש לשליטה בניווט (כמו 'הקודם' ו'טעינה מחדש').
browser חוויית גלישה רגילה.

מצבי התצוגה האלה פועלים לפי שרשרת גיבוי (fallback chain) מוגדרת היטב ("fullscreen" ← "standalone" ← "minimal-ui" ← "browser"). אם הדפדפן לא תומך במצב תצוגה מסוים, הוא עובר למצב התצוגה הבא בשרשרת.

חסרונות של המאפיין display

יש שלוש בעיות בגישה הזו של שרשרת גיבוי קבועה:

  • מפתח לא יכול לבקש את "minimal-ui" בלי שייאלץ לחזור למצב התצוגה "browser" אם "minimal-ui" לא נתמך בדפדפן מסוים.
  • למפתחים אין דרך לטפל בהבדלים בין דפדפנים שונים, למשל אם הדפדפן כולל או לא כולל הכפתור "הקודם" בחלון למצב "standalone".
  • במצב הנוכחי אי אפשר להוסיף מצבי תצוגה חדשים שתואמים לדורות קודמים, כי למצבים כמו מצב אפליקציה עם כרטיסיות אין מקום טבעי בשרשרת הגיבוי.

הנכס display_override

הבעיות האלה נפתרות באמצעות המאפיין display_override, שהדפדפן מתייחס אליו לפני המאפיין display. הערך שלה הוא רצף של מחרוזות שנחשבות לפי הסדר, ומצב התצוגה הנתמך הראשון מוחל. אם אף אחת מהן לא נתמכת, הדפדפן חוזר להערכת השדה display.

בדוגמה הבאה, שרשרת הגיבוי של מצב התצוגה תהיה כזו: (הפרטים של "window-controls-overlay" לא רלוונטיים למאמר הזה).

  1. "window-controls-overlay" (קודם, כדאי לעיין בdisplay_override.)
  2. "minimal-ui"
  3. "standalone" (כשממצים את display_override, מעריכים את display.)
  4. ‫"minimal-ui" (Finally, use the display fallback chain.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

כדי לשמור על תאימות לדורות קודמים, כל מצב תצוגה עתידי יתקבל רק כערך של display_override, אבל לא של display. דפדפנים שלא תומכים ב-display_override עוברים לנכס display ומתעלמים מ-display_override כנכס לא ידוע של קובץ מניפסט של אפליקציה.

תודות

המאפיין display_override הוגדר באופן רשמי על ידי דניאל מרפי.