از یک Service Worker برای مدیریت اعلان ها استفاده کنید

کیت جفریس
Kate Jeffreys

در این لبه کد، از یک سرویس‌کار برای مدیریت اعلان‌ها استفاده می‌کنید. دستورالعمل‌های اینجا فرض می‌کنند که شما قبلاً با سرویس‌کاران و اصول اولیه درخواست مجوز اعلان و ارسال اعلان‌ها آشنا هستید. اگر به بازخوانی در اعلان‌ها نیاز دارید، به « شروع با کدنویسی Notifications API» مراجعه کنید. برای کسب اطلاعات بیشتر در مورد کارگران خدماتی، به مقدمه مت گانت برای کارگران خدماتی مراجعه کنید.

برنامه نمونه را ریمیکس کنید و آن را در یک تب جدید مشاهده کنید

اعلان‌ها به‌طور خودکار از برنامه Glitch تعبیه‌شده مسدود می‌شوند، بنابراین نمی‌توانید برنامه را در این صفحه پیش‌نمایش کنید. در عوض، در اینجا چه باید کرد:

  1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
  2. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .

اشکال باید در یک برگه کروم جدید باز شود.

همانطور که از طریق این لبه کد کار می کنید، تغییراتی در کد موجود در Glitch تعبیه شده در این صفحه ایجاد کنید. برای مشاهده تغییرات، برگه جدید را با برنامه زنده خود بازخوانی کنید.

با نمونه برنامه و کد شروع آشنا شوید

با نگاه کردن به برنامه زنده در برگه جدید Chrome شروع کنید:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.

  2. روی تب Console کلیک کنید.

  3. مطمئن شوید که گزینه Info در منوی Levels در کنار کادر فیلتر انتخاب شده باشد.

  4. در کنسول DevTools برای برنامه زنده خود، باید یک پیام کنسول را مشاهده کنید:

    TODO: Implement getRegistration() .

    این پیامی از یک تابع خرد است که در این کد لبه پیاده‌سازی خواهید کرد.

حالا بیایید نگاهی به کد برنامه نمونه در Glitch تعبیه شده در این صفحه بیندازیم.

  1. در Glitch تعبیه شده، نگاهی به public/index.js بیندازید:

    • برای توابعی که پیاده سازی خواهید کرد، چهار خرد وجود دارد: registerServiceWorker ، getRegistration ، unRegisterServiceWorker ، و sendNotification .

    • تابع requestPermission از کاربر برای ارسال اعلان‌ها اجازه می‌خواهد. اگر شروع به کار با Codelab Notifications API را انجام داده باشید، متوجه خواهید شد که تابع requestPermission آن در اینجا استفاده می شود. تنها تفاوت این است که اکنون پس از رفع درخواست مجوز، رابط کاربری را نیز به روز می کند.

    • عملکرد updateUI همه دکمه ها و پیام های برنامه را تازه می کند.

    • تابع initializePage تشخیص ویژگی را برای قابلیت سرویس کار در مرورگر انجام می دهد و رابط کاربری برنامه را به روز می کند.

    • اسکریپت منتظر می ماند تا صفحه بارگیری شود و سپس آن را مقداردهی اولیه می کند.

  2. در Glitch تعبیه شده، public/service-worker.js را باز کنید.

    همانطور که از نام پیداست، کدی را به برنامه اضافه می‌کنید تا این فایل را به‌عنوان یک سرویس‌دهنده ثبت کنید.

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

    کدی را به public/service-worker.js اضافه می‌کنید تا اعلان‌ها را زمانی که کارمند خدمات دریافت می‌کند، مدیریت کند.

کارگر خدماتی را ثبت کنید

