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

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

תומאס שטיינר
תומאס סטיינר
Twitter GitHub Glitch Mastodon דף הבית

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

נכס שימוש ב-
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 עוצב באופן רשמי על ידי דניאל מרפי.