אפשר לבחור איך קישורים שנכללים בהיקף יפתחו את ה-PWA באמצעות צילום קישורים הצהרתיים

Thomas Steiner

מהי תיעוד קישורים באופן דקלרטיבי?

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

אבל זה הופך להיות מורכב יותר. מה קורה אם הקישור מופיע לא באתר, אלא בהודעת צ'אט שאתם מקבלים באחת מאפליקציות הצ'אט של Google? במערכות הפעלה למחשבים, שבהן יש חלונות נפרדים לאפליקציות, אם האפליקציה כבר פתוחה, האם צריך ליצור חלון או כרטיסייה חדשים לכל לחיצה על קישור? אם חושבים על זה, יש הרבה דרכים שבהן אפשר לתעד קישורים וניווטים, כולל, בין היתר:

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

בדרך כלל, תנאים מיוחדים מסוימים, כמו לחיצה בלחצן האמצעי על קישור (או לחיצה ימנית ואז 'פתיחה בכרטיסייה חדשה'), לא יפעילו את ההתנהגות של תיעוד הקישורים. לא משנה אם הקישור הוא target=_self או target=_blank, כך שקישורים שנלחצו בחלון דפדפן (או בחלון של אפליקציית PWA אחרת) ייפתחו ב-PWA גם אם הם יגרמו בדרך כלל לניווט באותה כרטיסייה.

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

דוגמאות לאתרים שעשויים להשתמש ב-API הזה:

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

הפעלה דרך about://flags

כדי להתנסות בתיעוד קישורים באופן דקלרטיבי באופן מקומי, בלי טוקן לניסיון מקור, מפעילים את הדגל #enable-desktop-pwas-link-capturing בקובץ about://flags.

איך משתמשים בתיעוד קישורים באופן דקלרטיבי?

מפתחים יכולים לקבוע באופן דקלרטיבי איך צריך לתעד קישורים באמצעות שדה המניפסט הנוסף של אפליקציות אינטרנט "capture_links". הערך שלו הוא מחרוזת או מערך של מחרוזות. אם מציינים מערך של מחרוזות, סוכן המשתמש בוחר את הפריט הנתמך הראשון ברשימה, ברירת המחדל היא "none". הערכים הבאים נתמכים:

  • "none" (ברירת המחדל): אין תיעוד של קישורים. קישורים שנלחצו עליהם שמוביל להיקף הזה של PWA מנווטים כרגיל בלי לפתוח חלון של PWA.
  • "new-client": כל קישור שנלחץ עליו פותח חלון PWA חדש בכתובת ה-URL הזו.
  • "existing-client-navigate": הקישור שנלחץ עליו ייפתח בחלון PWA קיים, אם יש כזה, או בחלון חדש, אם לא. אם יש יותר מחלון אחד של אפליקציה לנייד, הדפדפן עשוי לבחור חלון באופן שרירותי. הפקודה הזו פועלת כמו "new-client" אם אין חלון פתוח כרגע. 🚨 זהירות! האפשרות הזו עלולה להוביל לאובדן נתונים, כי אפשר לעבור לדפים אחרים באופן שרירותי. בעלי אתרים צריכים לדעת שהם מביעים הסכמה לפעולה כזו על ידי בחירה באפשרות הזו. האפשרות הזו מתאימה במיוחד לאתרים 'לקריאה בלבד' שלא שומרים נתוני משתמשים בזיכרון, כמו נגני מוזיקה. אם בדף שממנו המשתמש עובר יש אירוע beforeunload, ההנחיה תוצג למשתמש לפני שהניווט יושלם.

הדגמה (דמו)

הדגמה של תיעוד קישורים באופן דקלרטיבי מורכבת למעשה משתי הדגמות שמקיימות אינטראקציה זו עם זו:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

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

אבטחה והרשאות

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

מעבר ל-Launch Handler API

גרסת המקור לניסיון של Declarative Link Capturing API פגה בתוקף ב-30 במרץ 2022 ב-Chromium 97 וגרסאות ישנות יותר. הוא יוחלף בקבוצה של תכונות ו-API חדשים ב-Chromium 98 ואילך, כולל תיעוד קישורים שהמשתמשים מפעילים ו-Launch Handler API.

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

דוגמה להגדרה 'פתיחה באמצעות' של אפליקציה מותקנת, כשהאפשרות 'לזכור את הבחירה שלי' מופעלת.

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

דוגמה לדף ההגדרות של אפליקציה מותקנת.

בשלב הזה, התכונה 'צילום קישורים' זמינה רק ב-ChromeOS. אנחנו עובדים על תמיכה ב-Windows, ב-macOS וב-Linux.

Launch Handler API

השליטה בניווט נכנס עוברת אל Launch Handler API, שמאפשר לאפליקציות אינטרנט להחליט איך אפליקציית אינטרנט מופעלת במצבים שונים, כמו צילום קישורים, יעד שיתוף או טיפול בקבצים וכו'. כדי לעבור מ-Declarative Link Capturing API אל Launch Handler API:

  1. רושמים את האתר לתקופת הניסיון של Launch Handler במקור ומוסיפים את מפתח תקופת הניסיון במקור לאפליקציית האינטרנט.

  2. מוסיפים רשומה "launch_handler" למניפסט של האתר.

    • כדי להשתמש ב-"capture_links": "new-client", מוסיפים:"launch_handler": { "route_to": "new-client" }.
    • כדי להשתמש ב-"capture_links": "existing-client-navigate", מוסיפים: "launch_handler": { "route_to": "existing-client-navigate" }.
    • כדי להשתמש ב-"capture_links": "existing-client-event" (שלא הופעלה אף פעם בגרסת המקור של הניסוי בתיעוד קישורים באופן דקלרטיבי), מוסיפים:"launch_handler": { "route_to": "existing-client-retain" }. אם תבחרו באפשרות הזו, הדפים בהיקף האפליקציה שלכם לא ינווטו באופן אוטומטי כשיתועד ניווט בקישור. כדי להפעיל את הניווט, צריך לטפל ב-LaunchParams ב-JavaScript באמצעות קריאה ל-window.launchQueue.setConsumer().

השדה capture_links והרישום לגרסת המקור לניסיון של תיעוד קישורים באופן דקלרטיבי תקפים עד 30 במרץ 2022. כך המשתמשים ב-Chromium בגרסה 97 ואילך עדיין יוכלו להפעיל את אפליקציית האינטרנט דרך קישור שצולם.

פרטים נוספים זמינים במאמר שליטה באופן ההפעלה של האפליקציה.

משוב

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

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

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

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

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

תמיכה ב-API

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

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

קישורים שימושיים

תודות

Matt Giuca תיאר את התכונה 'תיעוד קישורים באופן דקלרטיבי', עם משוב מ-Alan Cutter ו-Dominick Ng. ה-API הוטמע על ידי Alan Cutter. הבדיקה של המאמר בוצעה על ידי ג'ו מדלי (Joe Medley), מאט ג'יוקה (Matt Giuca), אלן קאטר (Alan Cutter) ושוניה שישידו (Shunya Shishido). התמונה הראשית (Hero) היא של Zulmaury Saavedra ב-Unsplash.