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

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

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

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

טלפון Android עם התפריט 'שיתוף באמצעות' פתוח.
בורר יעד שיתוף ברמת המערכת עם אפשרות ל-PWA מותקן בשם Share Target Test.

בדף הזה

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

יש שני חלקים להטמעת הפונקציונליות של יעד 'שיתוף באינטרנט'. קודם כול, מעדכנים את מניפסט אפליקציית האינטרנט כדי לציין שהאפליקציה תהיה יעד לשיתוף אחרי ההתקנה. בדוגמה הבאה, שיתופי הקבצים מועברים לכתובת ה-URL /share באמצעות בקשת POST. הוא מקודד כטופס מרוכב, שבו הכותרת נקראת 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"]
      }
    ]
  }
}

שיתוף מטרות של קובץ שירות עם 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