רישום 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 של ה-handler. כתובת ה-URL הזו חייבת לכלול את %s כפלייסהולדר שיוחלף בכתובת ה-URL המטופלת עם תווי בריחה (escape).

הסכימה חייבת להיות אחת מהסכימות שברשימת ההיתרים (לדוגמה, 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.

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

המנגנון הנוכחי של רישום handlers של פרוטוקול כתובת URL ל-PWA מציע רישום של handlers של פרוטוקול כחלק מהתקנת 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 עם הפלייסהולדר הנדרש %s לכתובת ה-URL עם תווי בריחה (escape).

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

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

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

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

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

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

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

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

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

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

רכיבי handler של פרוטוקול בחלונית &quot;מניפסט&quot;

שיקולי אבטחה

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

ניסיונות ניווט שלא בוצעו על ידי המשתמש

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

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

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

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

משוב

צוות Chromium רוצה לשמוע על החוויות שלכם עם רישום handlers של פרוטוקול כתובת URL ל-PWA.

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

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

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

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

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

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

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

תודות

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