# HTTP वेबसाइटों के लिए Chrome और Firefox वेब पुश

<Aside type="caution" title="ध्यान दें">
निम्नलिखित निर्देश Chrome और Firefox कॉन्फ़िगरेशन के लिए **एकीकृत** हैं, **सिवाय** पहले लेख के, जो प्रत्येक प्लेटफ़ॉर्म के लिए अद्वितीय है।
</Aside>

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

1. प्रोजेक्ट बनाते समय वेब पुश विकल्प चुनें।

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-1.webp" alt=""/>

2. http चुनें, अपनी साइट का URL और प्रोजेक्ट का नाम दर्ज करें।

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-2.webp" alt=""/>

3. अपने FCM प्रोजेक्ट क्रेडेंशियल्स के साथ Chrome और Firefox दोनों को कॉन्फ़िगर करें।

<Aside type="note">
[Chrome और Firefox कॉन्फ़िगरेशन गाइड](/hi/developer/first-steps/connect-messaging-services/chrome-configuration/) में FCM क्रेडेंशियल्स कैसे प्राप्त करें, यह जानें।
</Aside>

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-3.webp" alt=""/>

## इंटीग्रेशन

**1.** अपनी वेबसाइट की रूट डायरेक्टरी में निम्नलिखित सामग्री के साथ **pushwoosh-web-pushes-http-sdk.js** फ़ाइल बनाएँ:

```javascript
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.** पिछली फ़ाइल को अपनी वेबसाइट में शामिल करें और XXXXX-XXXXX के बजाय **एप्लिकेशन कोड** का उपयोग करके इसे इनिशियलाइज़ करें।

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

**3.** पुश सब्सक्रिप्शन बटन बनाने के लिए, निम्नलिखित का उपयोग करें:

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

**4.** वैकल्पिक रूप से, यदि आप चाहते हैं कि नोटिफिकेशन सब्सक्रिप्शन स्वचालित रूप से पॉप अप हों (उपरोक्त #4 के विपरीत), तो निम्नलिखित का उपयोग करें:

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

<Aside type="note">
#### महत्वपूर्ण

ब्राउज़र की सुरक्षा नीति के कारण पॉप-अप विंडो की अनुमति केवल उपयोगकर्ता की अनुमति से ही दी जाती है: पॉप-अप ब्लॉकर्स बिना किसी सीधी उपयोगकर्ता कार्रवाई के स्वचालित रूप से संलग्न हो जाते हैं। \
ब्राउज़र पॉप-अप को स्वचालित रूप से तब तक ब्लॉक कर देगा जब तक आप बटन क्लिक के साथ स्पष्ट रूप से उनकी अनुमति नहीं देते।\
उपरोक्त पुश सब्सक्रिप्शन बटन बिना किसी अतिरिक्त उपयोगकर्ता अनुमति के त्रुटिहीन रूप से काम करेगा।
</Aside>

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-4.webp" alt=""/>

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-5.webp" alt=""/>

परिणामस्वरूप, उपयोगकर्ता को वेबसाइट से पुश नोटिफिकेशन के लिए सब्सक्राइब करने के लिए प्रेरित किया जाएगा:

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-6.webp" alt=""/>