إشعارات الويب لمواقع HTTP في Chrome و Firefox

انتبه

التعليمات التالية موحدة لإعدادات Chrome و Firefox باستثناء المقالة الأولى، وهي فريدة لكل منصة.

الإعداد

1. حدد خيار Web push أثناء إنشاء مشروع.

2. اختر http، وأدخل عنوان URL لموقعك واسم المشروع.

3. قم بإعداد كل من Chrome و Firefox باستخدام بيانات اعتماد مشروع FCM الخاص بك.

ملاحظة

تعرف على كيفية الحصول على بيانات اعتماد FCM في دليل إعداد Chrome و Firefox.

التكامل

1. أنشئ ملف pushwoosh-web-pushes-http-sdk.js في الدليل الجذر لموقعك الإلكتروني بالمحتوى التالي:

var pushwoosh = {
  PUSHWOOSH_APPLICATION_CODE: 'XXXX-XXXX',
  PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER: 'pw_application_code',
  init: function (applicationCode) {
    this.PUSHWOOSH_APPLICATION_CODE = applicationCode;
    window.addEventListener('message', this.pwReceiveMessage, false);
  },
  tryInitUsingGetParameter: function () {
    var applicationCode = this.getQueryVariable(this.PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER);
    console.log(applicationCode);
    if (applicationCode) {
      this.init(applicationCode);
    }
  },
  pwReceiveMessage: function (event) {
    if (event.data == 'allowPushNotifications') {
      localStorage.setItem('pwAllowPushNotifications', true);
    }
  },
  isBrowserChrome: function () {
    return navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  },
  isBrowserFirefox: function () {
    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  },
  isBrowserSafari: function () {
    return navigator.userAgent.toLowerCase().indexOf('safari') > -1 && !this.isBrowserChrome();
  },
  isBrowserSupported: function () {
    return this.isBrowserChrome() || this.isBrowserFirefox();
  },
  subscribeAtStart: function () {
    if (this.isBrowserSupported()) {
      if (null === localStorage.getItem('pwAllowPushNotifications')) {
        this.showSubscriptionWindow();
      }
    }
  },
  isSubscribedForPushNotifications: function () {
    return true == localStorage.getItem('pwAllowPushNotifications');
  },
  showSubscriptionWindow: function () {
    if (this.isBrowserSupported()) {
      var windowWidth = screen.width / 2;
      var windowHeight = screen.height / 2;

      var windowLeft = screen.width / 2 - windowWidth / 2;
      var windowRight = screen.height / 2 - windowHeight / 2;

      var URL = 'https://' + this.PUSHWOOSH_APPLICATION_CODE + '.chrome.pushwoosh.com/';
      var pwSubscribeWindow = window.open(URL, '_blank', 'width=' + windowWidth + ',height=' + windowHeight + ',resizable=yes,scrollbars=yes,status=yes,left=' + windowLeft + ',top=' + windowRight);
    }
  },
  getQueryVariable: function (variable) {
    // document.currentScript won't work if this code is called from function in event lister
    if (document.currentScript) {
      var urlParts = document.currentScript.src.split('?');
      if (typeof urlParts[1] !== 'undefined') {
        var vars = urlParts[1].split('&');
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      }
    }
    else {
      console.error('Cannot get current script address');
    }
    return null;
  }
};
pushwoosh.tryInitUsingGetParameter();

2. قم بتضمين الملف السابق في موقعك الإلكتروني وقم بتهيئته باستخدام رمز التطبيق (application code) بدلاً من XXXXX-XXXXX

<!--[if !IE]><!-->
    <script src="/pushwoosh-web-pushes-http-sdk.js?pw_application_code=XXXXX-XXXXX"></script>
<!--<![endif]-->

3. لإنشاء زر اشتراك في الإشعارات (Push Subscription)، استخدم ما يلي:

<button onclick="pushwoosh.showSubscriptionWindow()">Subscribe to push notifications</button>

4. بدلاً من ذلك، إذا كنت تريد أن تظهر اشتراكات الإشعارات تلقائيًا (على عكس رقم 4 أعلاه)، فاستخدم ما يلي:

<script>pushwoosh.subscribeAtStart();</script>

ملاحظة

هام

لا يُسمح بظهور نافذة منبثقة إلا بإذن المستخدم بسبب سياسة أمان المتصفح: يتم تفعيل أدوات حظر النوافذ المنبثقة تلقائيًا بدون إجراء مباشر من المستخدم.
سيقوم المتصفح بحظر النوافذ المنبثقة تلقائيًا حتى تسمح بها صراحةً بنقرة زر.
سيعمل زر اشتراك الإشعارات المذكور أعلاه بشكل لا تشوبه شائبة دون الحاجة إلى أذونات إضافية من المستخدم.

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