PWA ها را در رابط های اشتراک گذاری داخلی با Workbox ادغام کنید

چگونه PWA خود را در کنار برنامه‌های مخصوص پلتفرم در رابط‌های کاربری اشتراک‌گذاری سطح سیستم نمایش دهیم؟

Jeff Posnick

Joe Medley

Sam Richard

API هدف اشتراک‌گذاری وب به شما امکان می‌دهد برنامه وب پیش‌رونده خود را پس از نصب، در صفحه اشتراک‌گذاری سطح سیستم کاربر نمایش دهید. اگرچه اگر سروری برای دریافت درخواست در دسترس داشته باشید، عالی کار می‌کند، اما اگر این کار را نکنید، کار کردن با آن بسیار سخت‌تر می‌شود.

در این مقاله ما از Workbox ، مجموعه‌ای از کتابخانه‌های جاوا اسکریپت برای افزودن پشتیبانی آفلاین به برنامه‌های وب، برای ایجاد یک URL هدف اشتراک‌گذاری که کاملاً درون سرویس ورکر شما قرار دارد، استفاده خواهیم کرد. این به سایت‌های استاتیک و برنامه‌های تک صفحه‌ای اجازه می‌دهد تا بدون یک نقطه پایانی سرور اختصاصی، به عنوان اهداف اشتراک‌گذاری عمل کنند.

در همان صفحه

اگر با نحوه کار Web Share Target آشنا نیستید، بخش «دریافت داده‌های مشترک با API Web Share Target» مقدمه‌ای جامع و کامل در این زمینه ارائه می‌دهد. در اینجا مروری سریع بر آن خواهیم داشت.

دو بخش برای پیاده‌سازی قابلیت هدف اشتراک‌گذاری وب وجود دارد. ابتدا، مانیفست برنامه وب خود را به‌روزرسانی کنید تا مشخص شود که می‌خواهید برنامه شما هنگام نصب یک هدف اشتراک‌گذاری باشد. مثال زیر، اشتراک‌گذاری‌ها را از طریق درخواست POST به آدرس اینترنتی /share هدایت می‌کند. این فرم به صورت چندبخشی کدگذاری شده است، که عنوان آن 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"]
      }
    ]
  }
}
…

اهداف اشتراک‌گذاری سرویس ورکِر با ورک‌باکس

اگرچه معمولاً توسط یک نقطه پایانی سرور مدیریت می‌شود، یک ترفند جالب که می‌توانید برای یک هدف اشتراکی انجام دهید، ثبت یک مسیر (route) مستقیماً در سرویس ورکر (service worker) خود برای مدیریت درخواست است. این کار به برنامه شما اجازه می‌دهد تا بدون نیاز به backend، یک هدف اشتراکی باشد.

شما این کار را در 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 امتحان کنید و پیاده‌سازی سرویس ورکر آن را در کد منبع آن مشاهده کنید.

یک کار رایج که ممکن است انجام دهید این است که منابع اشتراکی را تا زمانی که اتصالات شبکه بهتری در دسترس قرار گیرند، نگه دارید. Workbox همچنین از همگام‌سازی دوره‌ای در پس‌زمینه پشتیبانی می‌کند.

نتیجه‌گیری

API اشتراک‌گذاری هدف (Share Target API) روشی ساده برای ادغام عمیق برنامه وب پیش‌رونده شما در دستگاه‌های کاربر است و آنها را برای وظیفه حیاتی اشتراک‌گذاری محتوا بین برنامه‌ها، هم‌سطح برنامه‌های مختص پلتفرم قرار می‌دهد. اما انجام این کار معمولاً به یک سرور برای دریافت درخواست نیاز دارد. با استفاده از Workbox برای ایجاد یک مسیر اشتراک‌گذاری هدف به طور مستقیم در سرویس ورکر خود، برنامه شما از این محدودیت خلاص می‌شود و به Share Target اجازه می‌دهد تا برای برنامه‌ها در حالت آفلاین و بدون backend کار کند.