انتقل إلى المحتوى
أدلة المستخدم الدعم طلب عرض توضيحي تسجيل الدخول
Pushwoosh.com

Web push SDK 3.0

الدمج

Anchor link to

عينة دمج على GitHub

احصل على Pushwoosh Web Push SDK وقم بفك ضغطه. يجب أن يكون لديك الملفات التالية:

Anchor link to
  • pushwoosh-service-worker.js

ضع كل هذه الملفات في الدليل الجذر ذي المستوى الأعلى لموقعك على الويب.

Anchor link to

تهيئة SDK:

Anchor link to
  1. قم بتضمين SDK من CDN الخاص بنا بشكل غير متزامن.
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
  1. قم بتهيئة Web Push SDK وتأكد من وضع التهيئة في قائمة الانتظار حتى يتم تحميل SDK بالكامل.
<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // القيم الممكنة: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // رمز التطبيق الخاص بك من لوحة تحكم Pushwoosh
    apiToken: 'XXXXXXX', //  Device API Token
    safariWebsitePushID: 'web.com.example.domain', // سلسلة نطاق عكسي فريدة، يتم الحصول عليها من بوابة مطوري Apple. مطلوبة فقط إذا كنت ترسل إشعارات فورية إلى متصفح Safari
    defaultNotificationTitle: 'Pushwoosh', // يحدد عنوانًا افتراضيًا للإشعارات الفورية
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // عنوان URL لصورة إشعار مخصصة
    autoSubscribe: false, // أو true. إذا كان true، يطالب المستخدم بالاشتراك في الإشعارات عند تهيئة SDK
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // اختياري، قم بتعيين معرف مستخدم مخصص
    tags: {
        'Name': 'John Smith'     // اختياري، قم بتعيين علامات مخصصة
    }
}]);
</script>

النوافذ المنبثقة على الويب

Anchor link to

أضف webPopups إلى كائن init الخاص بك لتمكين حملات النوافذ المنبثقة على الويب على موقعك.

webPopups: {
  enable: true,
  autoShow: true, // اختياري، اضبطه على false لتحميل النوافذ المنبثقة دون عرضها تلقائيًا - انظر طرق WebPopups أدناه
  colorScheme: 'auto', // اختياري، 'auto' (افتراضي) | 'light' | 'dark'
},

تعرض حملات النوافذ المنبثقة على الويب تراكبات تقوم بتكوينها في لوحة التحكم مثل العروض الترويجية أو الإعلانات أو نماذج التقاط العملاء المحتملين. على عكس نافذة الاشتراك المنبثقة المخصصة (subscribePopup)، التي تتعامل فقط مع الموافقة على إشعارات الويب، يمكن لحملات النوافذ المنبثقة على الويب عرض أي محتوى تقوم بتكوينه. للإعداد في لوحة التحكم، انظر فهم النوافذ المنبثقة على الويب.

يختار colorScheme اللوحة التي يتم عرض نافذة منبثقة بها مع تكوين الوضع الداكن:

  • 'auto' (افتراضي): يتبع نظام الألوان على مستوى نظام التشغيل للزائر (prefers-color-scheme).
  • 'light' أو 'dark': يعرض دائمًا تلك اللوحة، بغض النظر عن إعداد نظام التشغيل للزائر.

النافذة المنبثقة التي لا تحتوي على وضع داكن تم تكوينه في المحرر تعرض دائمًا الوضع الفاتح — لا يؤثر colorScheme عليها.

للتحكم البرمجي، انظر طرق WebPopups و أحداث النوافذ المنبثقة على الويب.

زر الاشتراك في الإشعارات

Anchor link to

لمطالبة المستخدمين بالاشتراك في الإشعارات الفورية، نوصي بتنفيذ زر الاشتراك في الإشعارات على موقع الويب الخاص بك. عزز تجربة المستخدم واحصل على المزيد من المشتركين!

التكوين

