אפליקציות PWA כרכיבי handler של כתובות URL

אפליקציות אינטרנט מתקדמות (PWA) יכולות לטפל בכתובות URL כדי לספק חוויה משולבת יותר.

Thomas Steiner

אזהרה: אפליקציות אינטרנט פרוגרסיביות (PWA) בתור רכיבים לטיפול בכתובות URL היו חלק מפרויקט היכולות, והתמיכה באיבר המניפסט הניסיוני url_handlers הולכת ופוחתת. האיבר url_handlers במניפסט מוחלף באיבר החדש handle_links במניפסט, שעובר תהליך של סטנדרטיזציה והטמעה. handle_linksהסבר על

מה זה "אפליקציות אינטרנט מתקדמות (PWA) כ-URL handlers"?

דמיינו שאתם מתכתבים עם חבר באפליקציה להעברת הודעות מיידיות, כמו Messages ב-macOS, ואתם מדברים על מוזיקה. נניח גם ששניכם התקנתם את אפליקציית האינטרנט המתקדמת (PWA) של music.example.com במכשירים שלכם. אם אתם רוצים לשתף את הטראק האהוב עליכם עם חבר, אתם יכולים לשלוח לו קישור עומק כמו https://music.example.com/rick-astley/never-gonna-give-you-up. הקישור הזה די ארוך, ולכן יכול להיות שהמפתחים של music.example.com החליטו להוסיף קישור קצר לכל טראק, למשל https://🎵.example.com/r-a/n-g-g-y-u.

התכונה "אפליקציות אינטרנט מתקדמות (PWA) כמטפלים בכתובות URL" מאפשרת לאפליקציות כמו music.example.com לרשום את עצמן כמטפלים בכתובות URL שתואמות לתבניות כמו https://music.example.com,‏ https://*.music.example.com או https://🎵.example.com, כדי שקישורים מחוץ ל-PWA, למשל מאפליקציה להעברת הודעות מיידיות או מתוכנת אימייל, ייפתחו ב-PWA המותקנת ולא בכרטיסייה בדפדפן.

התכונה "אפליקציות אינטרנט פרוגרסיביות (PWA) כמטפלים בכתובות URL" כוללת שתי תוספות:

1. האיבר "url_handlers" במניפסט של אפליקציית האינטרנט.
2. פורמט הקובץ web-app-origin-association לאימות שיוכים של כתובות URL שנכללות ולא נכללות בהיקף.

תרחישים לדוגמה לשימוש ב-PWA כ-URL Handler

דוגמאות לאתרים שעשויים להשתמש ב-API הזה:

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

איך משתמשים באפליקציות אינטרנט פרוגרסיביות (PWA) כ-URL Handlers

הפעלה באמצעות about://flags

כדי להתנסות ב-PWAs כ-URL Handlers באופן מקומי, בלי טוקן של גרסת מקור לניסיון, מפעילים את הדגל #enable-desktop-pwas-url-handling ב-about://flags.

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

האיבר "url_handlers" בקובץ מניפסט של אפליקציה

