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

Kate Jeffreys

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

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

ظاهر و ظاهر اعلان ها در پلتفرم ها متفاوت است. مثلا:

به طور سنتی، مرورگرهای وب باید با ارسال یک درخواست، تبادل اطلاعات بین سرور و مشتری را آغاز می کردند. از سوی دیگر، فناوری فشار وب به شما امکان می‌دهد سرور خود را پیکربندی کنید تا زمانی که برای برنامه شما منطقی است، اعلان ارسال کند. یک سرویس فشار 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 به شما امکان می دهد سرور خود را برای ارسال اعلان ها در زمانی که برای برنامه شما منطقی است پیکربندی کنید. یک سرویس فشار URL های منحصر به فردی را برای هر سرویس دهنده مشترک ایجاد می کند. ارسال پیام‌ها به URL کارمند سرویس، رویدادهایی را در آن کارمند خدمات ایجاد می‌کند و از او می‌خواهد اعلانی را نمایش دهد.

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

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

بخش 1: یک کارگر خدمات ثبت نام کنید و در Push مشترک شوید

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() در یک سرویس push مشترک می شود، سرویس push یک 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
   });
   

قسمت 2: ارسال یک اعلان

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. اعلان‌های ارسال شده به رویدادهای فشار آتش نقطه پایانی اشتراک با کارگر خدمات به عنوان هدف. کارمند سرویس پیام را دریافت کرده و به عنوان یک اعلان به کاربر نمایش می دهد.

   کد کارمند خدمات:

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

3. کاربر با اعلان ارتباط برقرار می کند و اگر قبلاً نبوده است، برنامه وب را فعال می کند.

مراحل بعدی

به عنوان گام بعدی، اعلان‌های فشاری را اجرا کنید!

ما یک سری از نرم افزارهای کد ایجاد کرده ایم تا شما را در هر مرحله از فرآیند راهنمایی کنیم.