החל מגרסה 122 של Chrome, אפשר להירשם לגרסת המקור לניסיון של scope_extensions
קובץ המניפסט של האפליקציה שמאפשר לאתרים ששולטים במספר תת-דומיינים
דומיינים ברמה שתוצג כאפליקציית אינטרנט אחת. במסמך הזה מוסבר למה
צוות Chrome מציג את התכונה הזו ומתי כדאי לכם להשתמש בה.
סקירה כללית
לאפליקציות אינטרנט מסוימות יש
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. ב-Chrome, ממשק המשתמש הזה מורכב עמודה שמכילה את כתובת ה-URL של המקור החדש. הנתונים האלה פוגעים בחוויית המשתמש, כפי שהמשתמשים מצפים לראות ימשיכו לנווט באותו הקשר של האפליקציה, אבל הם עשויים להבחין הם יוצאים ממנו.
'לא נכלל' הסרגל שמוצג ב-Chrome כשמשתמשים מנווטים בין מקורות שונים באפליקציית PWA עצמאית.
כשמשתמשים בתוספי היקפים, ממשק המשתמש של החלון לא יוצג כשמשתמשים מנווטים של המקורות המשויכים כך ש-PWA תוצג כחוויה מאוחדת.
תיעוד קישורים ממקורות שונים
לכידת קישורים מתייחסת ליכולת של אפליקציה לקלוט קישורים בתוך היקף. צורת ההטמעה משתנה בין דפדפנים המערכות שלנו. לדוגמה, ב-Chrome ב-ChromeOS, קישורים שנכללים בהיקף של אפליקציה מותקנת כברירת מחדל, אפליקציית 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" }]
}
הדגמה (דמו)
ההדגמה מורכבת משני אתרים:
- PWA הראשית: ה-PWA בפועל
מצהירה על רשימת המקורות המשויכים דרך החבר
scope_extensions
במניפסט של אפליקציית האינטרנט. - המקור בהיקף מורחב:
מקור מחוץ להיקף של ה-PWA הראשי, אבל משויך אליו אחרי שהוא נרשם
על ידי ה-PWA הראשית כמקור משויך, ואישור הקשר
באמצעות
קובץ אחד (
web-app-origin-association
).
כדי לבצע את הבדיקות הבאות, צריך להפעיל את
דגל about://flags/#enable-desktop-pwas-scope-extensions
(זמין החל מ-
Chrome מגרסה 115 ואילך).
בדיקת הניווט בין מקורות
כתנאי מוקדם לבדיקות האלה, פותחים את PWA הראשית בדפדפן, צריך להתקין אותה בתור PWA ולפתוח אותו כדי להריץ אותו במצב עצמאי. אפליקציית ה-PWA מכילה קישורים origin בהיקף מורחב המקור לא בהיקף המורחב.
הדגמה של PWA עם קישורים למקור בהיקף המורחב והמקור לא מורחב היקף.
ניווט ברירת מחדל בין מקורות (לא בהיקף מורחב)
- לוחצים על הקישור למקור שאינו בהיקף מורחב. באפליקציית PWA במסך מלא.
- כתוצאה מכך, הניווט מתבצע ומוצג הסרגל מחוץ להיקף.
'לא נכלל' העמודה שמוצגת כברירת מחדל לניווט בין מקורות של PWA ב- במצב עצמאי.
ניווט בין מקורות עם תוספי היקף (בהיקף מורחב)
- חוזרים לדף הבית של ה-PWA.
- צריך ללחוץ על הקישור כדי המקור לא בהיקף המורחב.
- כברירת מחדל, הסטטוס 'לא נכלל' צריך להציג את העמודה, אבל בגלל ההיקף שיוך לתוספים, אבל לא.
'לא נכלל' הסרגל לא מוצג בניווט בין מקורות אחרי שיוך המקור נוצר באמצעות תוספי היקף.
בדיקה של לכידת קישור ממקורות שונים
- לפתוח ולהתקין את ה-PWA הראשית מכשיר ChromeOS.
- לוחצים על הקישור הבא: המקור המשויך.
- הקישור נפתח בכרטיסייה חדשה בדפדפן ומוצגת בקשה לפתוח אותו אפליקציית ה-PWA שמותקנת.
לחיצה על קישור למקור משויך של PWA פותחת את הקישור בכרטיסייה חדשה מציג את ההודעה 'פתיחה באפליקציה' סמל שמאפשר למשתמש להביע הסכמה לקישור אוטומטי לצילום וידאו.
גרסת מקור לניסיון
כדי לבדוק את ה-API הזה באפליקציה שלכם בשטח תוכלו לעשות זאת באמצעות גרסת מקור לניסיון. גרסאות מקור לניסיון מאפשרות לך לנסות תכונות ניסיוניות עם המשתמשים שלך על ידי השגת אסימון לבדיקה שמקושר לדומיין שלך. לאחר מכן תוכלו לפרוס את האפליקציה לצפות שהוא יפעל בדפדפן שתומך בתכונה שאתם בודקים (בשלב זה הוא זמין ב-Chrome מגרסה 121 עד 126). כדי לקבל אסימון משלך להריץ גרסת מקור לניסיון, למלא את טופס הבקשה.
משוב
צוות Chrome מבקש משוב לגבי התועלת של ה-API הזה. שפת תרגום עוזרים לצוות לפתח את ה-API הזה ולתת משוב על התועלת שלו תרחישים חדשים לדוגמה שלא נכללים בגרסה הנוכחית, פותחים בעיה ב-GitHub.
מקורות מידע נוספים
- API של תוספי היקף – גרסת מקור לניסיון
- סטטוס Chrome – תוספים להיקף אפליקציות אינטרנט
- הסבר על תוספי היקף הרשאות לאפליקציות אינטרנט
- הכוונה היא לניסוי
- מיקום הסטנדרטים של Mozilla
- מיקום הסטנדרטים של Apple
- באג ב-Chromium
- Progressive Web Apps באתרים עם כמה מקורות
- יצירה של כמה Progressive Web Apps באותו דומיין
אישורים
תודה מיוחדת לצוות שאחראי לפיתוח ה-API הזה. תוספי היקף צוין על ידי אלן קאטר Lu Huang, עם קלט מ- מאט ג'וקה. ה-API הוטמע על ידי אלן קאטר מ-Google Chrome ו חסן טאלאט, קריסטין לי, וגם Lu Huang מ-Microsoft Edge.