שיתוף פשוט יותר בנייד ובמחשב בעזרת Web Share Target API
בנייד או במחשב, השיתוף צריך להיות פשוט כמו לחיצה על הלחצן שיתוף, בחירת אפליקציה ובחירת עם מי לשתף. לדוגמה, ייתכן שתרצו לשתף מאמר מעניין על ידי שליחתו באימייל לחברים או על ידי פרסום שלו בציוץ לכולם.
בעבר, רק אפליקציות ספציפיות לפלטפורמה יכלו להירשם במערכת ההפעלה כדי לקבל שיתופים מאפליקציות מותקנות אחרות. אבל עם Web Share Target API, אפליקציות אינטרנט שהותקנו יכולות להירשם במערכת ההפעלה הבסיסית כיעד לשיתוף כדי לקבל תוכן משותף.
הצגת היעד של שיתוף האינטרנט בפעולה
- ב-Chrome מגרסה 76 ואילך ל-Android או ב-Chrome 89 ואילך במחשב, פותחים את ההדגמה של יעד שיתוף האינטרנט.
- כשמופיעה בקשה, לחצו על התקנה כדי להוסיף את האפליקציה למסך הבית או השתמשו בתפריט Chrome כדי להוסיף אותה למסך הבית.
- פתחו אפליקציה כלשהי שתומכת בשיתוף או השתמשו בלחצן השיתוף באפליקציית ההדגמה.
- בבוחר היעדים, בוחרים באפשרות בדיקת שיתוף באינטרנט.
לאחר השיתוף, אתם אמורים לראות את כל המידע ששיתפתם באפליקציית האינטרנט של יעד השיתוף באינטרנט.
רישום האפליקציה שלך כיעד לשיתוף
כדי לרשום את האפליקציה כיעד לשיתוף, היא צריכה לעמוד בקריטריונים של 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 נתמך כמתואר בהמשך:
בכל הפלטפורמות, צריך להתקין את אפליקציית האינטרנט שלכם כדי שהיא תופיע כיעד פוטנציאלי לקבלת נתונים משותפים.
אפליקציות לדוגמה
הבעת תמיכה ב-API
האם בכוונתך להשתמש ב-Web Share Target API? התמיכה הציבורית שלכם עוזרת לצוות של Chromium לתעדף תכונות, ומראה לספקי דפדפנים אחרים עד כמה חיוני לספק תמיכה בתכונות האלה.
שלח ציוץ אל @ChromiumDev באמצעות ה-hashtag
#WebShareTarget
וספר לנו איפה אתם משתמשים בו ואיך אתם משתמשים בו.