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

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

Thomas Steiner

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

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

מצבי התצוגה האלה פועלים לפי שרשרת גיבוי מוגדרת היטב ("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 הוגדר באופן רשמי על ידי Daniel Murphy.