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

עבודה על יותר ממסמך אחד בו-זמנית באמצעות כרטיסיות באפליקציית Progressive Web App

Thomas Steiner

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

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

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

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

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

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

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

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

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

ההבדלים ביחס ל-"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"
        }
      ]
    }
  }
}

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

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

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

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

אינטראקציה עם Launch Handler API

Launch 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. Glitch הוא כלי מצוין לשיתוף מקרים של שחזור מהיר וקל.

תמיכה ב-API

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

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

תודות

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