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

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

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

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

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

באותו הדף

אם לא ידוע לך איך פועלת התכונה 'יעד שיתוף באינטרנט', עליך לקרוא את המאמר קבלת נתונים ששותפו עם התכונה 'שיתוף באינטרנט' הכלי 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 Workbox עם Workbox

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

ניתן לעשות זאת בתיבת עבודה על ידי רישום מסלול שמטופל על ידי ה-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 יומן והצגת קובץ השירות שלו במקור .

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

סיכום

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

תמונה מאת איליין קאסאפ ב-Unbounce