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

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

Thomas Steiner

מניפסט של אפליקציית אינטרנט הוא קובץ JSON שמספר לדפדפן על אפליקציית האינטרנט המתקדמת (PWA) ואיך היא אמורה להתנהג כשהיא מותקנת במחשב או במכשיר הנייד של המשתמש. באמצעות הנכס 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" (לבסוף, משתמשים בשרשרת הגיבוי display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

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

אימות חתימות

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