npm के साथ उपयोग

npm के माध्यम से Pushwoosh वेब पुश SDK इंस्टॉल करना

यहां बताया गया है कि npm का उपयोग करके अपने प्रोजेक्ट में Pushwoosh वेब पुश नोटिफिकेशन SDK को कैसे इंस्टॉल और उपयोग करें। यह गाइड मानता है कि आपको npm और JavaScript मॉड्यूल इंपोर्ट की बुनियादी समझ है।

SDK इंस्टॉल करें:

npm install web-push-notifications

संस्करण 3.45.0 से, Pushwoosh वेब SDK ने कोर SDK और इसके UI विजेट्स को इंपोर्ट करने के लिए एक मॉड्यूलर दृष्टिकोण पेश किया है।

अलग-अलग इंपोर्ट: अब आपको मुख्य Pushwoosh क्लास और किसी भी वांछित विजेट (जैसे PWSubscriptionButtonWidget, PWSubscribePopupWidget, आदि) को अलग-अलग इंपोर्ट करने की आवश्यकता है। इस संस्करण से पहले, सभी कंपोनेंट्स को आमतौर पर एक ही इंपोर्ट में बंडल किया जाता था।
ES2020 कंपाइलेशन: इस संस्करण के बाद से SDK को ES2020 JavaScript स्पेसिफिकेशन में कंपाइल किया गया है। कृपया सुनिश्चित करें कि आपका बिल्ड एनवायरनमेंट और टारगेट ब्राउज़र ES2020 सुविधाओं का समर्थन करते हैं।

सर्विस वर्कर सेटअप

npm के माध्यम से SDK का उपयोग करते समय, सर्विस वर्कर फ़ाइल यहां स्थित होती है:

node_modules/web-push-notifications/service-worker.js

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

उदाहरण के लिए, एक वेबपैक प्रोजेक्ट में, आप copy-webpack-plugin का उपयोग कर सकते हैं:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Copies to output directory root
        }
      ]
    })
  ]
};

यदि आप Vite का उपयोग कर रहे हैं, तो आप vite-plugin-static-copy प्लगइन का उपयोग कर सकते हैं:

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  // ...other vite config
  plugins: [
    // ...other plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Copies to build output root
        }
      ]
    })
  ]
});

अन्य बिल्ड सिस्टम के लिए, यह सुनिश्चित करने के लिए उनके संबंधित फ़ाइल कॉपी करने के तंत्र का उपयोग करें कि सर्विस वर्कर आपकी वेबसाइट के रूट पर उपलब्ध है।

बिल्ट-इन विजेट्स

Pushwoosh वेब SDK उपयोगकर्ता इंटरैक्शन को बढ़ाने और सदस्यता प्रक्रिया को सुव्यवस्थित करने के लिए चार बिल्ट-इन UI विजेट्स के साथ आता है। जबकि PWSubscriptionPromptWidget मुख्य रूप से Pushwoosh कंट्रोल पैनल और ब्राउज़र सेटिंग्स के माध्यम से कॉन्फ़िगर किया जाता है, अन्य तीन विजेट्स (PWSubscriptionButtonWidget, PWSubscribePopupWidget, और PWInboxWidget) SDK के init मेथड के भीतर सीधे विस्तृत कॉन्फ़िगरेशन विकल्प प्रदान करते हैं।

यहां प्रत्येक विजेट का एक अवलोकन है:

सब्सक्रिप्शन प्रॉम्प्ट (PWSubscriptionPromptWidget) यह विजेट उपयोगकर्ताओं से पुश नोटिफिकेशन भेजने की अनुमति मांगने के लिए ब्राउज़र का नेटिव प्रॉम्प्ट प्रदर्शित करने के लिए जिम्मेदार है। इसका व्यवहार काफी हद तक ब्राउज़र मानकों और आपके Pushwoosh कंट्रोल पैनल में कॉन्फ़िगर की गई सेटिंग्स द्वारा नियंत्रित होता है। इसमें pushwoosh.push(['init', {...}]) कॉल के भीतर कोई विशिष्ट कॉन्फ़िगरेशन पैरामीटर नहीं हैं।
सब्सक्रिप्शन बटन (PWSubscriptionButtonWidget) यह विजेट आपकी साइट पर एक फ्लोटिंग बटन (अक्सर एक घंटी आइकन) जोड़ता है, जिससे उपयोगकर्ता आसानी से अपनी नोटिफिकेशन प्राथमिकताओं को सब्सक्राइब या प्रबंधित कर सकते हैं।