Anchor link to

لإنهاء تنفيذ الإشعارات الفورية في موقع الويب الخاص بك، تحتاج إلى تكوين منصات الويب في لوحة تحكم Pushwoosh الخاصة بك باتباع أدلتنا خطوة بخطوة:

تسجيل عامل الخدمة في نطاق مختلف

Anchor link to

في بعض الأحيان لا يمكنك وضع ملف عامل الخدمة في الدليل الجذر لموقع الويب ولكن في دليل فرعي.

في هذه الحالة، قم بتعديل التكوين (الخطوة 4.3) عن طريق إضافة معلمة

serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”

حيث /push-notifications/pushwoosh-service-worker.js هو المسار إلى ملف pushwoosh-service-worker.js.

معالجات الأحداث

Anchor link to

في Pushwoosh Web SDK 3.0 يمكنك الاشتراك في أحداث معينة لتتبعها**،** أو إلغاء الاشتراك من الأحداث إذا لم تعد بحاجة إلى تتبعها.

لتتبع تحميل Web SDK 3.0، قم بتشغيل حدث onLoad كما يلي:

// Load Event
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);

لتتبع التهيئة الصحيحة لـ Web SDK، قم بتشغيل حدث onReady:

// Ready Event
Pushwoosh.push((api) => {
  console.log('Pushwoosh ready!');
});

للاشتراك في أو إلغاء الاشتراك من أي من أحداث SDK، استخدم المعالجات بعد تحميل SDK:

Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Triggered event: event-name!');
  }


  // للاشتراك في حدث:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)


  // لإلغاء الاشتراك من حدث:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);

أحداث SDK

Anchor link to

حدث الاشتراك

Anchor link to

يتم تنفيذه بعد موافقة المستخدم على تلقي الإشعارات الفورية.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Triggered event: subscribe');
  });
}]);

حدث إلغاء الاشتراك

Anchor link to

يتم تنفيذه بعد إلغاء تسجيل الجهاز من الإشعارات.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Triggered event: unsubscribe');
  });
}]);

أحداث أداة الاشتراك

Anchor link to

تتبع عرض أداة طلب الاشتراك.

Pushwoosh.push(['onLoad', (api) => {
  // يتم تنفيذه عند عرض أداة طلب الاشتراك
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Triggered event: show-subscription-widget');
  });


  // يتم تنفيذه عند إخفاء أداة طلب الاشتراك
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Triggered event: hide-subscription-widget');
  });
}]);

أحداث مربع حوار إذن الإشعارات

Anchor link to

تتبع عرض مربع حوار الاشتراك الأصلي.

Pushwoosh.push(['onLoad', function (api) {
  // يتم تنفيذه عند عرض مربع حوار الإذن
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Triggered event: show-notification-permission-dialog');
  });


  // يتم تنفيذه عند إخفاء مربع حوار الإذن بإحدى الحالات الثلاث الممكنة:
  // 1. default - يتم إغلاق مربع الحوار
  // 2. granted - تم منح الإذن
  // 3. denied - تم رفض الإذن
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('Triggered event: hide-notification-permission-dialog', payload.permission);
  });
}]);

أحداث الإذن

Anchor link to

تحقق من حالة إذن الإشعارات الفورية عند تهيئة SDK؛ تتبع تحديث هذه الحالة كلما حدث.

Pushwoosh.push(['onLoad', (api) => {
  // يتم تنفيذه أثناء تهيئة SDK إذا كان 'autoSubscribe: false' و/أو إذا تجاهل المستخدم طلب الإشعارات الفورية.
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Triggered event: permission-default');
  });


  // يتم تنفيذه أثناء تهيئة SDK إذا تم حظر الإشعارات أو بمجرد أن يحظر المستخدم الإشعارات الفورية.
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Triggered event: permission-denied');
  });


  // يتم تنفيذه أثناء تهيئة SDK إذا تم السماح بالإشعارات أو بمجرد أن يسمح المستخدم بالإشعارات الفورية.
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Triggered event: permission-granted');
  });
}]);

