רישום handlers של פרוטוקול כתובת URL ל-PWA

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

Thomas Steiner

רקע על סכמות (נקראות גם פרוטוקולים)

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

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

המונח Uniform Resource Locator (כתובת URL) מתייחס לקבוצת המשנה של מזהי URI, שבנוסף לזיהוי המשאב, מספק אמצעי למיקום המשאב באמצעות תיאור מנגנון הגישה העיקרי שלו (למשל מיקום הרשת שלו).

רקע על השיטה registerProtocolHandler()

השיטה Navigator לתוכן מאובטח בלבד registerProtocolHandler() מאפשרת לאתרים לרשום את היכולת שלהם לפתוח או לטפל בסכימות מסוימות של כתובות URL. לכן, אתרים צריכים לקרוא ל-method באופן הבא: navigator.registerProtocolHandler(scheme, url). שני הפרמטרים מוגדרים כך:

  • scheme: מחרוזת שמכילה את הפרוטוקול שהאתר מעוניין לטפל בו.
  • url: מחרוזת שמכילה את כתובת ה-URL של הטיפול. כתובת ה-URL הזו חייבת לכלול את הערך %s, בתור placeholder שיוחליף בכתובת ה-URL המטופלת עם ההימלטה.

הסכימה חייבת להיות אחת מהסכימות שברשימה הבטוחה (למשל, mailto, bitcoin או magnet) או להתחיל ב-web+, ואחריה לפחות אחת או יותר מאותיות ASCII קטנות אחרי התחילית web+, למשל web+coffee.

כדי להבהיר את הנושא, הנה דוגמה קונקרטית של התהליך:

  1. המשתמש נכנס לאתר בכתובת https://coffeeshop.example.com/ שמבצע את הקריאה הבאה: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. בשלב מאוחר יותר, במהלך הביקור ב-https://randomsite.example.com/, המשתמש לוחץ על קישור כמו <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
  3. הפעולה הזו גורמת לדפדפן לנווט לכתובת ה-URL הבאה: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. לאחר מכן, מחרוזת החיפוש מפוענחת כתובת URL ותהיה ?type=web+coffee://latte-macchiato.

מהו הטיפול בפרוטוקול

המנגנון הנוכחי של רישום handler של פרוטוקולים של כתובות URL לאפליקציות PWA מיועד להציע רישום של handler פרוטוקולים כחלק מהתקנת PWA באמצעות המניפסט שלו. אחרי שמירצים PWA כ-handler של פרוטוקול, כשמשתמש לוחץ על היפר-קישור עם סכימה ספציפית כמו mailto‏, bitcoin או web+music מדפדפן או מאפליקציה ספציפית לפלטפורמה, ה-PWA המורשה נפתח ומקבל את כתובת ה-URL. חשוב לציין שלמעשה גם להרשמה המוצעת שמבוססת על המניפסט וגם ל-registerProtocolHandler() המסורתי יש תפקידים דומים מאוד, ועדיין יש אפשרות ליהנות מחוויית משתמש משלימה:

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

תרחישים לדוגמה

  • במעבד תמלילים מסוג PWA, המשתמש במסמך נתקל בקישור למצגת כמו web+presentations://deck2378465. כשהמשתמש לוחץ על הקישור, אפליקציית ה-PWA של המצגת נפתחת באופן אוטומטי בהיקף הנכון ומציגה את רצף השקופיות.
  • באפליקציית צ'אט ספציפית לפלטפורמה, המשתמש בהודעת צ'אט מקבל קישור לכתובת URL מסוג magnet. כשלוחצים על הקישור, מופעלת אפליקציית טורנט של PWA שמותקנת ומתחילה להוריד אותה.
  • למשתמש יש התקנה של PWA לסטרימינג של מוזיקה. כשחבר או חברה משתפים קישור לשיר כמו web+music://songid=1234&time=0:13 והמשתמש לוחץ עליו, אפליקציית ה-PWA של סטרימינג המוזיקה מופעלת באופן אוטומטי בחלון נפרד.

איך משתמשים ברישום handlers של פרוטוקול כתובת URL ל-PWA

ה-API לרישום של Handlers של פרוטוקול כתובת URL מבוסס על navigator.registerProtocolHandler(). רק הפעם המידע מועבר באופן דקלרטיבי דרך המניפסט של אפליקציית האינטרנט, בנכס חדש שנקרא "protocol_handlers" שמקבל מערך של אובייקטים עם שני המפתחות הנדרשים "protocol" ו-"url". קטע הקוד הבא מראה איך לרשום את web+tea ואת web+coffee. הערכים הם מחרוזות שמכילות את כתובת ה-URL של ה-handler עם placeholder הנדרש %s של כתובת ה-URL עם ה-escape.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

