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

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

Demián Renzulli
Demián Renzulli
X GitHub
Thomas Steiner

סקירה כללית

לחלק מאפליקציות האינטרנט יש כמה מקורות. לדוגמה, example.com כאפליקציה הראשית, ואז space_1.example.com, …, space_n.example.com, לפעמים בשילוב עם special-example.com, כחוויות משנה, והכול במסגרת האפליקציה הראשית. לארכיטקטורה כזו של אתר יש השלכות בהקשר של Progressive Web Apps. ההגבלות כוללות את אי היכולת לשתף service workers, כל סוג של מכשיר, אחסון מקומי והרשאות בין מקורות. בנוסף, כשמשתמשים באפליקציית PWA עצמאית ומנווטים בין מקורות שונים, מוצג ממשק משתמש של חלון (סרגל 'מחוץ לתחום') שמציין שהמשתמש יצא מחוויית השימוש באפליקציית ה-PWA. במאמרים Progressive Web Apps in multi-origin sites ו-Building multiple Progressive Web Apps on the same domain מוסבר איך לעקוף חלק מהבעיות האלה.

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

יעדים

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

תרשים שמציג אפליקציית PWA ראשית וחוויות משנה שמשויכות אליה.

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

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

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

ניווט חוצה-דומיינים במסגרת

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

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

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

בעזרת Scope Extensions, ממשק המשתמש של החלון לא יוצג כשהמשתמשים יעברו לאף אחד מהמקורות המשויכים, כך ש-PWA יוצג כחוויה מאוחדת.

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

הנחיה בסרגל הכתובות לגבי PWA מותקן.

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

אם משתמש לוחץ על קישור שנמצא מחוץ להיקף של ה-PWA (כולל קישורים לתת-דומיינים או לדומיינים ברמה העליונה), הוא לא יזוהה כמשתמש ששייך ל-PWA. לדוגמה, קישורים ייפתחו בכרטיסיית דפדפן בלי שתוצג למשתמש אינדיקציה לכך שיש אפליקציה שיכולה לטפל בקישור. ‫Scope Extensions 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 v115 ואילך).

בדיקת ניווט חוצה-דומיינים

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

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

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

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

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

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

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

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

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

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

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

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

הנחיה בסרגל הכתובות לגבי PWA מותקן עם היקף נרחב.

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

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

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

משוב

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

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

תודות

תודה מיוחדת לצוות שאחראי לפיתוח ה-API הזה. ההגדרה של Scope Extensions נעשתה על ידי Alan Cutter וLu Huang, עם תובנות מMatt Giuca. ממשקי ה-API הוטמעו על ידי Alan Cutter מ-Google Chrome ועל ידי Hassan Talat,‏ Kristin Lee ו-Lu Huang מ-Microsoft Edge.