انتقل إلى المحتوى
أدلة المستخدم أدلة كيفية الاستخدام الدعم طلب عرض توضيحي تسجيل الدخول
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 Configuration (راجع المتطلبات الأساسية أعلاه)
    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'     // اختياري، قم بتعيين Tags مخصصة
    }
}]);
</script>

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

Anchor link to

يتم تحميل حملات النوافذ المنبثقة على الويب افتراضيًا — لا يلزم إدخال webPopups في كائن init الخاص بك. أضف واحدًا فقط لإلغاء الاشتراك أو تغيير الإعدادات الافتراضية:

webPopups: {
  // enable: false, // اختياري، إلغاء الاشتراك بالكامل: لا يتم تحميل الحزمة أبدًا
  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 الخاصة بك باتباع أدلةنا خطوة بخطوة:

تحتوي شاشة التكوين نفسها أيضًا على بطاقة Web SDK configuration.

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

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!');
  }


  // To subscribe to an event:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)


  // To unsubscribe from an event:
  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) => {
  // Executed on displaying of the Subscription Prompt widget
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Triggered event: show-subscription-widget');
  });


  // Executed on hiding of the Subscription Prompt widget
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Triggered event: hide-subscription-widget');
  });
}]);

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

Anchor link to

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

Pushwoosh.push(['onLoad', function (api) {
  // Executed on permission dialog displaying
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Triggered event: show-notification-permission-dialog');
  });


  // Executed on hiding the permission dialog with one of three possible statuses:
  // 1. default - the dialog is closed
  // 2. granted - permission is granted
  // 3. denied - permission is 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) => {
  // Executed during the SDK initialization if 'autoSubscribe: false' or/and if a user ignores a push notification prompt.
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Triggered event: permission-default');
  });


  // Executed during the SDK initialization if notifications are blocked or once a user blocks push notifications.
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Triggered event: permission-denied');
  });


  // Executed during the SDK initialization if notifications are allowed or once a user allows push notifications.
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Triggered event: permission-granted');
  });
}]);

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

Anchor link to

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

Pushwoosh.push(['onLoad', (api) => {
  // Executed when a push notification is displayed.
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);

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

Anchor link to

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

Pushwoosh.push(['onLoad', (api) => {
  // Executed when a user clicks on notification.
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Triggered event: open-notification', payload.notification);
  });


  // Executed when a user closes a push notification.
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);

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

Anchor link to

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

Pushwoosh.push(['onLoad', (api) => {
  // Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB.
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.message);
  });


  // Executed after the Inbox is updated automatically while the page is loading.
  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) => {
  // Executed once web popups have loaded and the automatic display pipeline has run for the current page
  Pushwoosh.addEventHandler('web-popups-ready', () => {
    console.log('Triggered event: web-popups-ready');
  });


  // Executed when a web popup is shown, automatically or via webPopups.show()
  Pushwoosh.addEventHandler('show-web-popup', (payload) => {
    console.log('Triggered event: show-web-popup', payload.code, payload.trigger); // trigger: 'auto' | 'api'
  });


  // Executed when a web popup is hidden
  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. تعيد جميع الطرق كائنات Promise.

Pushwoosh.push((api) => {
  // Set tags for a user
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });


  // Get tags for a user from server
  api.getTags();


  // Register user ID
  api.registerUser('user123');


    // Register user email
  api.registerEmail('user@example.com');


  // Register SMS number
  api.registerSmsNumber('+15551234567');


  // Register WhatsApp number
  api.registerWhatsappNumber('+1234567890');


  // Post an Event
  api.postEvent('myEventName', {attributeName: 'attributeValue'});


  //Unregister from notifications
  api.unregisterDevice();


  // Set the device language (overrides the value in the "Language" Tag)
  api.setLanguage('es');


  // Alternatively Multi-register user with devices and channels
  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. التطبيقات التي لا تحتوي على قسم تكوين Safari تسجل أجهزة Safari كـ TPlatformChrome (11) بدلاً من ذلك.
  • TPlatformChrome (11): منصة Chrome
  • TPlatformFirefox (12): منصة Firefox

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

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

الفوائد:

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

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

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

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

تتوفر واجهة برمجة التطبيقات البرمجية للنوافذ المنبثقة على الويب كلما تم تحميل الأداة، وهو الإعداد الافتراضي (انظر أعلاه). يمكنك الوصول إليها عبر 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') // <- your service worker 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', // <- your service worker url
}]);

لا يقوم 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>