# Web push สำหรับเว็บไซต์ HTTP บน Chrome และ Firefox

<Aside type="caution" title="โปรดทราบ">
คำแนะนำต่อไปนี้เป็นคำแนะนำที่ **ใช้ร่วมกัน** สำหรับการกำหนดค่า Chrome และ Firefox **ยกเว้น** บทความแรกซึ่งเป็นเอกลักษณ์สำหรับแต่ละแพลตฟอร์ม
</Aside>

## การกำหนดค่า

1. เลือกตัวเลือก Web push ขณะสร้างโปรเจกต์

<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. กำหนดค่าทั้ง Chrome และ Firefox ด้วยข้อมูลรับรองโปรเจกต์ FCM ของคุณ

<Aside type="note">
เรียนรู้วิธีรับข้อมูลรับรอง FCM ได้ใน [คู่มือการกำหนดค่า Chrome และ Firefox](/th/developer/first-steps/connect-messaging-services/chrome-configuration/)
</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.** รวมไฟล์ก่อนหน้านี้เข้ากับเว็บไซต์ของคุณและเริ่มต้นใช้งานโดยใช้ **application code** แทนที่ XXXXX-XXXXX

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

**3.** หากต้องการสร้างปุ่มสมัครรับ Push ให้ใช้โค้ดต่อไปนี้:

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

**4.** หรืออีกทางหนึ่ง หากคุณต้องการให้การสมัครรับการแจ้งเตือนปรากฏขึ้นโดยอัตโนมัติ (ตรงข้ามกับข้อ 3 ข้างต้น) ให้ใช้โค้ดต่อไปนี้:

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

<Aside type="note">
#### ข้อสำคัญ

หน้าต่างป๊อปอัปจะได้รับอนุญาตก็ต่อเมื่อได้รับความยินยอมจากผู้ใช้เท่านั้น เนื่องจากนโยบายความปลอดภัยของเบราว์เซอร์: ตัวบล็อกป๊อปอัปจะทำงานโดยอัตโนมัติหากไม่มีการกระทำโดยตรงจากผู้ใช้ \
เบราว์เซอร์จะบล็อกป๊อปอัปโดยอัตโนมัติจนกว่าคุณจะอนุญาตอย่างชัดเจนด้วยการคลิกปุ่ม\
ปุ่มสมัครรับ Push ที่กล่าวถึงข้างต้นจะทำงานได้อย่างไม่มีที่ติโดยไม่จำเป็นต้องขออนุญาตเพิ่มเติมจากผู้ใช้
</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=""/>

ผลลัพธ์ที่ได้คือ ผู้ใช้จะได้รับแจ้งให้สมัครรับ push notifications จากเว็บไซต์:

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