حدث استلام الإشعار

Anchor link to

تتبع تسليم الإشعار إلى جهاز.

Pushwoosh.push(['onLoad', (api) => {
  // يتم تنفيذه عند عرض إشعار فوري.
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);

أحداث الإشعارات

Anchor link to

تتبع ما إذا كان الإشعار الفوري قد تم فتحه أو إغلاقه من قبل المستخدم.

Pushwoosh.push(['onLoad', (api) => {
  // يتم تنفيذه عندما ينقر المستخدم على الإشعار.
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Triggered event: open-notification', payload.notification);
  });


  // يتم تنفيذه عندما يغلق المستخدم إشعارًا فوريًا.
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);

أحداث صندوق الوارد

Anchor link to

تتبع الإشعارات المرسلة إلى صندوق الوارد.

Pushwoosh.push(['onLoad', (api) => {
  // يتم تنفيذه بواسطة ServiceWorker بعد استلام رسالة صندوق الوارد وحفظها في indexedDB.
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.message);
  });


  // يتم تنفيذه بعد تحديث صندوق الوارد تلقائيًا أثناء تحميل الصفحة.
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.messages);
  });
}]);

أحداث نافذة الاشتراك المنبثقة المخصصة

Anchor link to

للحصول على تفاصيل حول معالجة أحداث نافذة الاشتراك المنبثقة المخصصة، يرجى الرجوع إلى دليل أحداث نافذة الاشتراك المنبثقة المخصصة.

أحداث النوافذ المنبثقة على الويب

Anchor link to
Pushwoosh.push(['onLoad', (api) => {
  // يتم تنفيذه بمجرد تحميل النوافذ المنبثقة على الويب وتشغيل خط أنابيب العرض التلقائي للصفحة الحالية
  Pushwoosh.addEventHandler('web-popups-ready', () => {
    console.log('Triggered event: web-popups-ready');
  });


  // يتم تنفيذه عند عرض نافذة منبثقة على الويب، تلقائيًا أو عبر webPopups.show()
  Pushwoosh.addEventHandler('show-web-popup', (payload) => {
    console.log('Triggered event: show-web-popup', payload.code, payload.trigger); // trigger: 'auto' | 'api'
  });


  // يتم تنفيذه عند إخفاء نافذة منبثقة على الويب
  Pushwoosh.addEventHandler('hide-web-popup', (payload) => {
    console.log('Triggered event: hide-web-popup', payload.code, payload.reason); // reason: 'user' | 'api' | 'preempted'
  });
}]);

API

Anchor link to

بعد تهيئة Web Push SDK، يمكنك إجراء المكالمات التالية إلى Pushwoosh API. تعيد جميع الطرق كائنات Promise.

Pushwoosh.push((api) => {
  // تعيين علامات للمستخدم
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });


  // الحصول على علامات للمستخدم من الخادم
  api.getTags();


  // تسجيل معرف المستخدم
  api.registerUser('user123');


    // تسجيل البريد الإلكتروني للمستخدم
  api.registerEmail('user@example.com');


  // تسجيل رقم SMS
  api.registerSmsNumber('+15551234567');


  // تسجيل رقم WhatsApp
  api.registerWhatsappNumber('+1234567890');


  // نشر حدث
  api.postEvent('myEventName', {attributeName: 'attributeValue'});


  //إلغاء التسجيل من الإشعارات
  api.unregisterDevice();


  // تعيين لغة الجهاز (يتجاوز القيمة في علامة "اللغة")
  api.setLanguage('es');


  // بدلاً من ذلك، تسجيل متعدد للمستخدم مع الأجهزة والقنوات
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});

multiRegisterDevice

Anchor link to

