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

החל מ-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 worker), כל סוג של מכשיר, אחסון מקומי והרשאות בין מקורות. בנוסף, בניווט בין מקורות ב-PWA עצמאי מוצג ממשק משתמש של חלון (הסרגל 'לא בהיקף'), שמציין שהמשתמש יצא מחוויית ה-PWA. במאמרים Progressive Web Apps באתרים מרובי-מקורות ו-בניית מספר אפליקציות מסוג Progressive Web App באותו דומיין מוסבר איך לפתור חלק מהבעיות האלה.

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

שערים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

משוב

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

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

אישורים

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