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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

בורר של יעד שיתוף ברמת המערכת עם PWA מותקן שנקרא Share Target Test.

באותו דף

אם אתם לא מכירים את אופן הפעולה של Web Share Targets, תמצאו הסברים מפורטים בנושא קבלת נתונים משותפים באמצעות 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"]
      }
    ]
  }
}
…

יעדי שיתוף של Service Worker עם Workbox

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

כדי לעשות זאת ב-Workbox, רושמים מסלול שמטופל על ידי Service Worker. כדי להתחיל, אפשר לייבא את 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
};

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

אפשר לנסות אותו באפליקציה לדוגמה Fugu Journal, ולראות את ההטמעה של קובץ השירות (service worker) בקוד המקור שלה.

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

סיכום

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

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