PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


แนะนำ onesignal บริการส่ง push notification ฟรี

17 August 2017 By
onesignal push notification


เนื้อหาในตอนต่อไปนี้ จะมาแนะนำเว็บไซต์ onesignal ที่ให้บริการเกี่ยวกับการจัดการ push
notification ข้าม platform ที่ฟรีและใช้งานง่าย โดยเราจะทดสอบใช้บริการการส่งข้อความ
push ผ่านเว็บไซต์ ในที่นี้จะทดสอบกับเว็บไซต์ www.ninenik.com เป็นตัวอย่าง
 
เริ่มต้นให้เราไปที่เว็บไซต์ onesignal
https://onesignal.com/
 
จากนั้นให้ทำการสมัครสมาชิก หรือล็อกอินเข้าไปใช้งาน สามารถล็อกอินผ่าน Facebook
google หรือ Github ก็ได้แล้วแต่ความสะดวกของเรา
 
 

 
 
หลักจากล็อกอินเข้ามาแล้ว ก็จะให้เราสร้าง app ที่จะใช้งานขึ้นมา ซึ่งก็เหมือนกับโปรเจ็ค app
นั่นเอง ตามที่ได้บอกไปในตอนต้น ว่าเราจะสร้าง web push หรือการใช้ push notification ผ่านเว็บไซต์
กด Add a new app ตามรูปด้านล่างได้เลย
 
 

 

 
ต่อไปก็กำหนดชื่อ app ในตัวอย่างเราใช้ชื่อ mysite_push ตามรูปด้านล่าง แล้วกด Create ไป

 
 


 
 
ต่อด้วยเลือก Platform ที่เราจะใช้งาน เราเลือกเป็น Website Push แล้วกด Next ไปต่อ

 
 


 
 
ต่อไปจะเป็นส่วนของการตั้งค่า platform ที่เราได้เลือกไปแล้ว 
 
ในรูปก็มีกำหนดชื่อเว็บไซต์ ก็ให้กำหนดชื่อเว็บไซต์ของเรา 
แล้วก็กำหนด icon ที่ต้องการแสดงในการแจ้งเตือน notification ในตัวอย่างใช้ไฟล์ jpg ที่มีอยู่บน server
แล้ว และก็ต่อด้วยการกำหนดว่าเว็บไซต์เรามีระบบ ssl หรือใช้งานในรูปแบบ https หรือไม่ ซึ่งทาง onesignal
ก็แนะนำว่าถ้าเว็บไซต์ของรามีระบบ ssl ก็จะทำให้สามารถตั้งค่าต่างๆ เพิ่มเติมได้ แต่เว็บทดสอบของเรา
ไม่มี ssl เราก็ติ๊กเลือกตามรูป

 
 


 
 
เลือนต่อลงมา เนื่องจากว่าเว็บไซต์ตัวอย่างไม่ได้ใช้เป็นแบบ https เราจึงจำเป็นต้อง Subdomain แทน 
อย่างในตัวอย่างก็จะเป็น https://ninenik.os.tc ซึ่งโดนเมนส่วนนี้ก็จะไปแสดงในส่วนของการแจ้งเตือนด้วย
โดยการแจ้งเตือนนั้น จะเป็นการแจ้งเตือนจาก subdomain นี้แทนเว็บไซต์ของเรา
แต่ถ้าเว็บไซต์ของเราเป็นแบบ https เราก็จะได้การแจ้งเตือนที่มาจากเว็บไซต์ของเราโดยตรง เช่น สมมติว่า
โดนเมนของเราเป็น https://www.ninenik.com การแจ้งเตือนก็จะอิงจากเว็บไซต์ของเราเลย และไม่ต้องใช้
subdomain ข้างต้น  กำหนดค่าเรียบร้อยก็กด Next ไป

 
 


 
 
ต่อไปก็เลือกชุดเครื่องมือ SDK เราก็เลือกเป็น Website Push ตามรูป แล้วกด Next ไป

 
 


 
 
