מצב אפליקציה שמופיע בכרטיסיות עבור אפליקציות PWA

אפשר לעבוד על מספר מסמכים בו-זמנית באמצעות כרטיסיות ב-Progressive Web App

Thomas Steiner

בעולם המחשוב, המטאפורה של המחשב היא מטאפורה של ממשק שמורכבת מרצף של מושגים שמאחדים ממשקי משתמש גרפיים (GUI) שעוזרים למשתמשים לקיים אינטראקציה עם המחשב בקלות רבה יותר. בהתאם למטאפורה של המחשב, הפורמט של כרטיסיות ה-GUI מבוסס על כרטיסיות כרטיסים רגילות שמוכנסות לספרים, בקובצי נייר או באינדקסים של כרטיסים. ממשק מסמך עם טאב (TDI) הוא רכיב בקרה גרפי שמאפשר לכלול מספר מסמכים או חלוניות בחלון אחד, באמצעות כרטיסיות כווידג'ט ניווט למעבר בין קבוצות מסמכים.

אפליקציות מסוג Progressive Web Apps יכולות לפעול במצבי תצוגה שונים, שנקבעים לפי המאפיין display בקובץ המניפסט של אפליקציית האינטרנט. לדוגמה: fullscreen, standalone, minimal-ui ו-browser. מצבי התצוגה האלה פועלים לפי שרשרת גיבוי מוגדרת היטב ("fullscreen" ← "standalone" ← "minimal-ui" ← "browser"). אם הדפדפן לא תומך במצב נתון, הוא חוזר למצב התצוגה הבא בשרשרת. באמצעות הנכס "display_override", המפתחים יכולים לציין שרשרת חלופית משלהם אם הם צריכים.

מהו מצב אפליקציה עם כרטיסיות

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

תרחישי שימוש מוצעים למצב יישום עם כרטיסיות

דוגמאות לאתרים שעשויים להשתמש במצב יישום בכרטיסיות:

  • אפליקציות לפרודוקטיביות שמאפשרות למשתמש לערוך יותר ממסמך אחד (או קובץ) בו-זמנית.
  • אפליקציות תקשורת שמאפשרות למשתמשים לנהל שיחות בחדרים שונים בכל כרטיסייה.
  • קריאת אפליקציות שפותחים קישורים לכתבות בכרטיסיות חדשות בתוך האפליקציה.

הבדלים לכרטיסיות שפותחו על ידי המפתח

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

הבדלים לעומת "display": "browser"

לערך "display": "browser" הנוכחי יש כבר משמעות ספציפית:

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

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

הגדרה של "display": "browser" היא הדרך האפקטיבית לבטל את ההסכמה להוספה לחלון של אפליקציה.

הסטטוס הנוכחי

שלב סטטוס
1. יצירת הסבר הסתיים
2. יצירת טיוטה ראשונית של מפרט לא התחיל
3. אוספים משוב וחוזרים על העיצוב בתהליך
4. גרסת מקור לניסיון בתהליך
5. הפעלה לא התחיל

שימוש במצב יישום עם כרטיסיות

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

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

בשלב הבא אפשר להשתמש במאפיין "tab_strip" כדי לשפר את ההתנהגות של הכרטיסייה. יש בו שני נכסי משנה מותרים, "home_tab" ו-"new_tab_button". אם המאפיין "tab_strip" לא נמצא, המערכת משתמשת בערכי "auto" של המאפיינים הספציפיים. הדפדפן קובע באילו ערכים להשתמש עבור "auto".

הכרטיסייה 'דף הבית'

כרטיסיית הבית היא כרטיסייה מוצמדת, שאם היא מופעלת באפליקציה מסוימת, היא תמיד צריכה להיות מוצגת כשהאפליקציה פתוחה. אסור לנווט לכרטיסייה הזו אף פעם. קישורים שנלחצות מהכרטיסייה הזו אמורים להיפתח בכרטיסייה חדשה באפליקציה. האפליקציות יכולות לבחור להתאים אישית את כתובת ה-URL שאליה הכרטיסייה הזו נעולה ואת הסמל שמוצג בכרטיסייה.

