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

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

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

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

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

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

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

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

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

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

می توانید این کتابخانه را با استفاده از web-push-codelab.glitch.me آزمایش کنید. به طور خاص، برای ایجاد اشتراک Push در مرورگر، باید کلید عمومی VAPID سرور Push را کپی کنید. این کلید عمومی در واقع یک مقدار باینری کدگذاری شده base64 است که برای ثبت نام در Push manager مرورگر باید رمزگشایی و به 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 manager منتقل می شود

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

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

در حالی که شنونده خود در محل است، می‌توانید پیامی را در web-push-codelab.glitch.me ارسال کنید و پیام‌ها به کنسول سرویس‌کار وارد می‌شوند.

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

فشار بی صدا

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

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