תוספים להיקף אפליקציות אינטרנט

החל מגרסה 122 של Chrome, אפשר להירשם לגרסת המקור לניסיון של scope_extensions קובץ המניפסט של האפליקציה שמאפשר לאתרים ששולטים במספר תת-דומיינים דומיינים ברמה שתוצג כאפליקציית אינטרנט אחת. במסמך הזה מוסבר למה צוות Chrome מציג את התכונה הזו ומתי כדאי לכם להשתמש בה.

Demián Renzulli
Demián Renzulli
X GitHub תקלה
Thomas Steiner

סקירה כללית

לאפליקציות אינטרנט מסוימות יש origins, בשביל לדוגמה, example.com כאפליקציה הראשית, ואז space_1.example.com, ..., space_n.example.com, לפעמים יחד עם special-example.com, כמו חוויות משנה, והכול תחת קורת הגג של האפליקציה הראשית. סוג האתר הזה לארכיטקטורה יש השלכות בהקשר של Progressive Web Apps. המגבלות כוללות את העובדה שלא ניתן לשתף עובדי שירות, מכל סוג של מכשיר, אחסון מקומי והרשאות שונות של מקורות. כמו כן, ניווט בין מקורות ב- באפליקציית PWA עצמאית מוצג ממשק משתמש של חלון (העמודה 'מחוץ להיקף') שמציינת שהמשתמש יצא מחוויית השימוש ב-PWA. כאן אפשר ללמוד איך לעקוף חלק את הבעיות האלה במאמרים Progressive Web Apps באתרים עם כמה מקורות וגם יצירה של כמה Progressive Web Apps באותו דומיין.

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

יעדים

המטרה העיקרית של Scope extensions API היא לאפשר לאתרים מספר תת-דומיינים ודומיינים ברמה העליונה שיתנהגו כאפליקציית אינטרנט אחת רציפה כשמדובר בממשק משתמש של אפליקציית אינטרנט ובצילום קישורים. לדוגמה, הצבת האתר example.com שמתפרס על פני example.com.co.uk ו-support.example.com מתנהג כך: ככל האפשר באפליקציית אינטרנט אחת.

תרשים שמראה את ה-PWA הראשי ואת ממשקי המשנה שמשויכים אליו.

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

בפועל, פירוש הדבר הוא שני יעדים ספציפיים יותר:

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

ניווט ברמת ההרשאות ממקורות שונים

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

מחוץ לסרגל ההיקף בחלק העליון של PWA עצמאית.

'לא נכלל' הסרגל שמוצג ב-Chrome כשמשתמשים מנווטים בין מקורות שונים באפליקציית PWA עצמאית.

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

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

הודעה בכל סרגל כלים ל-PWA מותקנת.

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

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

הטמעה

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

הצהרה על רשימת המקורות המשויכים

להוסיף חבר מניפסט scope_extensions של אפליקציית האינטרנט למקור ה-PWA הראשי כדי לאפשר לאפליקציית האינטרנט להרחיב את ההיקף שלה למקורות אחרים.

מניפסט של אפליקציית אינטרנט (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

אישור השיוכים

כל אחד מהמקורות שמופיעים ברשימה מאשר את השיוך לאפליקציית האינטרנט באמצעות קובץ תצורה: /.well-known/web-app-origin-association. הקובץ הזה צריך לקבל את השם web-app-origin-association ולהציג מודעות במיקום המדויק הזה, זהו URI ידוע.

/.well-known/web-app-origin-association (המקור המשויך)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

הדגמה (דמו)

ההדגמה מורכבת משני אתרים:

כדי לבצע את הבדיקות הבאות, צריך להפעיל את דגל about://flags/#enable-desktop-pwas-scope-extensions (זמין החל מ- Chrome מגרסה 115 ואילך).

בדיקת הניווט בין מקורות

כתנאי מוקדם לבדיקות האלה, פותחים את PWA הראשית בדפדפן, צריך להתקין אותה בתור PWA ולפתוח אותו כדי להריץ אותו במצב עצמאי. אפליקציית ה-PWA מכילה קישורים origin בהיקף מורחב המקור לא בהיקף המורחב.

חלון ה-PWA הראשי עם קישורים בהיקף ובהיקף מורחב.

הדגמה של PWA עם קישורים למקור בהיקף המורחב והמקור לא מורחב היקף.

ניווט ברירת מחדל בין מקורות (לא בהיקף מורחב)

  1. לוחצים על הקישור למקור שאינו בהיקף מורחב. באפליקציית PWA במסך מלא.
  2. כתוצאה מכך, הניווט מתבצע ומוצג הסרגל מחוץ להיקף.

חלון ה-PWA הראשי עם הסרגל שחורג מההיקף, אחרי לחיצה על הקישור שלא נכלל בהיקף.

'לא נכלל' העמודה שמוצגת כברירת מחדל לניווט בין מקורות של PWA ב- במצב עצמאי.

ניווט בין מקורות עם תוספי היקף (בהיקף מורחב)

  1. חוזרים לדף הבית של ה-PWA.
  2. צריך ללחוץ על הקישור כדי המקור לא בהיקף המורחב.
  3. כברירת מחדל, הסטטוס 'לא נכלל' צריך להציג את העמודה, אבל בגלל ההיקף שיוך לתוספים, אבל לא.

חלון ה-PWA הראשי בלי הסרגל שחורג מההיקף אחרי לחיצה על הקישור להיקף המורחב.

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

  1. לפתוח ולהתקין את ה-PWA הראשית מכשיר ChromeOS.
  2. לוחצים על הקישור הבא: המקור המשויך.
  3. הקישור נפתח בכרטיסייה חדשה בדפדפן ומוצגת בקשה לפתוח אותו אפליקציית ה-PWA שמותקנת.

הודעה בכל הערוצים ל-PWA מותקנת עם היקף מורחב.

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

גרסת מקור לניסיון

כדי לבדוק את ה-API הזה באפליקציה שלכם בשטח תוכלו לעשות זאת באמצעות גרסת מקור לניסיון. גרסאות מקור לניסיון מאפשרות לך לנסות תכונות ניסיוניות עם המשתמשים שלך על ידי השגת אסימון לבדיקה שמקושר לדומיין שלך. לאחר מכן תוכלו לפרוס את האפליקציה לצפות שהוא יפעל בדפדפן שתומך בתכונה שאתם בודקים (בשלב זה הוא זמין ב-Chrome מגרסה 121 עד 126). כדי לקבל אסימון משלך להריץ גרסת מקור לניסיון, למלא את טופס הבקשה.

משוב

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

מקורות מידע נוספים

אישורים

תודה מיוחדת לצוות שאחראי לפיתוח ה-API הזה. תוספי היקף צוין על ידי אלן קאטר Lu Huang, עם קלט מ- מאט ג'וקה. ה-API הוטמע על ידי אלן קאטר מ-Google Chrome ו חסן טאלאט, קריסטין לי, וגם Lu Huang מ-Microsoft Edge.