वेब पुश SDK 3.0

पूर्वापेक्षाएँ

अपनी HTTPS वेबसाइट पर वेब पुश SDK के एकीकरण के साथ आगे बढ़ने के लिए, आपको निम्नलिखित कार्य करने होंगे:

अपना Pushwoosh एप्लिकेशन कोड खोजें।
क्रोम और फ़ायरफ़ॉक्स: अपनी फायरबेस API कुंजी और प्रेषक आईडी खोजें। ऐसा करने के लिए, कृपया क्रोम और फ़ायरफ़ॉक्स कॉन्फ़िगरेशन गाइड के चरण 1-3 का पालन करें।
सफारी: अपनी वेबसाइट पुश आईडी खोजें।
Pushwoosh वेब पुश SDK डाउनलोड करें।

एकीकरण

GitHub पर एकीकरण का नमूना

Pushwoosh वेब पुश SDK प्राप्त करें और इसे अनज़िप करें। आपके पास निम्नलिखित फाइलें होनी चाहिए:

pushwoosh-service-worker.js

इन सभी फाइलों को अपनी वेबसाइट डायरेक्टरी के टॉप-लेवल रूट में रखें।

SDK को इनिशियलाइज़ करें:

हमारे CDN से SDK को असिंक्रोनस रूप से शामिल करें।

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>

वेब पुश SDK को इनिशियलाइज़ करें और सुनिश्चित करें कि SDK पूरी तरह से लोड होने तक इनिशियलाइज़ेशन को कतार में रखें।

<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // संभावित मान: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // Pushwoosh कंट्रोल पैनल से आपका एप्लिकेशन कोड
    apiToken: 'XXXXXXX', //  डिवाइस API टोकन
    safariWebsitePushID: 'web.com.example.domain', //  अद्वितीय रिवर्स-डोमेन स्ट्रिंग, जो आपके Apple डेवलपर पोर्टल में प्राप्त होती है। केवल तभी आवश्यक है जब आप सफारी ब्राउज़र पर पुश सूचनाएं भेजते हैं
    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>

वेब पॉपअप

अपनी साइट पर वेब पॉपअप अभियान सक्षम करने के लिए अपने init ऑब्जेक्ट में webPopups जोड़ें।

webPopups: {
  enable: true,
},

वेब पॉपअप अभियान आपके द्वारा कंट्रोल पैनल में कॉन्फ़िगर किए गए ओवरले प्रदर्शित करते हैं जैसे प्रोमो, घोषणाएं, या लीड कैप्चर फॉर्म। कस्टम सदस्यता पॉपअप (subscribePopup) के विपरीत, जो केवल वेब पुश ऑप्ट-इन को संभालता है, वेब पॉपअप अभियान आपके द्वारा कॉन्फ़िगर की गई कोई भी सामग्री प्रदर्शित कर सकते हैं। कंट्रोल पैनल में सेटअप के लिए, वेब पॉपअप को समझना देखें।

पुश सदस्यता बटन

अपने उपयोगकर्ताओं को पुश सूचनाओं के लिए सदस्यता लेने के लिए प्रेरित करने के लिए, हम आपकी वेबसाइट पर पुश सदस्यता बटन लागू करने की सलाह देते हैं। उपयोगकर्ता अनुभव को बढ़ाएं और अधिक ग्राहक प्राप्त करें!

कॉन्फ़िगरेशन

अपनी वेबसाइट में पुश सूचनाओं को लागू करना समाप्त करने के लिए, आपको हमारे चरण-दर-चरण गाइड का पालन करते हुए अपने Pushwoosh कंट्रोल पैनल में वेब प्लेटफॉर्म को कॉन्फ़िगर करना होगा:

एक अलग स्कोप में सर्विस वर्कर को पंजीकृत करना

कभी-कभी आप सर्विस वर्कर फ़ाइल को वेबसाइट की रूट डायरेक्टरी में नहीं बल्कि एक सबडायरेक्टरी में रख सकते हैं।

इस मामले में, एक पैरामीटर serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js” जोड़कर कॉन्फ़िगरेशन (चरण 4.3) को संशोधित करें, जहां /push-notifications/pushwoosh-service-worker.js pushwoosh-service-worker.js फ़ाइल का पथ है।

इवेंट हैंडलर

Pushwoosh वेब SDK 3.0 में आप कुछ घटनाओं को ट्रैक करने के लिए उनकी सदस्यता ले सकते हैं**,** या यदि आपको अब उन्हें ट्रैक करने की आवश्यकता नहीं है तो घटनाओं से सदस्यता समाप्त कर सकते हैं।

वेब SDK 3.0 लोड को ट्रैक करने के लिए, onLoad इवेंट को इस प्रकार फायर करें:

// लोड इवेंट
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);

सही वेब 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 इवेंट्स

सब्सक्राइब इवेंट

एक उपयोगकर्ता द्वारा पुश सूचनाएं प्राप्त करने के लिए सहमत होने के बाद निष्पादित होता है।

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

अनसब्सक्राइब इवेंट

एक डिवाइस को सूचनाओं से अपंजीकृत करने के बाद निष्पादित होता है।

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

सदस्यता विजेट इवेंट्स

एक सदस्यता प्रॉम्प्ट विजेट के प्रदर्शन को ट्रैक करें।

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

सूचना अनुमति संवाद इवेंट्स

देशी सदस्यता संवाद के प्रदर्शन को ट्रैक करें।

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);
  });
}]);

अनुमति इवेंट्स

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

पुश प्राप्त करें इवेंट

एक डिवाइस पर पुश डिलीवरी को ट्रैक करें।

