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

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

Thomas Steiner

מהן אפליקציות PWA כמפעילי כתובות URL?

נניח שאתם משוחחים בצ'אט עם חבר באמצעות אפליקציה להעברת הודעות מיידיות, כמו 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 Handlers, אפליקציות כמו music.example.com יכולות לרשום את עצמן כ-URL Handlers לכתובות 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 בתוך ההיקף ומחוץ להיקף.

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

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

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

איך להשתמש באפליקציות PWA כרכיבי Handler של כתובות URL

הפעלה דרך about://flags

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

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

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

בקטע הבא של מניפסט לאפליקציית אינטרנט אפשר לראות איך אפשר להגדיר את זה בדוגמה של ה-PWA של המוזיקה מהפסקה המקדימה. הערך השני עם התו הכללי ("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"
    }
  ]
}

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

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

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

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

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

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

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

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

מתי מתרחשת התאמה של כתובת 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/ ברמה הבסיסית (root) של האפליקציה. כדי שהפעולה הזו תפעל, שם הקובץ צריך להיות 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. האימייל או הודעת הטקסט צריכים להכיל את אחד הקישורים https://mandymsft.github.io או https://luhuangmsft.github.io. שני הקישורים אמורים להיפתח באפליקציית ה-PWA המותקנת.

אפליקציית Windows Skype ל-Instant Messenger לצד הדמו של אפליקציית ה-PWA המותקנת, שנפתחת במצב עצמאי אחרי שלוחצים על קישור שהיא מטפלת בו בהודעת צ'אט ב-Skype.

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

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

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

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

שקיפות

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

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

התמדת ההרשאות

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

משוב

צוות Chromium רוצה לשמוע על החוויה שלך באפליקציות PWA כרכיבי Handler של כתובות URL.

מתארים את עיצוב ה-API

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

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

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

תמיכה ב-API

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

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

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

תודות

התכונה 'אפליקציות PWA כמפעילי כתובות URL' הוגדרה והוטמעה על ידי Lu Huang ו-Mandy Chen מצוות Microsoft Edge. המאמר הזה נבדק על ידי Joe Medley. תמונה ראשית (Hero) של Bryson Hammer ב-Unsplash.