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

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

Thomas Steiner

הערה: מצב אפליקציות בכרטיסיות הוא חלק מפרויקט היכולות והוא שוחרר ב-ChromeOS.

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

אפליקציות Progressive Web App יכולות לפעול במצב תצוגה שונה, בהתאם למאפיין 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. הפעלה	הושלם (ChromeOS)

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

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

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

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

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

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

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

המאפיין "home_tab" באובייקט "tab_strip" מכיל מידע על 'כרטיסיית בית' מיוחדת שנועדה לשמש בתור התפריט ברמה העליונה של האפליקציה. הוא מכיל את המשתנה הבא:

• "scope_patterns": המאפיין "scope_patterns" הוא רשימה של תבניות URL שמגדירות את היקף הכרטיסייה 'דף הבית' ביחס לכתובת ה-URL של המניפסט.

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

המאפיין "new_tab_button" באובייקט "tab_strip" מתאר את ההתנהגות של תכונה בממשק המשתמש (כמו לחצן) שבהקלקה או בהפעלה שלה נפתח הקשר חדש של האפליקציה בחלון האפליקציה. הוא כולל את החבר הבא:

• "url": המאפיין "url" הוא מחרוזת שמייצגת כתובת URL ביחס לכתובת ה-URL של המניפסט שנמצאת בהיקף של המניפסט המעובד.

לאפליקציה יש לחצן לכרטיסייה חדשה אם המאפיין "url" של new_tab_button במניפסט המעובד נמצא מחוץ להיקף הכרטיסייה'דף הבית'. אם לאפליקציה אין לחצן לכרטיסייה חדשה, הדפדפן לא מאפשר למשתמש להשתמש באפשרות 'כרטיסייה חדשה'.

דוגמה מלאה

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

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

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

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

הדגמה (דמו)

אתם יכולים לנסות את התכונה 'כרטיסיות באפליקציות' ב-ChromeOS:

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

משוב

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

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

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

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

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

תמיכה ב-API

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

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

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

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

תודות

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