Site icon บริษัท โค๊ดบี จำกัด

วิธีทำ Web Push Notification แบบ Facebook ด้วย OneSignal

codebee
onesignal-เว็บ-push-notification

onesignal-เว็บ-push-notification

<h4>วิธีทำ Web Push Notification แบบ Facebook ด้วย OneSignal<&sol;h4>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีทำ Web Push Notification แบบ Facebook ด้วย OneSignal<&sol;strong><&sol;p>&NewLine;<blockquote><p>ตัวอย่าง<br &sol;>&NewLine;<amp-youtube layout&equals;"responsive" width&equals;"958" height&equals;"539" data-videoid&equals;"i91nGNQy3LE"><a placeholder href&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;watch&quest;v&equals;i91nGNQy3LE"><img src&equals;"https&colon;&sol;&sol;i&period;ytimg&period;com&sol;vi&sol;i91nGNQy3LE&sol;hqdefault&period;jpg" layout&equals;"fill" object-fit&equals;"cover"><&sol;a><&sol;amp-youtube><&sol;p><&sol;blockquote>&NewLine;<p>OneSignal คือ บริการ Push Notification ที่สามารถทำงานได้ทั้งบน Mobile Application และ Web Browser นั่นหมายความว่าเราสามารถใช้งาน OneSignal SDK ส่งข้อความถึงสมาชิกได้ทั้งขณะเข้าสู่ระบบใน application หรือเข้าสู่ระบบผ่าน browser <&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;อ่านบทความก่อนหน้านี้ที่ได้อธิบายเกี่ยวกับการติดตั้งและตั้งค่า<br &sol;>&NewLine;<a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-onesignal-ส่ง-push-notification&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-onesignal-ส่ง-push-notification&sol;<&sol;a><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ติดตั้ง OneSignal บนเว็บไซต์หลัก<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; ดาวน์โหลด <a href&equals;"https&colon;&sol;&sol;github&period;com&sol;one-signal&sol;OneSignal-Website-SDK&sol;releases&sol;download&sol;1&period;6&period;0&sol;OneSignalSDKFiles&period;zip" target&equals;"&lowbar;blank">Download and unzip the SDK files&period;<&sol;a><&sol;li>&NewLine;<li>2&period; Unzip และนำทั้ง 3 ไฟล์ไปวางไว้บน Root ชั้นแรกสุดของเว็บไซต์ที่ต้องการติดตั้ง&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " >manifest&period;json &NewLine;OneSignalSDKWorker&period;js &NewLine;OneSignalSDKUpdaterWorker&period;js<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>3&period; สร้างไฟล์ push&period;html และทำการ init OneSignal SDK&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;head&gt&semi; &NewLine; &lt&semi;link rel&equals;"manifest" href&equals;"&sol;manifest&period;json"&gt&semi; &NewLine; &lt&semi;script src&equals;"https&colon;&sol;&sol;cdn&period;onesignal&period;com&sol;sdks&sol;OneSignalSDK&period;js" async&gt&semi;&lt&semi;&sol;script&gt&semi; &NewLine; &lt&semi;script&gt&semi; &NewLine; var OneSignal &equals; window&period;OneSignal &vert;&vert; &lbrack;&rsqb;&semi; &NewLine; OneSignal&period;push&lpar;&lbrack;"init"&comma; &lbrace; &NewLine; appId&colon; "YOUR&lowbar;APP&lowbar;ID"&comma; &NewLine; safari&lowbar;web&lowbar;id&colon; "SAFARI&lowbar;WEB&lowbar;ID"&comma; &NewLine; autoRegister&colon; true &NewLine; &rcub;&rsqb;&rpar;&semi; &NewLine; &lt&semi;&sol;script&gt&semi; &NewLine;&lt&semi;&sol;head&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>YOUR&lowbar;APP&lowbar;ID ให้เข้าสู่ระบบของ OneSignal และไปที่เมนู Apps Setting -> Keys &&num;038&semi; IDs<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;onesignal-เว็บ-push-notification-1&period;png" alt&equals;"onesignal-เว็บ-push-notification" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>SAFARI&lowbar;WEB&lowbar;ID เพื่อให้สามารถใช้งานได้กับ safari browser หาได้จากเมนู Apps Settings -> Apple Safari &lpar;macOS&rpar;<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;onesignal-เว็บ-push-notification-2&period;png" alt&equals;"onesignal-เว็บ-push-notification" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>autoRegister กำหนดให้เป็น true เพื่อที่ว่าตอนเข้าเว็บไซต์มาครั้งแรก จะมีการร้องขอ Permission สำหรับส่ง Notification<&sol;strong>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>4&period; เริ่มทดสอบ ให้เปิดไฟล์ <strong>http&colon;&sol;&sol;www&period;your-domain&period;com&sol;push&period;html<&sol;strong> ดูว่ามีการร้องขอ permission หรือไม่ ถ้ามีให้กด allow เพื่อทดสอบการส่งข้อความผ่านเว็บไซต์ ถ้าการตั้งค่าถูกต้อง เราจะเจอ Popup แบบนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;onesignal-เว็บ-push-notification-5&period;png" alt&equals;"onesignal-เว็บ-push-notification" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;แต่ถ้าไม่เจอแบบนี้ อาจเป็นเพราะเราเคย Allow โดเมนนี้มาก่อนแล้วให้ไปที่เมนูตั้งค่าของ Browser นั้น ๆ ตรวจสอบและลอง Remove ออกไปก่อน<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;onesignal-เว็บ-push-notification-4&period;png" alt&equals;"onesignal-เว็บ-push-notification" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li>5&period; การส่งข้อความ เราสามารถใช้งานระบบส่งข้อความของ OneSignal โดยการเข้าระบบและไปที่หน้า Dashboard สร้าง New Message กด preview และกด Send เพื่อส่งข้อความ<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;onesignal-เว็บ-push-notification-7&period;png" alt&equals;"onesignal-เว็บ-push-notification" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;หรืออีกวิธีหนึ่งคือส่งผ่านเว็บไซต์ของเราด้วยคำสั่ง CURL ซึ่งสามารถอ่านข้อมูลเพิ่มเติมได้จากกระทู้นี้ครับ<br &sol;>&NewLine;<a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-onesignal-ส่ง-push-notification-2-ใช้-php-ส่งข้&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-onesignal-ส่ง-push-notification-2-ใช้-php-ส่งข้&sol;<&sol;a>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><br &sol;>&NewLine;ตัวอย่างการทำงานเมื่อมีการ Allow หรือ Register Player ID เรียบร้อยแล้ว<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;onesignal-เว็บ-push-notification-3-1&period;png" alt&equals;"onesignal-เว็บ-push-notification" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;ไม่ทุก browser ที่สามารถใช้งานระบบ Web Push Notification ได้ ส่วนมากจะใช้ได้เฉพาะเบราว์เซอร์รุ่นใหม่ ๆ หรือ เราสามารถตรวจสอบว่าเบราว์เซอร์นั้นรองรับการทำงานหรือไม่โดยใช้คำสั่ง <&sol;p>&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " >OneSignal&period;isPushNotificationsSupported&lpar;&rpar;<&sol;pre>&NewLine;

Exit mobile version