انتقل إلى المحتوى
أدلة المستخدم الدعم طلب عرض توضيحي تسجيل الدخول
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 Control Panel
    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', // اختياري، قم بتعيين User ID مخصص
    tags: {
        'Name': 'John Smith'     // اختياري، قم بتعيين Tags مخصصة
    }
}]);
</script>

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

Anchor link to

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

webPopups: {
  enable: true,
  autoShow: true, // اختياري، اضبط على false لتحميل النوافذ المنبثقة دون عرضها تلقائيًا — انظر أساليب WebPopups أدناه
},

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

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

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

Anchor link to

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

التكوين

Anchor link to

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

تسجيل service worker في نطاق مختلف

Anchor link to

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

في هذه الحالة، قم بتعديل التكوين (الخطوة 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 كما يلي:

// حدث التحميل
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);

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

// حدث الاستعداد
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); // المشغل: 'auto' | 'api'
  });


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

API

Anchor link to

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

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


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


  // تسجيل User ID
  api.registerUser('user123');


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


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


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


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


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


  // تعيين لغة الجهاز (يتجاوز القيمة في "Language" Tag)
  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: {                         // اختياري: قيم Tag مع العمليات
      'UserType': {
        operation: TTagOperationSet,     // تعيين قيمة Tag (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // إلحاق بقيمة Tag (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // زيادة قيمة Tag (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

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

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

الفوائد:

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

مثال على إرسال Tags إلى 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);
    });
});

زيادة قيمة Tag

Anchor link to

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

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

إلحاق قيم Tag

Anchor link to

لإلحاق قيم جديدة بـ List Tag الحالي، استخدم المعلمة operation مع القيمة ‘append’ كما يلي:

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

إزالة قيمة Tag

Anchor link to

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

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

الأساليب العامة

Anchor link to

Pushwoosh.subscribe()

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

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

1. يتم طلب الإذن للإشعارات الفورية.

2. إذا سمح المستخدم بالإشعارات، يتم تشغيل حدث 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();

دعم تطبيق الويب التقدمي (PWA)

Anchor link to

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

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

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

بعد ذلك، استخدم المعلمة 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 لـ service worker الخاص بك
}]);

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

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

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

لا تسمح المتصفحات بتسجيل اثنين من Service Workers المختلفين في نفس الوقت (اقرأ المزيد: https://github.com/w3c/ServiceWorker/issues/921)، لذلك لجعل PWA الخاص بك يعمل بشكل صحيح، يجب تسجيل Service Worker مشترك لقاعدة التعليمات البرمجية الخاصة بك وقاعدة التعليمات البرمجية لـ 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 Application Code و Safari Website ID وعنوان 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>