רישום 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 בתור המטפל בפרוטוקול, כאשר משתמש לוחץ על היפר-קישור עם סכמה ספציפית כמו 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"
    }
  ]
}

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

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

רישום אפליקציה זהה בכמה פרוטוקולים

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

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

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

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

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

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

לדוגמה, מתקינים את ההדגמה הזו PWA. ב הקטע Protocol Handlers, מקלידים '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/. הפעולה הזו תגרור לפתוח כרטיסייה חדשה בדפדפן עם שלושה קישורים. לוחצים על הראשון או השני (לאטה מקיאטו אמריקה). הדפדפן יציג הודעה וישאל אם זה בסדר עם האפליקציה handler של פרוטוקול 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 בקטע רכיבים . Glitch היא אפשרות טובה לשיתוף תגובות מהירות וקלות.

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

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

תוכלו לשתף את האופן שבו אתם מתכננים להשתמש בו בשרשור השיחה של WICG. שליחת ציוץ אל @ChromiumDev משתמשים ב-hashtag #ProtocolHandler וספר לנו איפה אתה משתמש בו ובאיזה אופן.

אישורים

רישום handler של פרוטוקולי כתובת URL לאפליקציות PWA הוטמע וצוין על ידי פאביו רוצ'ה, דייגו גונזלס, קונור מודי, וגם Samuel Tang מצוות Microsoft Edge. המאמר הזה נבדק על ידי ג'ו מדלי ועל ידי פאביו רוצ'ה. תמונה ראשית (Hero) מאת JJ Ying ב-Unbounce.