רישום 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+, ואחריה לפחות אות 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 בסטרימינג של מוזיקה יופעל אוטומטית בחלון נפרד.

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

המודל של ה-API לרישום handler של פרוטוקול כתובת 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

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

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

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

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

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

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

הדגמה (דמו)

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

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

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

שיקולי אבטחה

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

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

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

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

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

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

משוב

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

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

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

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

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

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

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

נשמח לדעת איך בכוונתך להשתמש בה בשרשור של WiCG ב-Wi-Fi. עליך לשלוח ציוץ לכתובת @ChromiumDev באמצעות ה-hashtag #ProtocolHandler ולהודיע לנו איפה ואיך אתם משתמשים בו.

אישורים

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