และหน้าสุดท้าย เราจะได้ App ID ตามรูป เพื่อนำไปติดตั้งใช้งาน  โดยในขึ้นตอนนี้ เราสามารถ
ทดสอบว่ามีเครื่องไหนบ้างที่ subscribe รับข่าวสาร หรือข้อความ push จากเว็บไซต์เรา
โดยสามารถกดที่ปุ่ม Check Subscribed User ซึ่งถ้าเราทดสอบกดเลย ก็จะมีข้อความแจ้งว่ายังไม่มี
การการติตตามของผู้ใช้ ให้เราค้างขั้นตอนในหน้านี้ไว้ก่อน หรือถ้ายังไม่พร้อมทำขั้นตอนต่อในทันที
ก็สามารถปิด ไปได้ โดยให้เราบันทึก App ID ไว้ หรือจะเข้าไปดูค่า App ID ในหน้า App Settings 
ในภายหลังก็ได้

 
 


 
 
ในที่นี้เราจะค้างหน้าขั้นตอนนี้ไว้ก่อน แล้วไปทำการสร้างไฟล์ทดสอบ เพื่อติดตั้งและใช้งานอย่างง่าย
สมมติสร้างไฟล์ใช้งานชื่อ webpush.php ให้เรากำหนดโค้ดเบื้องต้นดังนี้
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test my web push</title>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: true, /* Set to true to automatically prompt visitors */
      httpPermissionRequest: {
        enable: true
      },
      notifyButton: {
          enable: true /* Set to false to hide */
      }
    }]);
  </script>    
</head>

<body>
this is test page
</body>
</html>
 
 
จากโค้ดด้านบน ให้เราเปลี่ยน YOUR_APP_ID เป็น App ID ของเรา
 
สามารถดูตัวอย่างการใช้งานเบื้องต้นได้ที่ลิ้งค์นี้้
https://documentation.onesignal.com/docs/web-push-sdk-setup-http
หรือ https://documentation.onesignal.com/docs/web-push-setup
 
จากนั้นเราก็ทดสอบเรียกไฟล์ของเราผ่านเว็บไซต์ อย่างในตัวอย่างก็จะเป็น
http://www.ninenik.com/webpush.php
เราจะทดสอบผ่าน chrome
 
ในครั้งแรกที่เรียกไฟล์ขึ้นมา ก็จะขึ้นแจ้งขอ permission การให้รับการแจ้งเตือนจากเว็บไซต์ดังรูป

 
 


 
 
สังเกตว่าตรงโดนเมน จะเป็น subdomain ที่เรากำหนด เนื่องจากเว็บไซต์ของเราไม่ได้ใช้ ssl
ให้เรากด Allow 
    กรณีที่เราเผลอกด block หรือต้องการให้ขึ้นแจ้งใหม่เพื่อเลือก allow เราสามารถไปลบหรือแก้ไข
รายการเว็บไซต์ที่อนุญาตให้รับการแจ้งเตือนผ่าน chrome ได้ที่
 
chrome://settings/content/notifications

 
 


 
 
เมื่อเรากด allow เสร็จเรียบร้อยแล้ว แสดงว่าเครื่องของเรา พร้อมรับข้อความ push แล้ว เราสามารถยกเลิกการรับ
ข้อความ push โดยกดที่ปุ่ม มุมล่างขวา ดังรูป กรณีในโค้ดของเรากำหนดให้แสดงปุ่ม เป็น true

 
 


 
 
เรากลับไปหน้าที่ขั้นตอนที่ค้างไว้ แล้วกดปุ่ม Check Subscribed User ก็จะขึ้นว่ามีผู้ใช้ subscribe แล้ว
ดังรูป  เสร็จแล้วกดปุ่ม Done 

 
 


 
 
เวลานำไปติดตั้งใช้งานจริงๆ เราสามารถนำโค้ดนี้ไปใส่ในหน้าแรกของเว็บไซต์ของเราเพียงหน้าเดียวก็ได้
เมื่อผู้ใช้เข้าใช้งานเว็บไซต์ของเราผ่าน chrome หรือ firefox ก็จะร้องขออนุญาตให้มีการขึ้นข้อความแจ้งเตือนข่าวสาร
หรือไม่ ซึ่งถ้าเรากด allow ก็จะได้รับข้อความแจ้งเตือน 
    โดยการทำงานนั้นสามารถทำงานได้ทั้งผ่านมือถือ หรือเครื่องคอมพิวเตอร์ ในกรณีมือถือ เพียงแค่เราเข้าใช้งานเว็บไซต์ 