طريقة تسجيل محسنة تسمح بتسجيل ملف تعريف مستخدم مع أجهزة وقنوات مراسلة متعددة في استدعاء API واحد. هذه الطريقة مفيدة بشكل خاص للتطبيقات متعددة المنصات أو عند تنفيذ استراتيجيات المراسلة متعددة القنوات.

Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // اختياري: معرف المستخدم
    email: 'user@example.com',       // اختياري: البريد الإلكتروني للمراسلة عبر البريد الإلكتروني
    sms_phone_number: '+1234567890', // اختياري: رقم هاتف SMS (تنسيق E.164)
    whatsapp_phone_number: '+1234567890', // اختياري: رقم WhatsApp (تنسيق E.164)
    kakao_phone_number: '+1234567890',    // اختياري: رقم KakaoTalk (تنسيق E.164)
    language: 'en',                  // اختياري: رمز اللغة (ISO 639-1)
    timezone: 'America/New_York',    // اختياري: معرف المنطقة الزمنية
    city: 'New York',               // اختياري: المدينة للاستهداف
    country: 'US',                  // اختياري: البلد للاستهداف
    state: 'NY',                    // اختياري: الولاية للاستهداف
    tags: {                         // اختياري: قيم العلامات مع العمليات
      'UserType': {
        operation: TTagOperationSet,     // تعيين قيمة العلامة (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // إلحاق بقيمة العلامة (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // زيادة قيمة العلامة (3)
        value: '1'
      }
    },
    push_devices: [                 // اختياري: مصفوفة من أجهزة الإشعارات
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // منصة Chrome (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('Multi-registration successful:', response);
  })
  .catch((error) => {
    console.error('Multi-registration failed:', error);
  });
});

أنواع المنصات:

  • TPlatformSafari (10): منصة Safari
  • TPlatformChrome (11): منصة Chrome
  • TPlatformFirefox (12): منصة Firefox

أنواع عمليات العلامات:

  • TTagOperationSet (0): تعيين قيمة العلامة (استبدال القيمة الحالية)
  • TTagOperationAppend (1): إلحاق بقيمة العلامة (إضافة إلى القائمة)
  • TTagOperationRemove (2): إزالة قيمة العلامة (إزالة من القائمة)
  • TTagOperationIncrement (3): زيادة قيمة العلامة (زيادة رقمية)

الفوائد:

  • استدعاء API واحد: تسجيل أجهزة وقنوات متعددة في وقت واحد
  • عملية ذرية: تنجح جميع التسجيلات أو تفشل معًا
  • مرتكز على المستخدم: يربط جميع الأجهزة بملف تعريف مستخدم واحد
  • علامات متقدمة: يدعم عمليات العلامات المعقدة
  • متعدد المنصات: التعامل مع منصات متعددة في وقت واحد

مثال على إرسال العلامات إلى Pushwoosh:

Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('success');
      }
      else {
        console.warn('skipped tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('setTags error:', err);
    });
});

زيادة قيمة العلامة

Anchor link to

لزيادة قيمة علامة رقمية، استخدم المعلمة operation مع القيمة ‘increment’ كما يلي:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});

إلحاق قيم العلامات

Anchor link to

لإلحاق قيم جديدة إلى علامة القائمة الحالية، استخدم المعلمة operation مع القيمة ‘append’ كما يلي:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});

إزالة قيمة العلامة

Anchor link to

لإزالة قيمة من علامة قائمة، استخدم المعلمة operation مع القيمة ‘remove’ كما يلي:

Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});

الطرق العامة

Anchor link to

Pushwoosh.subscribe()

تُستخدم هذه الطريقة لطلب إذن المستخدم للإشعارات الفورية. إذا كان المستخدم مشتركًا بالفعل، ستتوقف الطريقة عن التنفيذ.

إذا لم يكن المستخدم قد اشترك في الإشعارات بعد:

  1. يتم طلب الإذن للإشعارات الفورية.
  1. إذا سمح المستخدم بالإشعارات، يتم تشغيل حدث onSubscribe.