कॉन्फ़िगरेशन: इस विजेट के लिए सेटिंग्स init कॉल में subscribeWidget ऑब्जेक्ट के तहत प्रबंधित की जाती हैं।
और जानें: पुश सब्सक्रिप्शन बटन

कस्टम सब्सक्रिप्शन पॉपअप (PWSubscribePopupWidget) एक अनुकूलन योग्य पॉप-अप जो नेटिव ब्राउज़र प्रॉम्प्ट दिखाने से पहले नोटिफिकेशन अनुमतियों के लिए पूछने का एक अधिक आकर्षक तरीका प्रदान करता है।

कॉन्फ़िगरेशन: init कॉल में subscribePopup ऑब्जेक्ट का उपयोग करके इसकी उपस्थिति और व्यवहार को अनुकूलित करें।
और जानें: कस्टम सब्सक्रिप्शन पॉपअप

इनबॉक्स विजेट (PWInboxWidget) यह विजेट एक इन-ऐप संदेश केंद्र को एकीकृत करता है, जिससे उपयोगकर्ता रिच पुश नोटिफिकेशन का इतिहास देख सकते हैं।

कॉन्फ़िगरेशन: init कॉल में inboxWidget ऑब्जेक्ट के माध्यम से प्रबंधित किया जाता है।
और जानें: वेब इनबॉक्स विजेट

आप नीचे दिए गए उदाहरणों में दिखाए अनुसार इन विजेट्स को इनिशियलाइज़ और रन कर सकते हैं:

इंपोर्ट और इनिशियलाइज़ करें

import { Pushwoosh } from 'web-push-notifications';
import { PWSubscriptionPromptWidget } from 'web-push-notifications/widget-subscription-prompt';
import { PWSubscriptionButtonWidget } from 'web-push-notifications/widget-subscription-button';
import { PWSubscribePopupWidget } from 'web-push-notifications/widget-subscribe-popup';
import { PWInboxWidget } from 'web-push-notifications/widget-inbox';

const pushwoosh = new Pushwoosh();

pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX', // आपका Pushwoosh एप्लीकेशन कोड
  apiToken: 'XXXXXXX', // डिवाइस API टोकन
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // आपके कॉपी किए गए सर्विस वर्कर का पाथ

  // कस्टम सब्सक्रिप्शन पॉपअप सेटिंग्स
  subscribePopup: {
    enable: true // सब्सक्रिप्शन पॉपअप को सक्षम करें
    // अन्य विकल्प यहां जोड़े जा सकते हैं
  },

  // पुश सब्सक्रिप्शन बटन सेटिंग्स
  subscribeWidget: {
    enable: true // सब्सक्रिप्शन बटन विजेट को सक्षम करें
    // अन्य विकल्प यहां जोड़े जा सकते हैं
  },

  // इनबॉक्स विजेट सेटिंग्स
  inboxWidget: {
    enable: true // इनबॉक्स विजेट को सक्षम करें
    // अन्य विकल्प यहां जोड़े जा सकते हैं
  }
}]);

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionPromptWidget इनिशियलाइज़ेशन विफल:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionButtonWidget इनिशियलाइज़ेशन विफल:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscribePopupWidget इनिशियलाइज़ेशन विफल:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWInboxWidget इनिशियलाइज़ेशन विफल:', error);
  }
});

लिंक्स

React और Vite के साथ एक उदाहरण एप्लिकेशन देखें: https://github.com/Pushwoosh/websdk-npm-vite-react-example