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

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

Thomas Steiner

מהן אפליקציות PWA כרכיבי handler של כתובות 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 כרכיבי Handler של כתובות URL מאפשרות לאפליקציות כמו music.example.com לרשום את עצמן כרכיבי handler של כתובות URL של כתובות URL שתואמות לתבניות כמו https://music.example.com, https://*.music.example.com או https://🎵.example.com, כך שקישורים מחוץ ל-PWA, למשל, מאפליקציה מיידית להעברת הודעות מיידיות או מלקוח אימייל, ייפתחו באפליקציית ה-PWA שמותקנת במקום בכרטיסייה בדפדפן.

ל-PWA כרכיבי Handler של כתובות URL יש שתי תוספות:

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

תרחישים לדוגמה מומלצים לאפליקציות PWA כרכיבי handler של כתובות URL

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

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

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

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

כדי להתנסות באפליקציות PWA כרכיבי handler של כתובות 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 כרכיבי Handler של כתובות URL, חשוב להגדיר את דגל הדפדפן כפי שמתואר למעלה, ואז להתקין את ה-PWA בכתובת https://mandymsft.github.io/pwa/. עיון במניפסט של אפליקציית האינטרנט מראה שהוא מטפל בכתובות URL עם דפוסי כתובות ה-URL הבאים: https://mandymsft.github.io ו-https://luhuangmsft.github.io. מכיוון שה-PWA השנייה היא במקור שונה (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 ליד אפליקציית ההדגמה של PWA שמותקנת, שנפתחת במצב עצמאי אחרי לחיצה על קישור שמטופל בהודעת הצ'אט של Skype.

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

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

בקרת משתמשים

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

שקיפות

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

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

שמירת הרשאה

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

משוב

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

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

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

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

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

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

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

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

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

אישורים

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