يتم تنفيذ Pushwoosh.subscribe() تلقائيًا إذا تم تعيين autoSubscribe: true. أثناء تهيئة SDK.

استدعِ هذه الطريقة إذا اخترت مطالبة المستخدم يدويًا بالاشتراك في الإشعارات باستخدام المعلمة autoSubscribe: false أثناء التهيئة:

<button onclick="Pushwoosh.subscribe()">Subscribe</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('User successfully subscribed');
  }]);
</script>

Pushwoosh.unsubscribe()

  1. يتم تنفيذ طريقة /unregisterDevice.
  2. يتم تشغيل حدث onUnsubscribe.
<button onclick="Pushwoosh.unsubscribe()">Unsubscribe</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('User successfully unsubscribed');
  }]);
</script>

Pushwoosh.isSubscribed()

يتحقق مما إذا كان المستخدم مشتركًا ويعيد علامة true/false.

Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});

Pushwoosh.getHWID()

يعيد Pushwoosh HWID.

Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid:', hwid);
});

Pushwoosh.getPushToken()

يعيد رمز الإشعار إذا كان متاحًا.

Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken:', pushToken);
});

Pushwoosh.getUserId()

يعيد User ID إذا كان متاحًا.

Pushwoosh.getUserId().then((userId) => {
  console.log('userId:', userId);
});

Pushwoosh.getParams()

يعيد قائمة بالمعلمات التالية:

Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});

Pushwoosh.isAvailableNotifications()

يتحقق مما إذا كان المتصفح يدعم Pushwoosh WebSDK 3.0، ويعيد ‘true’ أو ‘false’.

Pushwoosh.isAvailableNotifications() // true/false

طرق InboxMessages

Anchor link to

messagesWithNoActionPerformedCount(): Promise<number>

يعيد عدد الرسائل المفتوحة.

Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`${count} messages opened`);
  });

unreadMessagesCount()

يعيد عدد الرسائل غير المقروءة.

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages unread`);
  });

messagesCount(): Promise<number>

يعيد العدد الإجمالي للرسائل.

Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} messages`);
  });

loadMessages(): Promise<Array>

يحمل قائمة الرسائل غير المحذوفة.

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Messages have been loaded');
  });

readMessagesWithCodes(codes: Array<string>): Promise<void>

يضع علامة على الرسائل كمقروءة بواسطة Inbox_Ids.

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Messages have been read');
  });

performActionForMessageWithCode(code: string): Promise<void>

ينفذ الإجراء المخصص لرسالة ويضع علامة على الرسالة كمقروءة.

Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('Action has been performed');
  });

deleteMessagesWithCodes(codes: Array<string>): Promise<void>

يضع علامة على الرسائل كمحذوفة.

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Messages have been deleted');
  });

syncMessages(): Promise<void>

يزامن الرسائل مع الخادم.

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Messages have been synchronized');
  });

طرق WebPopups

Anchor link to

تتطلب واجهة برمجة التطبيقات البرمجية للنوافذ المنبثقة على الويب webPopups: {enable: true} في كائن init؛ وهي متاحة عبر Pushwoosh.moduleRegistry.webPopups بمجرد إطلاق حدث web-popups-ready.

show(code: string): Promise<boolean>

يعرض نافذة منبثقة على الفور، متجاوزًا كل شروط العرض (التأخير، قواعد الصفحة، نوع الجهاز/الزائر، تحديد التكرار، نوع المشغل). يغلق نافذة منبثقة مرئية بالفعل لإفساح المجال. يحل false بدلاً من الرفض عندما لا يمكن عرض النافذة المنبثقة.

Pushwoosh.moduleRegistry.webPopups.show('popup_code')
  .then((shown) => console.log('Popup shown:', shown));

hide(code?: string): boolean

يخفي النافذة المنبثقة المرئية. إذا تم تمرير code، فإنه يخفيها فقط عندما تتطابق مع النافذة المنبثقة المرئية. يعيد false إذا لم يتم إخفاء أي شيء.

