Skip to main content

Firebase Cloud Messaging Push Notification To Web

สวัสดีครับ ในบทความวันนี้จะเป็นการแนะนำ การส่ง Push Notification ไปยัง Web Browser ด้วย Cloud Messaging ใน Firebase กันครับ

มาเริ่มกันเลย ก่อนอื่นเราต้องไปสร้าง Project ที่ Firebase Console กันก่อนครับ
https://console.firebase.google.com

1.เมื่อเข้ามาแล้วคลิกที่ Add Project

2.ตั้งชื่อ Project Name (ตัวอย่างใช้ชื่อว่า FcmToWeb ) จากนั้นคลิกปุ่ม Continue

3.จากนั้นคลิกปุ่ม Continue

 

4.จากนั้นคลิกปุ่ม Create Project

5.รอระบบสร้าง Project สักครู่จากนั้นคลิกปุ่ม Continue

6.จะมาที่หน้า Console ของ Firebase จะมีให้เลือกว่าเราจะใช้งาน Project แบบใด จะมี IOS , ANDROID , WEB
เลือก WEB ตามภาพ

7.ต่อมาจะให้ตั้ง App nickname (ตัวอย่างตั้งชื่อว่า NotifyMe) จากนั้นคลิก Register app

8.จากนั้นระบบจะแสดง Firebase SDK สำหรับนำไปใช้งานต่อ (ให้ Copy Code ชุดนี้เก็บไว้เขียน Code ต่อไปครับ)
*หากใครลืม Copy ไว้ไม่เป็นไรครับ ตอนท้ายจะมาบอกว่าต้องไปคลิกดูตรงไหนครับ

9.คลิก Continue to Console ระบบจะกลับไปที่ หน้า console ของ Firebase
เสร็จขั้นตอนการสร้าง Project ที่ Firebase แล้วครับ หลังจากนี้เราจะมาเริ่มเขียน Code กันครับ

ในการทดสอบต้องใช้ Server ที่เป็น https ครับ

ตัวอย่างโครงสร้าง

-index.html
-manifest.json
-firebase-messaging-sw (สำหรับไฟล์นี้จะต้องวางไว้ที่ Root ของ Web Site เสมอครับ)

10.สร้างไฟล์ index.html

นำค่า Config ที่ Copy ไว้ในขั้นตอนก่อนหน้ามาวางแทนที่ ค่าเดิมดังนี้

11.สร้างไฟล์ manifest.json

12.สร้างไฟล์ firebase-messaging-sw (ไฟล์นี้จะต้องวางไว้ที่ Root ของ Web Site เสมอ)

นำค่า Config ที่ Copy ไว้ในขั้นตอนก่อนหน้ามาวางแทนที่ ค่าเดิมดังนี้

13.ทดสอบการทำงาน

เมื่อมีการเรียกไฟล์ index.html   จะมีการ ขอ Permission Notifications คลิกเลือก Allow

14.Web Browser จะแสดง Token สำหรับใช้ส่ง Notifications  ดังภาพ
Copy Token เก็บไว้เพื่อนำไปใช้ทดสอบการส่ง Notifications ใน Firebase Console

15.กลับไปที่ Firebase Console เลือก Project ที่ได้สร้างไว้ตอนแรก
– เลือกเมนู Cloud Messaging
– คลิกปุ่ม Send Your First Message

16.ระบุข้อความทดสอบ จากนั้นคลิกปุ่ม Send test message

17.นำ token ที่ Copy ไว้จากขั้นตอนก่อนหน้าวาง ตามภาพ จากนั้นคลิกปุ่ม +

18.คลิกปุ่ม Test เพื่อส่งข้อความทดสอบไปยัง Browser

19.ตัวอย่าง หากมีการส่ง Notifications สำเร็จ จะมี POP UP ข้อความทดสอบ ดังภาพ

คงจะไม่สะดวกหากเราต้องเข้ามาที่ Firebase เพื่อส่งข้อความทุกครั้ง เราจึงมีทางเลือกที่ดีกว่าด้วยการส่งด้วย PHP curl ครับ

 

การส่ง Push Notifications ด้วย PHP CURL

– กลับไปที่ Firebase Console ก่อนครับ
– คลิกรูปฟันเฟือง ตรงเมนู Project Overview
– คลิก Tab Cloud Messaging
– Copy Server Key เก็บไว้ใช้ในขั้นตอนต่อไปครับ

สร้างไฟล์ push.php

เพียงเท่านี้เราก็สามารถ นำ Token ที่ได้จาก Browser มาส่งด้วย PHP ได้แล้วครับ

 

การเรียกดูค่า Config Firebase SDK

– ไปที่ Firebase Console
– คลิกรูปฟันเฟือง ตรงเมนู Project Overview
– คลิก Tab General


– เลือนลงมาด้านล่าง จะมีค่า Config แสดงอยู่ครับ

ขอจบแต่เพียงเท่านี้ครับ
หวังว่าจะเป็นประโยชน์สำหรับผู้อ่านทุกท่านครับ ขอบคุณครับ