در این مرحله، کدی را می نویسید که وقتی کاربر روی Register service worker در رابط کاربری برنامه کلیک می کند، اجرا می شود. این کد public/service-worker.js به عنوان یک سرویس دهنده ثبت می کند.

  1. در ویرایشگر Glitch تعبیه شده، public/index.js را باز کنید. تابع registerServiceWorker را با کد زیر جایگزین کنید:

    // Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
  await navigator.serviceWorker.register('./service-worker.js')
  updateUI();
}

    توجه داشته باشید که registerServiceWorker از اعلان async function برای راحت‌تر کردن رسیدگی به وعده‌ها استفاده می‌کند. این به شما امکان می دهد await ارزش حل شده یک Promise باشید. به عنوان مثال، عملکرد بالا قبل از به‌روزرسانی UI منتظر نتیجه ثبت یک سرویس‌کار است. برای اطلاعات بیشتر await در MDN مراجعه کنید.

  2. اکنون که کاربر می‌تواند یک سرویس‌کار ثبت کند، می‌توانید به شیء ثبت سرویس‌گر مراجعه کنید. در public/index.js تابع getRegistration را با کد زیر جایگزین کنید:

    // Get the current service worker registration.
function getRegistration() {
  return navigator.serviceWorker.getRegistration();
}

    تابع بالا از Service Worker API برای دریافت ثبت نام سرویس کارگر فعلی، در صورت وجود، استفاده می کند. دریافت ارجاع به ثبت نام کارگر خدماتی را کمی راحت تر می کند.

  • برای تکمیل عملکرد ثبت نام کارگر سرویس، کدی را برای لغو ثبت نام کارگر سرویس اضافه کنید. تابع unRegisterServiceWorker را با کد زیر جایگزین کنید:

    // Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Await the outcome of the unregistration attempt
  // so that the UI update is not superceded by a
  // returning Promise.
  await registration.unregister();
  updateUI();
}

در برگه ای که در آن برنامه زنده را مشاهده می کنید، صفحه را دوباره بارگیری کنید. دکمه‌های Register service worker و Unregister service worker اکنون باید کار کنند.

اعلان ها را برای کارگر خدمات ارسال کنید

در این مرحله، کدی را می نویسید که وقتی کاربر روی Send a notification در رابط کاربری برنامه کلیک می کند، اجرا می شود. این کد یک اعلان ایجاد می کند، بررسی می کند که یک سرویس دهنده ثبت شده است، و سپس اعلان را با استفاده از روش postMessage خود برای سرویس دهنده ارسال می کند.

در ویرایشگر Glitch تعبیه شده، public/index.js را باز کنید و تابع sendNotification را با کد زیر جایگزین کنید:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

در اینجا چیزی است که آن کد انجام می دهد:

  • sendNotification یک تابع ناهمزمان است، بنابراین می توانید از await برای دریافت ارجاع به ثبت نام کارگر سرویس استفاده کنید.

  • روش postMessage کارمند سرویس داده ها را از برنامه به کارمند سرویس ارسال می کند. برای اطلاعات بیشتر به مستندات MDN در postMessage مراجعه کنید.

  • قبل از تلاش برای دسترسی به تابع postMessage ، کد وجود ویژگی navigator.serviceWorker.controller را بررسی می کند. اگر سرویس‌کار فعالی وجود نداشته باشد، یا اگر صفحه به اجبار رفرش شده باشد ( Shift+ Reload ) navigator.serviceWorker.controller null خواهد بود. برای اطلاعات بیشتر به مستندات کنترلر ServiceWorker در MDN مراجعه کنید.

رسیدگی به اعلان‌ها در سرویس‌کار

در این مرحله، کدی را در سرویس‌کار می‌نویسید که پیام‌های ارسال شده به آن را مدیریت کرده و اعلان‌ها را به کاربر نمایش می‌دهد.

در ویرایشگر Glitch تعبیه شده، public/service-worker.js را باز کنید. کد زیر را به انتهای فایل اضافه کنید:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

در اینجا یک توضیح سریع است:

  • self اشاره ای به خود کارگر خدماتی است.

  • در حالی که کارگر سرویس اکنون نمایش اعلان‌ها را کنترل می‌کند، رابط کاربری اصلی برنامه همچنان مسئول دریافت مجوز اعلان از کاربر است. اگر مجوز داده نشود، قولی که توسط showNotification بازگردانده شده است رد می شود. کد بالا از یک بلوک catch برای جلوگیری از خطای رد Promise استفاده می‌کند و این خطا را کمی ظریف‌تر مدیریت می‌کند.

اگر گیر کردید، برای کد تکمیل‌شده به glitch.com/edit/#!/codelab-notifications-service-worker-completed مراجعه کنید.

به سراغ کدهای بعدی در این سری بروید: سرور اعلان‌های فشاری بسازید .