מצב אפליקציה שמופיע בכרטיסיות עבור אפליקציות 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. הפעלה הושלם (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" member of the "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

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

הדגמה (דמו)

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

  1. מתקינים את האפליקציה Tabbed Application Mode (קוד מקור).
  2. לוחצים על הקישורים השונים בכרטיסיות השונות.

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

משוב

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

נשמח לקבל מידע על עיצוב ה-API

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

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

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

תמיכה ב-API

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

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

תודות

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