และตอบรับการแจ้งเตือนข้อความจากเว็บไซต์ผ่าน chrome หรือ firefox เมื่อมีการส่งข้อความ push เครื่องของเราก็จะ
ขึ้นแจ้งรายการแจ้งเตือนนั้นๆ โดยไม่จำเป็นต้องเปิดหน้าจอไว้หรือเปิดหน้าเว็บไซต์ของเราอยู่ นอกจากนั้น ถ้าผู้ใช้คลิกที่
การแจ้งเตือนที่ได้รับ ก็สามารถที่ลิ้งค์ไปยังหน้าเว็บเพจที่เราต้องการหรือกำหนดไว้ได้เลย  เช่นเดียวกันกับกรณีเปิดเว็บไซต์
ผ่าน chrome หรือ firefox บนเวอร์ชั่น desktop เมื่อเราเปิด chrome หรือ firefox ขึ้นมา ก็จะมีข้อความแจ้งเตือนแสดง
มุมล่างขวาของบราวเซอร์ของเรา ดูภาพตัวอย่างประกอบในตอนท้าย
    เราจะทดสอบโดยจะ subscribe ผ่าน chrome บนมือถือ และ chrome กับ firefox บนเวอร์ชั่น desktop โดยสามารถดู
users ที่ subscribe ผ่านลิ้งค์ในเว็บไซต์ OneSignal ดังรูป

 
 


 
 
จากนั้นเราจะทดสอบส่งข้อความไปทุกเครื่องที่ subscribe โดยไปที่เมนู New Message เลือก
Send to Everyone แล้วกดปุ่ม Next

 
 


 
 
กรอกหัวข้อแจ้งเตือน และรายละเอียด แล้วกด Next

 
 


 
 
ตั้งค่าเพิ่มเติม เช่น เมื่อคลิกแล้วให้ลิ้งค์ไปยังเว็บเพจ หรือ url ไหน 
เลือกตั้งค่าตามความต้องการ แล้วกด Next

 
 


 
 
เลือการตั้งเวลาการส่ง เช่น ส่งในทันที หรือกำหนดช่วงเวลา 
รวมถึงการกำหนดการปรับแต่งการส่งสำหรับผู้รับข้อความแต่ละคน ในที่นี้จะใช้แบบค่าเริ่มต้น
ให้ให้ทำการส่งในทันที กดปุ่ม Confirm

 
 


 
 
จะมาหน้าสุดท้ายคือหน้ารีวิว ข้อมูลการตั้งค่าต่างๆ พร้อมส่งข้อมูล หลังตรวจสอบความถูกต้อง
เรียบร้อยแล้วให้กดปุ่ม Send Message เพื่อเริ่มส่งข้อความ push

 
 


 
 
ข้อความก็จะถูกส่งไปแสดงที่หน้าจอคอมพิวเตอร์ของเรา กรณีเราเปิด chrome หรือ firefox ไว้
โดยไม่จำเป็นที่ต้องเข้าเว็บไซต์ที่สมัครรับการแจ้งเตือน ดังรูป

 
 


 
 
ส่วนในมือถือก็จะขึ้นแจ้งเตือนเช่นกัน แม้ว่าเราปิดหน้าจอไว้ ดังรูป

 
 


 
 
ซึ่งถ้าเราคลิกที่การแจ้งเตือน ก็จะไปยังเว็บเพจหรือ url ที่เราตั้งไว้
 
เนื้อหาข้างต้นทั้งหมดนี้ เป็นแนวทางแนะนำการใช้งาน จะเห็นว่าเราสามารถนำไปประยุกต์ใช้งานเพิ่มเติม
ตามต้องการได้ แม้ว่าจะยังไม่รองรับสำหรับ safari ที่ใช้งานบน iphone หรือ ipad กรณีใช้งาน website push
ก็ตาม 
    นอกจาก การใช้งาน push notification จะใช้งานกับ website push แล้ว ยังสามารถนำไปประยุกต์ใช้งานกับ
application ที่เราพัฒนาขึ้นบน android หรือ ios ได้ หรือที่เรียกว่ารองรับแบบ cross-platform 
ยังไงลองไปทดสอบใช้งานกันดู หวังว่าจะเป็นประโยชน์ไม่มากก็น้อย
    หากมีเนื้อหาเพิ่มเติม หรือมีการประยุกต์การใช้งานเพิ่มเติม ก็จะได้นำมาเสมอในลำดับต่อๆ ไป

 






Tags:: push notification onesignal






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง