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

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

Jeff Posnick

Joe Medley

Sam Richard

Web Share Target API به شما امکان می دهد برنامه وب پیشرو خود را پس از نصب در برگه اشتراک سطح سیستم کاربر نمایش دهید. در حالی که اگر سروری برای دریافت درخواست در دسترس داشته باشید عالی کار می کند، اگر این کار را نداشته باشید کار بسیار سخت تر است.

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

انتخابگر هدف اشتراک در سطح سیستم با یک PWA نصب شده به نام Share Target Test به عنوان یک گزینه.

در همان صفحه

اگر با نحوه عملکرد Web Share Target آشنا نیستید، دریافت داده های به اشتراک گذاشته شده با Web Share Target API به شما معرفی عمیقی می دهد. در اینجا یک بررسی سریع است.

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

خدمات به اشتراک گذاری اهداف با Workbox

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

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

نتیجه

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

عکس از Elaine Casap در Unsplash