כדי לשייך אפליקציית PWA מותקנת לתבניות של כתובות URL, צריך לציין את התבניות האלה במניפסט של אפליקציית האינטרנט. התהליך הזה מתבצע דרך החבר ב-"url_handlers". הוא מקבל מערך של אובייקטים עם מאפיין origin, שהוא string חובה שמהווה תבנית להתאמת מקורות. התבניות האלה יכולות לכלול תחילית של תו כללי לחיפוש (*) כדי לכלול כמה תת-דומיינים (כמו https://*.example.com). כתובות URL שתואמות למקורות האלה יכולות להיות מטופלות על ידי אפליקציית האינטרנט הזו. הסכימה תמיד נחשבת כ-https://, אבל צריך לציין אותה באופן מפורש.

הקטע הבא ממניפסט של אפליקציית אינטרנט מראה איך אפשר להגדיר את זה בדוגמה של אפליקציית המוזיקה מהפסקה הראשונה. הרשומה השנייה עם התו הכללי לחיפוש ("https://*.music.example.com") מבטיחה שהאפליקציה תופעל גם עבור https://www.music.example.com או דוגמאות פוטנציאליות אחרות כמו https://marketing-activity.music.example.com.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

הערה: כשמחוברים לאינטרנט, קישורים קצרים מ-https://🎵.example.com בדרך כלל מופנים אל https://music.example.com. הפניה אוטומטית כזו היא לא חלופה טובה בתרחישים של מצב אופליין. לכן, האפליקציה צריכה להירשם לשני המקורות.

הקובץ web-app-origin-association

מכיוון שה-PWA נמצא במקור שונה (music.example.com) מחלק מכתובות ה-URL שהוא צריך לטפל בהן (למשל, https://🎵.example.com), האפליקציה צריכה לאמת את הבעלות על המקורות האחרים האלה. זה קורה בקובץ web-app-origin-association שמתארח במקורות האחרים.

הערה: אפליקציות שרוצות לטפל בכתובות URL שנמצאות באותו מקור כמו אפליקציית ה-PWA צריכות גם לציין את כללי הטיפול בקובץ web-app-origin-association שמתארח במקור הזה.

הקובץ הזה חייב להכיל JSON תקין. המבנה ברמה העליונה הוא אובייקט, עם איבר בשם "web_apps". האיבר הזה הוא מערך של אובייקטים, וכל אובייקט מייצג רשומה של אפליקציית אינטרנט ייחודית. כל אובייקט מכיל:

שדה	תיאור	סוג	ברירת מחדל
"manifest"	(חובה) מחרוזת כתובת ה-URL של המניפסט של אפליקציית האינטרנט של ה-PWA המשויכת	string	לא רלוונטי
"details"	(אופציונלי) אובייקט שמכיל מערכים של תבניות URL שנכללות ומוחרגות	object	לא רלוונטי

כל אובייקט "details" מכיל:

שדה	תיאור	סוג	ברירת מחדל
"paths"	(אופציונלי) מערך של מחרוזות נתיבים מותרות	string[]	[]
"exclude_paths"	(אופציונלי) מערך של מחרוזות נתיבים אסורים	string[]	[]

בהמשך מוצג קובץ web-app-origin-association לדוגמה של אפליקציית המוזיקה מהדוגמה שלמעלה. הוא יתארח במקור 🎵.example.com ויקשר אותו ל-PWA של music.example.com, שמזוהה לפי כתובת ה-URL של קובץ המניפסט של אפליקציית האינטרנט.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

הערה: הקובץ web-app-origin-association דומה לקובץ הדומיין המשויך של Apple, לקובץ assetlinks.json של Android ולקובץ windows-app-web-link של Windows. ההבדל הוא שבקובץ web-app-origin-association אין הפניה לאפליקציות PWA באמצעות מזהה אפליקציה ספציפי לפלטפורמה, אלא באמצעות כתובת ה-URL של קובץ המניפסט של אפליקציית האינטרנט.

מתי כתובת URL נחשבת כתואמת?

אפליקציית אינטרנט מתקדמת (PWA) תואמת לכתובת URL לטיפול אם שני התנאים הבאים מתקיימים:

• כתובת ה-URL תואמת לאחת ממחרוזות המקור במדיניות "url_handlers".
• הדפדפן יכול לאמת באמצעות קובץ web-app-origin-association המתאים שכל מקור מסכים לאפשר לאפליקציה הזו לטפל בכתובת URL כזו.

לגבי גילוי קבצים ב-web-app-origin-association

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

הדגמה (דמו)

כדי לבדוק אפליקציות PWA כ-URL Handlers, צריך להגדיר את הדגל של הדפדפן כמו שמתואר, ואז להתקין את ה-PWA בכתובת https://mandymsft.github.io/pwa/. בקובץ מניפסט של אפליקציית האינטרנט אפשר לראות שהיא מטפלת בכתובות URL עם תבניות ה-URL הבאות: https://mandymsft.github.io ו-https://luhuangmsft.github.io. מכיוון שהמקור של האתר השני (luhuangmsft.github.io) שונה מהמקור של ה-PWA, ה-PWA ב-mandymsft.github.io צריך להוכיח בעלות. ההוכחה מתבצעת באמצעות הקובץ web-app-origin-association שמתארח בכתובת https://luhuangmsft.github.io/.well-known/web-app-origin-association.

כדי לבדוק שהתכונה אכן פועלת, שלחו לעצמכם הודעת בדיקה באמצעות אפליקציית הודעות מיידיות לבחירתכם או אימייל שמוצג בתוכנת אימייל שלא מבוססת-אינטרנט, כמו Mail ב-macOS. הודעת האימייל או הודעת ה-SMS צריכה להכיל את אחד מהקישורים https://mandymsft.github.io או https://luhuangmsft.github.io. שניהם אמורים להיפתח באפליקציית ה-PWA המותקנת.

אבטחה והרשאות

צוות Chromium תכנן והטמיע את התכונה "אפליקציות אינטרנט פרוגרסיביות (PWA) כמטפלים בכתובות URL" לפי עקרונות הליבה שמוגדרים במאמר Controlling Access to Powerful Web Platform Features (שליטה בגישה לתכונות מתקדמות של פלטפורמת האינטרנט), כולל שליטה של המשתמש, שקיפות וארגונומיה.

שליטת משתמשים

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

שקיפות

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

אפליקציות ספציפיות לפלטפורמה כבר יכולות להשתמש בממשקי API של מערכת ההפעלה כדי למנות את האפליקציות שמותקנות במערכת של המשתמש. לדוגמה, אפליקציות ב-Windows יכולות להשתמש ב-API‏ FindAppUriHandlersAsync כדי למנות את ה-URL handlers. אם אפליקציות אינטרנט מתקדמות (PWA) רשומות כמטפלים בכתובות URL ברמת מערכת ההפעלה ב-Windows, הן יהיו גלויות לאפליקציות אחרות.

שמירת ההרשאות

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

משוב

צוות Chromium רוצה לשמוע על החוויות שלכם עם אפליקציות אינטרנט פרוגרסיביות (PWA) כמטפלים בכתובות URL.

ספרו לנו על עיצוב ה-API

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

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

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

הבעת תמיכה ב-API

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

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

קישורים שימושיים

• הסבר שגלוי לכולם
• הדגמה | מקור ההדגמה
• באג מעקב ב-Chromium
• רישום ב-ChromeStatus.com
• רכיב Blink: ‏UI>Browser>WebAppInstalls
• TAG Review
• המסמכים של מיקרוסופט

תודות

האפשרות להשתמש באפליקציות PWA כ-URL Handlers צוינה והוטמעה על ידי לו הואנג ומנדי צ'ן מצוות Microsoft Edge. המסמך הזה נבדק על ידי Joe Medley.