מספר אפליקציות שרשומות לאותו פרוטוקול

אם מספר אפליקציות רושמות את עצמן כרכיבי handler לאותה סכמה, לדוגמה, הפרוטוקול mailto, מערכת ההפעלה תציג למשתמש בורר ותאפשר לו להחליט באילו מה-handlers הרשומים להשתמש.

אותה אפליקציה נרשמת לכמה פרוטוקולים

אותה אפליקציה יכולה לרשום את עצמה לכמה פרוטוקולים, כפי שאפשר לראות בקטע הקוד שלמעלה.

עדכוני אפליקציה ורישום handler

הרישומים של הטיפולנים מסונכרנים עם גרסת המניפסט האחרונה שסופקה על ידי האפליקציה. יש שני מקרים:

  • עדכון שמוסיף מנהלים חדשים מפעיל רישום של מנהל (נפרד מהתקנת האפליקציה).
  • עדכון שמסיר מנהלים מפעיל ביטול רישום של מנהל (נפרד מהסרה של אפליקציה).

ניפוי באגים ברכיבי ה-handler של פרוטוקולים ב-DevTools

עוברים לקטע Protocol Handlers (מנהלי פרוטוקולים) באמצעות החלונית Application (אפליקציה) > Manifest (מניפסט). כאן תוכלו לראות ולבדוק את כל הפרוטוקולים הזמינים.

לדוגמה, אפשר להתקין את הדמו הזה של PWA. בקטע Protocol Handlers, מקלידים 'americano' ולוחצים על Test protocol כדי לפתוח את דף הקפה באפליקציית ה-PWA.

רכיבי handler של פרוטוקולים בחלונית Manifest

הדגמה (דמו)

אפשר לראות הדגמה של רישום handler של פרוטוקולים של כתובות URL עבור אפליקציות PWA ב-Glitch.

  1. עוברים אל https://protocol-handler.glitch.me/, מתקינים את ה-PWA וטוענים מחדש את האפליקציה אחרי ההתקנה. הדפדפן רשם עכשיו את ה-PWA כ-handler לפרוטוקול web+coffee במערכת ההפעלה.
  2. בחלון של אפליקציית ה-PWA המותקנת, לוחצים על הקישור https://protocol-handler-link.glitch.me/. תיפתח כרטיסייה חדשה בדפדפן עם שלושה קישורים. לוחצים על הראשון או השני (לאטה מקיאטו או אמריקן). עכשיו תופיע בקשה בדפדפן, שבה תתבקשו לאשר שהאפליקציה תהפוך ל-handler של הפרוטוקול web+coffee. אם תאשרו, אפליקציית ה-PWA תיפתח ותציג את הקפה שבחרתם.
  3. כדי להשוות לתהליך הרגיל שבו משתמשים ב-navigator.registerProtocolHandler(), לוחצים על הלחצן Register Protocol handler ב-PWA. לאחר מכן, בכרטיסייה של הדפדפן, לוחצים על הקישור השלישי (chai). גם במקרה הזה תוצג בקשה, אבל לאחר מכן אפליקציית ה-PWA תיפתח בכרטיסייה ולא בחלון דפדפן.
  4. שולחים לעצמכם הודעה באפליקציה ספציפית לפלטפורמה כמו Skype ב-Windows, עם קישור כמו <a href="web+coffee://americano">Americano</a> ולוחצים עליה. גרסת ה-PWA המותקנת אמורה להיפתח גם כן.

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

שיקולי אבטחה

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

ניסיונות ניווט שלא ביוזמת המשתמש

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

רשימת היתרים של פרוטוקולים

בדומה ל-registerProtocolHandler(), יש רשימת היתרים של פרוטוקולים שאפליקציות יכולות לרשום כדי לטפל בהם.

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

משוב

צוות Chromium רוצה לשמוע על הניסיון שלכם עם רישום של Handlers של פרוטוקול כתובת URL ל-PWAs.

תיאור של עיצוב ה-API

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

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

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

הצגת תמיכה ב-API

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

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

תודות

רישום ה-handler של פרוטוקולים של כתובות URL לאפליקציות PWA הוטמע וצוין על ידי Fabio Rocha, Diego González, Connor Moody ו-Samuel Tang מצוות Microsoft Edge. המאמר הזה נבדק על ידי Joe Medley ו-Fabio Rocha. תמונה ראשית (Hero) של JJ Ying ב-Unsplash.