קבלת נתונים משותפים באמצעות 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 לאתר שלה קובץ מניפסט של אפליקציה. הפעולה הזו מנחה את מערכת ההפעלה לכלול את האפליקציה בתור אפשרות בבורר Intent. הפרטים שמוסיפים למניפסט קובעים את הנתונים שהאפליקציה תקבל. יש שלושה תרחישים נפוצים של 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, לא שמוצג בדוגמה הזו, מציין את סוג הקידוד של הנתונים. ב-method "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 כנושא של email, כש-text ו-url משורשרים יחד בתור הגוף.
• אפליקציה של רשת חברתית יכולה לנסח פוסט חדש תוך התעלמות מ-title, באמצעות text כגוף ההודעה, והוספת url כקישור. אם text הוא חסר, האפליקציה עשויה להשתמש ב-url גם בגוף. אם url חסר, האפליקציה עשויה לסרוק את text כדי לחפש כתובת אתר ולהוסיף אותה כקישור.
• אפליקציה לשיתוף תמונות יכולה ליצור מצגת חדשה באמצעות title כותרת המצגת, text כתיאור ו-files כתמונות המצגת.
• אפליקציה להעברת הודעות טקסט יכולה לנסח הודעה חדשה באמצעות text וגם url משורשרים יחד ומשחררים את title.

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

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

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 event listener. מכאן אפשר להעביר את הנתונים בחזרה לחזית הדף באמצעות 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 ל-Scrapbook

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

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

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