از اعلان‌های فشار برای تعامل و جذب مجدد کاربران استفاده کنید

Kate Jeffreys

چرا از اعلان‌های فشاری استفاده کنیم؟

اعلان‌ها (Notifications) اطلاعات مختصری را به کاربر ارائه می‌دهند. برنامه‌های وب می‌توانند از اعلان‌ها برای اطلاع‌رسانی در مورد رویدادهای مهم و حساس به زمان یا اقداماتی که کاربر باید انجام دهد، استفاده کنند.

ظاهر و حس اعلان‌ها بین پلتفرم‌ها متفاوت است. برای مثال:

یک اعلان در دستگاه اندروید.

یک اعلان در مک‌بوک.

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

اعلان‌های فوری می‌توانند با ترغیب کاربران به باز کردن مجدد برنامه و استفاده از آن بر اساس آخرین اطلاعات، به آنها کمک کنند تا بیشترین بهره را از برنامه شما ببرند.

ایجاد و ارسال اعلان‌ها

با استفاده از Notifications API اعلان‌ها را ایجاد کنید. یک شیء Notification دارای یک رشته title و یک شیء options است. برای مثال:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

وقتی اعلان فعال است، title به صورت پررنگ نمایش داده می‌شود، در حالی که body حاوی متن اضافی است.

دریافت مجوز برای ارسال اعلان‌ها

برای نمایش یک اعلان، برنامه شما باید از کاربر اجازه این کار را دریافت کند:

Notification.requestPermission();

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

اعلان‌های فشاری چگونه کار می‌کنند؟

قدرت واقعی اعلان‌ها از ترکیب سرویس ورکرها و فناوری پوش (push) ناشی می‌شود:

• سرویس ورکرها می‌توانند در پس‌زمینه اجرا شوند و حتی زمانی که برنامه شما روی صفحه نمایش قابل مشاهده نیست، اعلان‌ها را نمایش دهند.

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

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

کلاینت و سرویس ورکر از جاوا اسکریپت معمولی و بدون کتابخانه‌های اضافی استفاده می‌کنند. سرور با بسته express npm روی Node.js ساخته شده است و از بسته web-push npm برای ارسال اعلان‌ها استفاده می‌کند. برای ارسال اطلاعات به سرور، کلاینت یک URL از نوع POST که سرور در معرض آن قرار داده است را فراخوانی می‌کند.

بخش ۱: ثبت نام یک سرویس ورکر و اشتراک در پوش

1. یک برنامه کلاینت، یک سرویس ورکر را با ServiceWorkerContainer.register() ثبت می‌کند. سرویس ورکر ثبت‌شده، زمانی که کلاینت غیرفعال است، در پس‌زمینه به اجرا ادامه می‌دهد.

   کد مشتری:

   navigator.serviceWorker.register('sw.js');
   

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

   کد مشتری:

   Notification.requestPermission();
   

3. برای فعال کردن اعلان‌های پوش نوتیفیکیشن، سرویس ورکر از PushManager.subscribe() برای ایجاد یک اشتراک پوش نوتیفیکیشن استفاده می‌کند. در فراخوانی PushManager.subscribe() ، سرویس ورکر کلید API برنامه را به عنوان شناسه ارائه می‌دهد.

   کد مشتری:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ });
   });
   

   سرویس‌های ارسال اعلان مانند Firebase Cloud Messaging بر اساس مدل اشتراک عمل می‌کنند. وقتی یک سرویس ورکر با فراخوانی PushManager.subscribe() در یک سرویس ارسال اعلان مشترک می‌شود، سرویس ارسال اعلان یک URL منحصر به فرد برای آن سرویس ورکر ایجاد می‌کند. این URL به عنوان نقطه پایانی اشتراک شناخته می‌شود.

4. کلاینت، نقطه پایانی اشتراک را به سرور برنامه ارسال می‌کند.

   کد مشتری:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
       sendToServer(subscription, '/new-subscription', 'POST');
     });
   });
   

   کد سرور:

   app.post('/new-subscription', (request, response) => {
     // extract subscription from request
     // send 'OK' response
   });
   

بخش دوم: ارسال اعلان

1. سرور وب یک اعلان به نقطه پایانی اشتراک ارسال می‌کند.

   کد سرور:

   const webpush = require('web-push');
   
   let options = { /* config info for cloud messaging and API key */ };
   let subscription = { /* subscription created in Part 1*/ };
   let payload = { /* notification */ };
   
   webpush.sendNotification(subscription, payload, options);
   

2. اعلان‌ها به نقاط انتهایی اشتراک ارسال می‌شوند و رویدادهای push را با هدف service worker اجرا می‌کنند. service worker پیام را دریافت کرده و آن را به عنوان یک اعلان به کاربر نمایش می‌دهد.

   کد سرویس ورکر:

   self.addEventListener('push', (event) => {
     let title = { /* get notification title from event data */ }
     let options = { /* get notification options from event data */ }
     showNotification(title, options);
   })
   

3. کاربر با اعلان تعامل می‌کند و اگر برنامه وب از قبل فعال نشده باشد، آن را فعال می‌کند.

مراحل بعدی

به عنوان قدم بعدی، اعلان‌های فوری (push notification) را پیاده‌سازی کنید!

ما مجموعه‌ای از آزمایشگاه‌های کد ایجاد کرده‌ایم تا شما را در هر مرحله از فرآیند راهنمایی کنیم.