Pushwoosh.push(['onLoad', (api) => {
  // जब एक पुश सूचना प्रदर्शित होती है तो निष्पादित होता है।
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);

सूचना इवेंट्स

ट्रैक करें कि क्या एक पुश सूचना उपयोगकर्ता द्वारा खोली या बंद की गई है।

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);
  });
}]);

इनबॉक्स इवेंट्स

इनबॉक्स में भेजे गए सूचनाओं को ट्रैक करें।

Pushwoosh.push(['onLoad', (api) => {
  // इनबॉक्स संदेश प्राप्त होने और 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);
  });
}]);

कस्टम सदस्यता पॉपअप इवेंट्स

कस्टम सदस्यता पॉपअप इवेंट्स को संभालने के बारे में विवरण के लिए, कृपया कस्टम सदस्यता पॉपअप इवेंट्स गाइड देखें।

API

वेब पुश 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

उन्नत पंजीकरण विधि जो एक ही 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, // क्रोम प्लेटफ़ॉर्म (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): सफारी प्लेटफ़ॉर्म
TPlatformChrome (11): क्रोम प्लेटफ़ॉर्म
TPlatformFirefox (12): फ़ायरफ़ॉक्स प्लेटफ़ॉर्म

टैग ऑपरेशन प्रकार:

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

टैग मान बढ़ाएँ

किसी नंबर टैग का मान बढ़ाने के लिए, operation पैरामीटर का उपयोग ‘increment’ मान के साथ इस प्रकार करें:

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

टैग मान जोड़ें

मौजूदा सूची टैग में नए मान जोड़ने के लिए, operation पैरामीटर का उपयोग ‘append’ मान के साथ इस प्रकार करें:

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

टैग मान हटाएं

किसी सूची टैग से एक मान हटाने के लिए, operation पैरामीटर का उपयोग ‘remove’ मान के साथ इस प्रकार करें:

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

सार्वजनिक विधियाँ

Pushwoosh.subscribe()

इस विधि का उपयोग पुश सूचनाओं के लिए उपयोगकर्ता की अनुमति का अनुरोध करने के लिए किया जाता है। यदि कोई उपयोगकर्ता पहले से ही सब्सक्राइब है, तो विधि निष्पादन बंद कर देगी।

यदि किसी उपयोगकर्ता ने अभी तक पुश के लिए सब्सक्राइब नहीं किया है:

1. पुश सूचनाओं के लिए अनुमति का अनुरोध किया जाता है।

2. यदि कोई उपयोगकर्ता सूचनाओं की अनुमति देता है, तो onSubscribe इवेंट ट्रिगर होता है।

Pushwoosh.subscribe() स्वचालित रूप से निष्पादित होता है यदि SDK इनिशियलाइज़ेशन के दौरान autoSubscribe: true सेट किया गया है।

यदि आपने इनिशियलाइज़ेशन के दौरान autoSubscribe: false पैरामीटर का उपयोग करके उपयोगकर्ता को पुश के लिए सब्सक्राइब करने के लिए मैन्युअल रूप से प्रेरित करने का विकल्प चुना है तो इस विधि को कॉल करें:

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

Pushwoosh.unsubscribe()

/unregisterDevice विधि निष्पादित होती है।
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()

यदि उपलब्ध हो तो यूज़र आईडी लौटाता है।

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 विधियाँ

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

प्रोग्रेसिव वेब ऐप समर्थन

Pushwoosh को अपने प्रोग्रेसिव वेब एप्लिकेशन (PWA) में एकीकृत करने के लिए, नीचे वर्णित चरणों का पालन करें।

1. अपनी सर्विस वर्कर फ़ाइल का पथ कॉपी करें:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- आपका सर्विस वर्कर url
  });
}

फिर, WebSDK को इनिशियलाइज़ करते समय serviceWorkerUrl पैरामीटर का उपयोग इस प्रकार करें:

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 नए सर्विस वर्कर को तुरंत पंजीकृत नहीं करता है; एक सर्विस वर्कर तब पंजीकृत होता है जब इसकी आवश्यकता होती है:

जब कोई डिवाइस पुश टोकन प्राप्त करता है (डिवाइस पंजीकरण या पुनः सदस्यता पर),
जब एक पुश टोकन हटा दिया जाता है (उपयोगकर्ता आधार से डिवाइस को हटाने पर)।

यह सर्वर अनुरोधों की संख्या को कम करके आपके पृष्ठों की लोडिंग को गति देता है।

ब्राउज़र एक ही समय में दो अलग-अलग सर्विस वर्करों को पंजीकृत करने की अनुमति नहीं देते हैं (और पढ़ें: https://github.com/w3c/ServiceWorker/issues/921), इसलिए आपके PWA को सही ढंग से काम करने के लिए, आपके कोडबेस और Pushwoosh कोडबेस के लिए एक सामान्य सर्विस वर्कर पंजीकृत होना चाहिए।

2. अपने सर्विस वर्कर में निम्नलिखित स्ट्रिंग जोड़ें (शुरुआत में या अंत में, इससे कोई फर्क नहीं पड़ता):

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

इस प्रकार आप अपने सर्विस वर्कर के लिए Pushwoosh सेवाओं के माध्यम से भेजी गई पुश सूचनाओं को प्राप्त करने और संसाधित करने में सक्षम बनाते हैं।

गूगल टैग मैनेजर से इंस्टॉल करना

Pushwoosh SDK को इनिशियलाइज़ करने के लिए अपने गूगल टैग मैनेजर में निम्नलिखित कोड का उपयोग करें। एक कस्टम HTML टैग बनाएं और नीचे दिए गए कोड को पेस्ट करें। अपने Pushwoosh एप्लिकेशन कोड, सफारी वेबसाइट आईडी, और डिफ़ॉल्ट सूचना छवि 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>