הערכים המותרים עבור "home_tab" הם:

  • "auto" כדי לאפשר לדפדפן לקבוע מה לעשות.
  • "absent" כדי להורות לדפדפן לא להציג את כרטיסיית דף הבית.
  • אובייקט עם שני מאפייני משנה:
    • "url" עם הערכים המותרים של "auto" או כתובת URL שמובילה לכרטיסיית דף הבית.
    • "icons" עם הערכים המותרים של "auto" או מערך של סמלים כמו במאפיין "icons" הראשי.

הלחצן 'כרטיסייה חדשה'

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

הערכים המותרים עבור "new_tab_button" הם:

  • "auto" כדי לאפשר לדפדפן לקבוע מה לעשות.
  • "absent" כדי להורות לדפדפן לא להציג לחצן 'כרטיסייה חדשה'.
  • אובייקט עם שני מאפייני משנה:
    • "url" עם הערכים המותרים של "auto" או כתובת URL בהיקף שבו אפשר לפתוח כרטיסיות חדשות.
    • "icons" עם הערכים המותרים של "auto" או מערך של סמלים כמו במאפיין "icons" הראשי.

דוגמה מלאה

דוגמה מלאה להגדרת ההתנהגות של אפליקציה בממשק עם כרטיסיות יכולה להיראות כך:

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

זיהוי מצב אפליקציה עם כרטיסיות

אפליקציות יכולות לזהות אם הן פועלות במצב אפליקציה עם כרטיסיות על ידי בדיקת תכונת המדיה של CSS display-mode ב-CSS או ב-JavaScript:

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

אינטראקציה עם ממשק ה-API של Handler בהשקה

הממשק של Handler API מאפשר לאתרים להפנות את האפליקציות לחלונות קיימים של אפליקציה, כדי למנוע פתיחה של חלונות כפולים. כשאפליקציה עם כרטיסייה מגדירה את הערך "client_mode": "navigate-new", השקת האפליקציה תפתח כרטיסייה חדשה בחלון אפליקציה קיים.

הדגמה (דמו)

אפשר לנסות את מצב האפליקציה עם כרטיסיות על ידי הגדרת התכונה הניסיונית של הדפדפן:

  1. מגדירים את הדגל #enable-desktop-pwas-tab-strip.
  2. מתקינים את האפליקציה tabbed-Application-mode.glitch.me (קוד מקור).
  3. לוחצים על הקישורים השונים בכרטיסיות השונות.

צילום מסך של הדגמה של מצב האפליקציה עם טאבים ב-tabbed-Application-mode.glitch.me.

משוב

צוות Chrome רוצה לשמוע על החוויה שלך במצב של אפליקציות עם כרטיסיות.

לספר לנו על עיצוב ה-API

האם יש משהו במצב היישום עם כרטיסיות שלא פועל כצפוי? להגיב על הבעיה בקובץ המניפסט של אפליקציית האינטרנט שיצרנו.

דיווח על בעיה בהטמעה

האם מצאת באג בהטמעה של Chrome? אפשר לדווח על באג בכתובת new.crbug.com. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור, ולהזין UI>Browser>WebAppInstalls בתיבה Components (רכיבים). גליץ' מתאים במיוחד לשיתוף של בקשות שכפול מהירות וקלות.

הבעת תמיכה ב-API

האם בכוונתך להשתמש במצב יישום עם כרטיסיות? התמיכה הציבורית שלכם עוזרת לצוות של Chrome לתעדף תכונות, ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהן.

שלח ציוץ אל @ChromiumDev באמצעות ה-hashtag #TabbedApplicationMode וספר לנו איפה אתם משתמשים בו ואיך אתם משתמשים בו.

אישורים

מאט ג'יוקה בחן את מצב האפליקציה עם כרטיסיות. ההטמעה הניסיונית ב-Chrome הייתה עבודתו של אלן קאטר. המאמר הזה נקרא על ידי Joe Medley. תמונה ראשית (Hero) מאת טיל נירמן ב-Wikimedia Commons.