Web Push | Metrix

فعالسازی WebPush (مختص سرویس اتومیشن)

متریکس برای ارسال پوش نوتیفیکیشن به هر کاربر، یک User سمت سرور خود ایجاد می‌کند (در صورتی که Userای برای آن کاربر وجود نداشته باشد.) که این User پس از دریافت اجازه‌ی ارسال پوش نوتیفیکیشن از کاربر ساخته می‌شود و در داشبورد متریکس در بخش User Lookup قابل نمایش است.
اگر متد authorizeUser برای کاربری که اجازه دریافت پوش نوتیفیکیشن را می‌دهد فراخوانی نشده باشد، این user به صورت Anonymous یا ناشناس سمت سرورهای متریکس ساخته می‌شود. در واقع در این حالت برای هر Device که اجازه دریافت پوش را می‌دهد یک User سمت سرورهای متریکس ساخته می‌شود.
اما اگر می‌خواهید کاربری که اجازه دریافت پوش نوتیفیکیشن را می‌دهد به‌صورت شناخته‌شده (Identified) در متریکس ثبت شود و ناشناس نباشد، باید پیش از آن متد authorizeUser برای این کاربر فراخوانی شده باشد. همچنین بااستفاده از متدهای مرتبط با User می‌توانید اطلاعات آن User را تکمیل یا به‌روزرسانی کنید.

می‌توانید از نمونه پیاده‌سازی‌های زیر برای پیاده‌سازی WebPush در وبسایت خود استفاده نمایید

Netxjs sample

Pure html/js sample

برای فعالسازی WebPush، مراحل زیر را دنبال نمایید:

مرحله ۱: اضافه‌کردن فایل ServiceWorker (تنها برای وبسایت‌هایی که پروتکل https دارند)

در صورتی که در وبسایت خود فایل ServiceWorker ندارید یا اگر فایل موجود قبلاً برای ارسال وب‌پوش به کاربر استفاده می‌شده است، این فایل را دانلود کرده و در root پروژه خود قرار دهید. (به این معنی است که در همان مسیری که فایل‌هایی مانند index.html یا index.php قرار دارند. )

توجه کنید: این فایل باید در انتهای آدرس دامنه وبسایت شما در دسترس باشد. بطور مثال اگر دامنه وبسایت شما https://dashboard.metrix.ir است، این فایل باید در آدرس https://dashboard.metrix.ir/metrix-sw.js در دسترس باشد.

اما اگر در وب‌سایت خود فایلی برای سرویس‌ورکر دارید که وظایفی غیر از ارسال وب‌پوش انجام می‌دهد، کافیست خط زیر را به همان فایل اضافه کرده و سپس سرویس‌ورکر را پیش از دریافت اجازه‌ی ارسال پوش از کاربر، register نمایید.

importScripts('https://cdn.metrix.ir/sdk/web/metrixweb-sw.js');

همچنین داخل کانفیگ راه‌اندازی وب‌پوش ، hasSW: true را قرار دهید.

مرحله ۲: فعالسازی تنظیمات پوش

تنظیمات مربوط به ارسال پوش نوتیفیکیشن، از طریق پارامتر سوم متد init که به عنوان config شناخته می‌شود، انجام می‌گیرد.

کانفیگ راه‌اندازی وب‌پوش:

{
  push: {
    enabled: true; // default is false but if set to true you must provide publicKey.
    publicKey: YOUR_PUBLIC_KEY; // your push subscription public key.
    hasSW: false; // (OPTIONAL) default is false, if you already have a serviceWoker that does something except sending webpush set this to true.
  }
}

publicKey توسط متریکس در اختیار شما قرار می‌گیرد.

مرحله ۳: گرفتن اجازه ارسال پوش به کاربر

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

روش اول: فراخوانی متد

شما می‌توانید با فراخونی متد subscribePush() در هر بخش دلخواه از وب‌سایت خود (برای مثال در یک پاپ‌آپ اختصاصی)، از کاربر اجازه دریافت پوش نوتیفیکیشن را دریافت کنید.

subscribePush() : Promise<ConfirmPushState>

این متد در پاسخ یک Promise از نوع ConfirmPushState باز میگرداند که وضعیت اکشن کاربر در خصوص پذیرش یا رد دریافت پوش نوتیفیکیشن را مشخص می‌کند.

وضعیت اکشن کاربر نسبت به دریافت پوش

type ConfirmPushState = 'subscribed' | 'blocked' | 'closed';

