שילוב של אפליקציות PWA בממשקי משתמש מובנים לשיתוף באמצעות תיבת עבודה

איך להציג את ה-PWA לצד אפליקציות ספציפיות לפלטפורמה בממשקי משתמש לשיתוף ברמת המערכת

Jeff Posnick

Joe Medley

Sam Richard

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

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

באותו דף

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

הטמעה של פונקציונליות של יעד שיתוף באינטרנט כוללת שני חלקים. קודם כול, צריך לעדכן את מניפסט אפליקציית האינטרנט כדי לציין שרוצים שהאפליקציה תהיה יעד לשיתוף כשהיא מותקנת. בדוגמה הבאה, השיתופים מועברים לכתובת ה-URL‏ /share באמצעות בקשת POST. הוא מקודד כטופס multipart, כשהכותרת נקראת name, הטקסט נקרא description ותמונות ה-JPEG נקראות photos.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

יעדי שיתוף של קובץ שירות (service worker) באמצעות Workbox

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

כדי לעשות את זה ב-Workbox, צריך לרשום נתיב שמטופל על ידי קובץ השירות. מתחילים בייבוא של registerRoute מ-'workbox-routing'. שימו לב שהיא רשומה לנתיב /share, אותו נתיב שמופיע במניפסט של אפליקציית האינטרנט לדוגמה. בתגובה, הוא מתקשר אל shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

הפונקציה shareTargetHandler() היא אסינכרונית, היא מקבלת את האירוע, מחכה לנתוני הטופס ואז מאחזרת את קובצי המדיה מתוכו.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

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

אפשר לנסות את זה באפליקציה לדוגמה Fugu Journal ולראות את ההטמעה של Service Worker בקוד המקור שלה.

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

סיכום

‫Share Target API הוא דרך פשוטה לשלב את אפליקציית ה-PWA שלכם במכשירי המשתמשים, כך שהיא תהיה שוות ערך לאפליקציות ספציפיות לפלטפורמה במשימה החשובה של שיתוף תוכן בין אפליקציות. אבל כדי לעשות את זה, בדרך כלל צריך שיהיה שרת זמין לקבלת הבקשה. אם משתמשים ב-Workbox כדי ליצור נתיב של יעד שיתוף ישירות בקובץ שירות (service worker), האפליקציה לא מוגבלת, ויעד השיתוף יכול לפעול באפליקציות במצב אופליין ובלי שרתים.

תמונה מאת Elaine Casap ב-Unsplash