اگر وبسایت دارید ، یکی از ساده ترین راه ها برای ساخت اپ (بدون ساخت اپ اختصاصی) ، استفاده از وب اپ یا pwa است. (برای ساخت وب اپ ، لینک را ببینید)

اما میدانستید که می توانید برای وب اپ هم پوش نوتیفیکیشن تعریف کنید؟ طوریکه بدون اینکه برنامه روی گوشی کاربر باز باشد ، نوتیفیکیشن ارسال شود (در لحظه)

برای فعال کردن این آپشن باید از شرکتهایی که خدمات پوش نوتیفیکیشن می دهند استفاده کنید. در ایران هم می توانید از این خدمات استفاده کنید ، اما بیشتر آنها پولی بوده و بسته به میزان مصرفی که دارید (مثلاً برای ماهی چند هزار پوش نوتیفیکیشن ) باید مبلغ قابل توجهی را پرداخت کنید (حدود چند میلیون تومان)

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

1- استفاده از Pusher به عنوان سرویس دهنده پوش نوتیفیکیشن

وارد سایت Pusher شوید و یک اکانت بسازید. Pusher دو نوع سرویس مختلف برای ارسال پوش نوتیفیکیشن دارد:

• Channels
• Beams

ما در اینجا از Beams استفاده می کنیم. Beams این امکان را می دهد که interest های مختلف تعریف کنید و برای هر interest ، نوتیفیکیشن مخصوص خودش را ارسال کنید. فرض کنید دو دسته مشتری داریم: راننده و مسافر . می توانیم برای هر دسته یک interest منحصر بفرد بسازیم و بعد به آن interest نوتیفیکیشن پوش کنیم. نوتیفیکیشن به تمام اعضایی که در آن interest ثبت نام کرده اند، ارسال می شود. با این تفسیر، می توانید بر اساس ساختار اپ خودتان هر طور که خواستید از Beams استفاده کنید. (می توانید داکیومنت های خود سایت pusher را هم استفاده کنید، کاملا واضح و گویا توضیح داده شده)

وارد قسمت Beams شوید و یک app بسازید. بعد از نامگذاری و تکمیل اطلاعات ، باید دو کلید داشته باشید:

import * as PusherPushNotifications from "@pusher/push-notifications-web";

        //register serviceWorker: 
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker
          .register('/service-worker.js')
          .then(serviceWorkerRegistration => {
            console.log('Service worker registered:', serviceWorkerRegistration);

            const beamsClient = new PusherPushNotifications.Client({
              instanceId: 'XXXXXX-XXXX-XXXX-XXX-XXXXXXXXX',
              serviceWorkerRegistration: serviceWorkerRegistration,
            });
          
            //use id as intrest and send notifications to this intrest:
            beamsClient.start()
              .then(() => beamsClient.addDeviceInterest(user._id))
              .then(() => beamsClient.getDeviceInterests())
              .then((interests) => console.log("Current interests:", interests))
              .catch(console.error);
   
          })
          .catch(error => {
            console.log('Service worker registration failed:', error);
          });
      }

  

  }, []);

*در قسمت اول کد، یک service-worker می سازیم که منتظر دریافت نوتیفیکیشن ها می ماند (در بند 4 توضیح می دهم)

*در قسمت بعدی کد، برای هر کاربر یک interest با مقدار id خودش که منحصر بفرد است می سازیم تا هر زمان خواستیم فقط به آن کاربر نوتیفیکیشن ارسال کنیم. (مثلا وقتی پستش لایک شد)

*به جای instanceId و secretKey ، کلیدهای خودتان را قرار دهید.

const PushNotifications = require("@pusher/push-notifications-server");

let beamsClient = new PushNotifications({
            instanceId: "XXXXXX-XXXXXX-XXXXXX-XXXXXX-XXXXXX",
            secretKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          });
  
          beamsClient
            .publishToInterests([user_id], {
              web: {
                notification: {
                  title:"Flicka",
                  body: "user x liked your post",
                  icon: 'https://flicka.ir/logo512.png',
                  deep_link: "https://www.flicka.ir",
                },
              },
            })
            .then((publishResponse) => {
              console.log("Just published:", publishResponse.publishId);
              
            })
            .catch((error) => {
              console.log("Error:", error);
            });
        

importScripts("https://js.pusher.com/beams/service-worker.js");