مقدار	توضیحات
`subscribed`	کاربر با انتخاب گزینه‌ی Allow، دریافت پوش نوتیفیکیشن را پذیرفته است.
`blocked`	کاربر با انتخاب گزینه‌ی Block، دریافت پوش نوتیفیکیشن را مسدود کرده است.
`closed`	کاربر بدون انتخاب هیچ‌یک از گزینه‌ها، با بستن پاپ‌آپ (مثلاً با کلیک روی دکمه ضربدر)، درخواست دریافت پوش نوتیفیکیشن را رد کرده است.

این مورد را در نظر داشته باشید که فراخوانی متد init همراه با تنظیمات مربوط به پوش نوتیفیکیشن (در پارامتر کانفیگ)، باید قبل از فراخوانی متد subscribePush باشد.

روش دوم: Backdrop

backdrop-image

Backdrop به دو روش قابل نمایش به کاربر است تا از او اجازه‌ی دریافت پوش نوتیفیکیشن گرفته شود. این دو روش عبارت‌اند از:

باز شدن هنگام شروع به کار SDK: با اضافه کردن پارامتر‌های زیر به کانفیگ پوش می‌توانید backdrop را هنگام شروع به کار SDK باز کنید. بازشدن backdrop می‌تواند با تنظیم مقدار backdropDelay به تاخیر بیوفتد. و همچنین متن نمایشی درون آن با مقدار backdropText قابلیت شخصی‌سازی دارد.

{
  push: {
  ...
  showBackdrop: true,
  backdropDelay: 1000,  // Delay time in ms.
  backdropText: 'SAMPLE_TEXT', // Text to show inside backdrop.
}
}

باز شدن با فراخوانی متد: با فراخوانی متد openPushConfirmBackdrop می‌توانید backdrop را در هر زمان دلخواه نمایش دهید. این متد، مشابه روش قبلی، در پاسخ یک ConfirmPushState را بصورت Promiseبرمی‌گرداند که وضعیت انتخاب کاربر در خصوص دریافت پوش نوتیفیکیشن را مشخص می‌کند.

openPushConfirmBackdrop({
  backdropDelay: 1000, // Delay time in ms.
  backdropText: 'SAMPLE_TEXT', // Text to show inside backdrop.
}): Promise<ConfirmPushState>

روش سوم: زنگوله متریکس

با اضافه کردن showBell که مقدار true دارد به تنظیمات پوش، آیکون زنگوله متریکس در وب‌سایت نمایش داده می‌شود. کاربر با کلیک روی این آیکون، فرآیند درخواست اجازه برای دریافت پوش نوتیفیکیشن را آغاز می‌کند.

{
  push: {
  ...
  showBell: true // default is false
}
}

نکات ارسال پوش در ios

به دلیل محدودیت‌هایی که در سیستم‌عامل iOS وجود دارد، لازم است نکات زیر درباره ارسال پوش نوتیفیکیشن رعایت شود:

مطابق این لینک ، ارسال پوش نوتیفیکیشن در ios از ios 16.4 به بالا و در سیستم‌عامل مک از نسخه macOS 13 به بالا پشتیبانی می‌شود.
در iOS، فقط اپلیکیشن‌های PWA که به‌صورت Add to Home Screen نصب شده باشند، اجازه ارسال پوش نوتیفیکیشن دارند.(حتی وب‌سایت‌هایی که فقط Add to Home Screen شده‌اند اما PWA نیستند، قادر به ارسال پوش نخواهند بود. بنابراین حتما باید از اپلیکیشن PWA استفاده کنید.)
پرامپت درخواست اجازه ارسال پوش باید حتماً در پاسخ به یک تعامل مستقیم کاربر (مانند کلیک روی دکمه) نمایش داده شود. در نتیجه فراخوانی متد subscribePush یا بازکردن Backdrop در لود اپ بی‌تاثیر بوده و توسط سیستم‌عامل بلاک خواهد شد. (این محدودیت در مرورگرهای Safari و Chrome یکسان است.)

اطلاع از وضعیت دریافت پوش کاربر

با استفاده از متد زیر، می‌توانید وضعیت اجازه‌ی کاربر به مرورگر برای دریافت پوش نوتیفیکیشن را بررسی کنید:

onPushStateResolved(): Promise<ConfirmPushState>

این متد در پاسخ یک Promise از نوع ConfirmPushState باز میگرداند که حالات آن در این قسمت قابل مشاهده است.