רישום 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. לכן, צריך להפעיל את השיטה באתרים באופן הבא: navigator.registerProtocolHandler(scheme, url). שני הפרמטרים מוגדרים כך:

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

הסכימה צריכה להיות אחת מהסכמות שמופיעות ברשימת ההיתרים (לדוגמה, mailto,‏ bitcoin או magnet) או להתחיל ב-web+, ולאחר הסיומת web+ צריכות להופיע לפחות אות אחת או יותר באותיות קטנות של ASCII, לדוגמה, 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.

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

המנגנון הנוכחי של רישום handlers של פרוטוקול כתובת 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"
    }
  ]
}

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

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

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

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

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

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

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

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

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

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

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

הדגמה (דמו)

הדגמה של רישום handlers של פרוטוקול כתובת 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 עם ה-hashtag #ProtocolHandler ולספר לנו איפה ואיך אתם משתמשים בו.

תודות

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