ข้ามไปยังเนื้อหา

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

การกำหนดค่า

Anchor link to
  1. เลือกตัวเลือก Web push ขณะสร้างโปรเจกต์
  1. เลือก http ป้อน URL ของเว็บไซต์และชื่อโปรเจกต์ของคุณ
  1. กำหนดค่าทั้ง Chrome และ Firefox ด้วยข้อมูลรับรองโปรเจกต์ FCM ของคุณ

การผสานการทำงาน

Anchor link to

1. สร้างไฟล์ pushwoosh-web-pushes-http-sdk.js ในไดเรกทอรีราก (root directory) ของเว็บไซต์ของคุณด้วยเนื้อหาต่อไปนี้:

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. หรืออีกทางหนึ่ง หากคุณต้องการให้ Notification Subscriptions ปรากฏขึ้นโดยอัตโนมัติ (ตรงข้ามกับข้อ 3 ข้างต้น) ให้ใช้โค้ดต่อไปนี้:

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

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