Pushwoosh.moduleRegistry.webPopups.hide();

hideAll(): boolean

يخفي النافذة المنبثقة المرئية ويرفض كل شيء لا يزال معلقًا لتحميل الصفحة الحالية. يستمر show() في العمل بعد ذلك.

Pushwoosh.moduleRegistry.webPopups.hideAll();

isVisible(code?: string): boolean

يتحقق مما إذا كانت نافذة منبثقة مرئية حاليًا. بدون code، يتحقق مما إذا كانت أي نافذة منبثقة مرئية.

Pushwoosh.moduleRegistry.webPopups.isVisible('popup_code');

getVisibleCode(): string | null

يعيد رمز النافذة المنبثقة المعروضة حاليًا على الشاشة، أو null إذا لم تكن هناك نافذة مرئية.

Pushwoosh.moduleRegistry.webPopups.getVisibleCode();

getAvailableCodes(): Array<string>

يعيد رموز كل نافذة منبثقة أعادها الخادم لهذا الجهاز.

Pushwoosh.moduleRegistry.webPopups.getAvailableCodes();

getState(): object

يعيد لقطة من حالة النافذة المنبثقة على الويب: visible (الرمز على الشاشة، أو null)، queued (الرموز التي تنتظر فتحة العرض)، waiting (الرموز مع مؤقت تأخير مسلح)، و available (كل رمز أعاده الخادم).

Pushwoosh.moduleRegistry.webPopups.getState();

دعم تطبيق الويب التقدمي

Anchor link to

لدمج Pushwoosh في تطبيق الويب التقدمي (PWA) الخاص بك، اتبع الخطوات الموضحة أدناه.

1. انسخ المسار إلى ملف Service Worker الخاص بك:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- عنوان url لعامل الخدمة الخاص بك
  });
}

ثم، استخدم المعلمة serviceWorkerUrl أثناء تهيئة WebSDK كما يلي:

var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- عنوان url لعامل الخدمة الخاص بك
}]);

لا يقوم WebSDK بتسجيل Service Worker الجديد على الفور؛ يتم تسجيل Service Worker عند الحاجة إليه:

  • عندما يتلقى جهاز رمز إشعار (عند تسجيل الجهاز أو إعادة الاشتراك)،
  • عند حذف رمز إشعار (عند إزالة جهاز من قاعدة المستخدمين).

إنه يسرع تحميل صفحاتك عن طريق تقصير عدد طلبات الخادم.

لا تسمح المتصفحات بتسجيل عاملين خدمة مختلفين في نفس الوقت (اقرأ المزيد: https://github.com/w3c/ServiceWorker/issues/921)، لذلك لجعل PWA الخاص بك يعمل بشكل صحيح، يجب تسجيل عامل خدمة مشترك لقاعدة التعليمات البرمجية الخاصة بك وقاعدة التعليمات البرمجية لـ Pushwoosh.

2. أضف السلسلة التالية إلى Service Worker الخاص بك (في البداية أو في النهاية، لا يهم):

importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);

وبالتالي فإنك تمكّن تلقي ومعالجة الإشعارات الفورية المرسلة عبر خدمات Pushwoosh لـ Service Worker الخاص بك.

التثبيت من Google Tag Manager

Anchor link to

استخدم الكود التالي في Google Tag Manager لتهيئة Pushwoosh SDK. قم بإنشاء علامة HTML مخصصة والصق الكود أدناه. تأكد من تغيير رمز تطبيق Pushwoosh الخاص بك، ومعرف موقع Safari، وعنوان URL لصورة الإشعار الافتراضية.
قم أيضًا بتعيين أولوية إطلاق العلامة عالية (على سبيل المثال: 100) وقم بتشغيلها على جميع الصفحات. انظر أدناه للحصول على لقطة شاشة.

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>