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

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

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

כשמסמכים נמצאים בכרטיסיות נפרדות בדפדפן, יש בידכם בידוד משאבים בחינם, דבר שלא ניתן לעשות באינטרנט כיום. כמו כן, כרטיסיות שנוצרו על ידי מפתחים לא יתאימו למאות כרטיסיות כמו כרטיסיות בדפדפן. אפשרויות הדפדפן, כמו היסטוריית הניווט, "העתקת כתובת ה-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"
        }
      ]
    }
  }
}

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

אפליקציות יכולות לזהות אם הן פועלות במצב אפליקציה עם כרטיסיות באמצעות בדיקה של תכונת המדיה של 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 של מטפל ההפעלה

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

הדגמה (דמו)

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

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

משוב

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

תיאור של עיצוב ה-API

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

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

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

תמיכה ב-API

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

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

קישורים מועילים

• הסברים
• בעיה במפרט של מניפסט של אפליקציית אינטרנט
• באג ב-Chromium
• רכיב Blink: UI>Browser>WebAppInstalls

תודות

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