קבלת נתונים משותפים באמצעות Web Share Target API

שיתוף פשוט יותר בנייד ובמחשב בעזרת Web Share Target API

Pete LePage

Joe Medley

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

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

הצגת היעד של שיתוף האינטרנט בפעולה

1. ב-Chrome מגרסה 76 ואילך ל-Android או ב-Chrome 89 ואילך במחשב, פותחים את ההדגמה של יעד שיתוף האינטרנט.
2. כשמופיעה בקשה, לחצו על התקנה כדי להוסיף את האפליקציה למסך הבית או השתמשו בתפריט Chrome כדי להוסיף אותה למסך הבית.
3. פתחו אפליקציה כלשהי שתומכת בשיתוף או השתמשו בלחצן השיתוף באפליקציית ההדגמה.
4. בבוחר היעדים, בוחרים באפשרות בדיקת שיתוף באינטרנט.

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

רישום האפליקציה שלך כיעד לשיתוף

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

עדכון קובץ המניפסט של אפליקציית האינטרנט

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

• קבלת מידע בסיסי
• מאשר שינויים באפליקציות
• קבלת קבצים

קבלת מידע בסיסי

אם אפליקציית היעד מקבלת רק מידע בסיסי כמו נתונים, קישורים וטקסט, צריך להוסיף את הפרטים הבאים לקובץ manifest.json:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

אם לאפליקציה שלכם כבר יש סכמה של כתובת URL לשיתוף, אפשר להחליף את הערכים של params בפרמטרים הקיימים של השאילתה. לדוגמה, אם בסכימת כתובת ה-URL של השיתוף נעשה שימוש ב-body במקום ב-text, אפשר להחליף את "text": "text" ב-"text": "body".

אם לא ציינתם ערך, ערך ברירת המחדל של method הוא "GET". השדה enctype, שלא מוצג בדוגמה הזו, מציין את סוג הקידוד של הנתונים. עבור השיטה "GET", ברירת המחדל של enctype היא "application/x-www-form-urlencoded", והמערכת מתעלמת ממנה אם היא מוגדרת לערך אחר.

מאשר שינויים באפליקציות

אם הנתונים המשותפים משנים בצורה מסוימת את אפליקציית היעד – לדוגמה, שמירת סימנייה באפליקציית היעד – צריך להגדיר את הערך של method ל-"POST" ולכלול את השדה enctype. הדוגמה הבאה יוצרת סימנייה באפליקציית היעד, ולכן היא משתמשת ב-"POST" עבור method וב-"multipart/form-data" עבור enctype:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

קבלת קבצים

כמו במקרה של שינויים באפליקציות, כדי לקבל קבצים צריך method להיות "POST" ולהיות enctype. בנוסף, enctype חייב להיות "multipart/form-data" וצריך להוסיף רשומת files.

צריך גם להוסיף מערך files שמגדיר את סוגי הקבצים שהאפליקציה מקבלת. רכיבי המערך הם רשומות שמכילות שני איברים: שדה name והשדה accept. השדה accept מקבל סוג MIME, סיומת קובץ או מערך שמכיל את שניהם. מומלץ לספק מערך שכולל גם סוג MIME וגם סיומת קובץ, כי מערכות ההפעלה שונות זו מזו לפי ההעדפה שלהן.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

טיפול בתוכן הנכנס

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

• תוכנת אימייל יכולה ליצור טיוטה של אימייל חדש ולהשתמש ב-title כנושא של האימייל, כאשר text ו-url מחוברות יחד כגוף ההודעה.
• אפליקציה של רשת חברתית יכולה ליצור טיוטה של פוסט חדש, תוך התעלמות מ-title, שימוש ב-text כגוף ההודעה והוספה של url כקישור. אם השדה text חסר, יכול להיות שהאפליקציה תשתמש גם ב-url בגוף. אם הפרמטר url חסר, יכול להיות שהאפליקציה תסרוק text תחפש כתובת URL ותוסיף אותה כקישור.
• אפליקציה לשיתוף תמונות יכולה ליצור מצגת חדשה עם title בתור שם המצגת, text כתיאור ו-files כתמונות של המצגת.
• אפליקציה לשליחת הודעות טקסט יכולה ליצור טיוטה של הודעה חדשה באמצעות text ו-url יחד ומחברים את title.

עיבוד שיתופים ב-GET

אם המשתמש בחר את האפליקציה שלכם והשדה method הוא "GET" (ברירת המחדל), ייפתח חלון חדש בכתובת ה-URL של action. לאחר מכן הדפדפן יוצר מחרוזת שאילתה באמצעות הערכים בקידוד URL שצוינו במניפסט. לדוגמה, אם אפליקציית השיתוף מספקת את הערכים title ו-text, מחרוזת השאילתה היא ?title=hello&text=world. כדי לעבד את זה, צריך להשתמש ב-event listener של DOMContentLoaded בדף החזית ולנתח את מחרוזת השאילתה:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

חשוב להקפיד להשתמש ב-Service Worker כדי לשמור מראש את הדף action כדי שהוא ייטען במהירות ויפעל באופן מהימן, גם אם המשתמש במצב אופליין. Workbox הוא כלי שיכול לעזור לכם להטמיע טרום-מטמון ב-Service Worker.

מתבצע עיבוד של שיתופים של POST

אם method הוא "POST", כפי שקורה אם אפליקציית היעד מקבלת סימנייה שמורה או קבצים משותפים, הגוף של בקשת ה-POST הנכנסת מכיל את הנתונים שמועברים על ידי אפליקציית השיתוף, כשהם מקודדים באמצעות הערך enctype שסופק במניפסט.

אי אפשר לעבד את הנתונים האלה באופן ישיר בדף שבחזית. מאחר שהדף רואה את הנתונים כבקשה, הדף מעביר אותם ל-Service Worker, שם אפשר ליירט אותם באמצעות האזנה לאירועים מסוג fetch. מכאן תוכלו להעביר את הנתונים בחזרה לדף החזית באמצעות postMessage() או להעביר אותם לשרת:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

אימות של תוכן משותף

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

לדוגמה, ב-Android, השדה url יהיה ריק כי הוא לא נתמך במערכת השיתוף של Android. במקום זאת, כתובות URL יופיעו בדרך כלל בשדה text, או מדי פעם בשדה title.

תמיכת דפדפן

ה-Web Share Target API נתמך כמתואר בהמשך:

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

אפליקציות לדוגמה

• סקווש
• PWA של אוסף תמונות

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

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

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