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

מהו צילום קישורים הצהרתיים?

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

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

מעבר להפעלת Handler API

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

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

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

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

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

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

הפעלת Handler API

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

  1. רשמו את האתר שלכם לגרסת המקור לניסיון של 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 בתיבה רכיבים. גליץ' הוא כלי מעולה לשיתוף גיבויים מהירים וקלים.

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

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

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

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

אישורים

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