از Web Push استفاده کنید

در افزونه‌ها می‌توانید از هر ارائه‌دهنده‌ی Push برای ارسال اعلان‌ها و پیام‌های Push استفاده کنید. یک Push از API Push به محض دریافت توسط سرویس ورکر شما پردازش می‌شود. اگر سرویس ورکر به حالت تعلیق درآمده باشد، یک Push آن را دوباره بیدار می‌کند. فرآیند استفاده از آن در افزونه‌ها دقیقاً مشابه همان چیزی است که در وب باز از آن استفاده می‌کنید.

دریافت مجوز استفاده از API Push

وقتی یک سرور Push را در یک وب‌سایت معمولی ثبت می‌کنید، به کاربر یک اعلان مجوز برای اعطای یا رد آن نشان داده می‌شود. در افزونه‌ها، این اعلان نمایش داده نمی‌شود. برای استفاده از API Push در افزونه خود، باید مجوز notifications را در فایل manifest.json خود تنظیم کنید.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

اگر این مجوز را نداشته باشید، هرگونه تعامل با registration.pushManager منجر به خطای فوری می‌شود، همان نتیجه‌ای که اگر کاربر مجوز را رد کرده باشد، رخ می‌دهد. علاوه بر این، به خاطر داشته باشید که مجوز notifications باعث می‌شود هنگام نصب، هشدار مجوز نمایش داده شود. کروم همچنین افزونه را برای هر نصب موجود غیرفعال می‌کند تا زمانی که کاربر درخواست مجوز جدید را تأیید کند. می‌توانید در مورد نحوه مدیریت این مشکل در راهنمای هشدار مجوز اطلاعات بیشتری کسب کنید.

ارائه دهندگان خدمات Push و Push

پس از افزودن مجوز به manifest.json خود، باید ارتباط بین backend و افزونه خود را پیکربندی کنید. این ارتباط را می‌توان به دو بخش تقسیم کرد - ارائه‌دهنده Push و سرویس Push. ارائه‌دهنده، SDK ای است که شما برای ارسال پیام به سرویس Push از آن استفاده می‌کنید. گزینه‌های مختلفی وجود دارد و هر ارائه‌دهنده Push می‌تواند برای API Push کار کند (اگرچه ممکن است SDK ای ارائه ندهند که ادغام آن را ساده کند). برای دیدن آنچه ممکن است، باید SDK ارائه‌دهنده خود را آزمایش کنید. سرویس Push چیزی است که دستگاه کاربر نهایی با آن ثبت شده است، بنابراین می‌تواند از هر پیام push ارسال شده توسط یک ارائه‌دهنده Push مطلع شود. این چیزی است که شما هیچ کنترلی بر آن ندارید، زیرا در مرورگرهای جداگانه کدگذاری شده است. برای Chrome، Firebase Cloud Messaging سرویس Push است. هر پیامی که به کاربر Chrome ارسال می‌شود از طریق آن مسیریابی می‌شود.

میزبانی خودکار یک ارائه دهنده Push

هر ارائه‌دهنده‌ی Push می‌تواند کار کند، با این حال، همه ارائه‌دهندگان SDK که در service workerها کار کند را ارائه نمی‌دهند. اگر در اجرای آن مشکلی دارید، باید با ارائه‌دهنده‌ی خود مشورت کنید. با این حال، نیازی به استفاده از یک ارائه‌دهنده‌ی عمومی ندارید. با استفاده از کتابخانه‌هایی مانند web-push ، می‌توانید backend خود را میزبانی کنید.

شما می‌توانید این کتابخانه را با استفاده از web-push-codelab.glitch.me آزمایش کنید. به طور خاص، برای ایجاد اشتراک Push در مرورگر، باید کلید عمومی VAPID سرور Push را کپی کنید. این کلید عمومی در واقع یک مقدار دودویی کدگذاری شده base64 است که برای ثبت در مدیریت Push مرورگر، باید رمزگشایی و به یک Uint8Array تبدیل شود. کتابخانه‌هایی برای انجام این منطق وجود دارد، اما موارد زیر تنها چیزی است که مورد نیاز است.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

مقدار ارائه شده به مدیریت Push ارسال می‌شود.

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

تابع subscribe یک PushSubscription برمی‌گرداند، شیء‌ای که شامل فراداده‌های سرور Push است. از آنجایی که شما از web-push-codelab.glitch.me استفاده می‌کنید، این مقدار باید در بخش Push Subscription صفحه کپی شود.

زمانی که PushSubscription را داشته باشید، آماده‌اید تا یک شنونده برای پیام‌های push در service worker افزونه ما ثبت کنید.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

با قرار دادن شنونده (listener)، می‌توانید پیامی را در web-push-codelab.glitch.me ارسال کنید و پیام‌ها در کنسول سرویس ورکر ثبت می‌شوند.

از آنجایی که این یک استاندارد وب باز است، مستندات زیادی در مورد نحوه پیاده‌سازی Web Push، از جمله در وبلاگ کروم ، وجود دارد. برای مشاهده نسخه کامل مثالی که در اینجا پوشش داده شده است، می‌توانید به مخزن نمونه افزونه‌های ما مراجعه کنید.

فشار بی‌صدا

از زمان معرفی Manifest v3 در کروم ۸۸، شما می‌توانستید در افزونه‌ی Manifest v3 خود یک اعلان فشاری دریافت کنید. با این حال، همیشه این الزام وجود داشت که اعلان نوعی اعلان قابل مشاهده برای کاربر، مانند یک اعلان وب، را نشان دهد. این امر باعث می‌شد اگر می‌خواستید دستورات یا به‌روزرسانی‌های داده‌ها را بدون ایجاد مزاحمت برای کاربر با اطلاعات غیرضروری به افزونه‌ی خود ارسال کنید، این قابلیت بسیار کمتر مفید باشد. از کروم ۱۲۱ ، افزونه‌ها می‌توانند userVisibleOnly را روی false تنظیم کنند. اکنون می‌توانید اعلان‌های فشاری بی‌صدا و بدون مواجهه با کاربر را برای کاربران خود ارسال کنید. برای استفاده از این قابلیت، هنگام فراخوانی pushManager.subscribe userVisibleOnly روی false تنظیم کنید.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});