ความสามารถของ Progressive Web App อย่างนึงคือ การทำ Notification ซึ่ง Notification นี้จะ ยังทำงานอยู่ถึงแม้ Tab นั้นจะ ผิดลงไปแล้ว ซึ่งจริงๆเราสามารถ Implement Server เองก็ได้แต่เนื่องจากผมขี้เกียจและก็มีของดีๆให้ใช้อยู่แล้วก็เลยใช้ดีกว่า Service ตัวนี้มีชื่อ ว่า Onesignal ครับ
ข้อดีคือ “ตอนนี้ยังฟรีอยู่” แล้วก็ Support ทุก Platform ย้ำว่าทุก Platform จริงๆ ร่ายมายาวแล้วเริ่มเลยดีกว่า
สำหรับเว็บ notification นั้น User จะสามารถได้รับ Notification ได้ ต่อให้เว็บนั้นปิดอยู่ หรือ tab นั้นไม่ได้ focus ก็ตาม (ขอให้เปิด Chrome เอาไว้)
สิ่งที่ต้องมี
- ควรจะมีเว็บที่เป็น Https (ใช้ FIresbase ก็ได้)
- Account Google เอาไว้สมัคร Google Developer
1. สมัคร Google Developer
- เข้า https://console.developers.google.com/iam-admin/projects แล้ว คลิก “Create Project”
2. เข้าไปเมนู API manager จากเมนูด้านซ้าย
3. ค้นหา คำว่า Google Cloud Messaging แล้วคลิกเข้าไป
4. คลิก Enable
5. เข้าไปเมนู Credential จากเมนูด้านซ้าย คลิก Create Credential > API key > Server Key > Create
6. Copy Key เอาไว้
7. เราต้องไป Copy Project number เอาไว้ด้วย ซึ่งวิธีง่ายสุดคือ เข้า Link https://console.cloud.google.com/home/dashboard แล้วมันจะอยู่ที่มุมขวาล่างหน้าตาแบบนี้ (ตรงเลขที่ขึ้นตนด้วย 34xxx)
2. สมัคร One Signal
1.สมัคร Onesignal ด้วย Facebook , Github หรือ Google
2. คลิก Create App เลือก เมนูตามนี้ Website push > Google Chrome & Mozilla Firefox
3. เมื่อถึงหน้าที่ต้องกรอกให้กรอก URL ของเว็บเรา และกรอก Server key ที่จดมาจากขั้นตอน 1 แล้วก็คลิก Save
6. Copy App ID ไว้
7. หลังจากนั้นเราต้องมาติดตั้ง Onesignal ลงบนเว็บของเราครับ โดยโหลดไฟล์ จาก Link นี้ และวางไฟล์ทั้งหมดไว้นอกสุดของ Folder (ต้องถูกเรียกได้จาก www.yourdomain.com/xxx.js )
8. แก้ไฟล์ manifest.json โดยเปลี่ยน หลักๆคือ name, short_name, gcm_sender_id
https://gist.github.com/thangman22/dc2a8f4484167f59964742c5d7e26f92
9. ในส่วนของ gcm_sender_id ให้ไปเอาจาก Project number ที่ให้ copy ไว้ในขั้นตอนที่ 1 นะครับ
10. หลังจากนั้นเอา Code HTML ข้างล่างไปไว้ใน Tag HEAD แต่อย่าลืมแก้ ตรง App ID ให้เป็นของเราก่อนนะครับ ถ้าจะให้ User ไม่ต้องมากด Subscribe เองก็แก้ autoRegister เป็น true ครับ
https://gist.github.com/thangman22/e6343cb8e41cd0813162918c6c70c3a3
11. พอเราเปิดเว็บไซต์ขึ้นมา ก็จะเห็นปุ่ม Subscribe ที่อยู่ด้านล่างก็ให้กด หนึ่งครั้งแล้วก็ Allow permission ในการรับ Notification ไป
12. เมื่อติดตั้งเสร็จก็ไปกดปุ่ม “Check Subscribed Users” ในเว็บไซต์ ของ Onesignal หลังจากนั้นคุณจะได้รับ Test Notification ก็เป็นอันเสร็จสิ้น
10. หลังจากนั้นเมื่อเราต้องการส่ง Notification จาก เว็บของเราก็เพียงเข้าไปที่เมนู New Message ใน One Signal พิมพ์ข้อความแล้วกดส่งได้เลย
11. เมื่อเราส่ง Notification ตัวข้อความก็จะมาแสดงใน Browser เราแบบนี้ จบแล้วครับ
อย่างที่บอกครับ Onesignal Support แทบจะทุก Platform นะครับ ไม่ได้จำกัดอยู่แค่ Chrome หรือ Firefox ซึ่งจะสะดวกมากๆเพราะเราสามารถส่ง notification ที่เดียวแล้วไป Notify ใน ทุกๆ Platform ได้เลย
ป.ล. อาจจะงงหน่อยก็ถามไว้ใน Comment ก็ได้นะครับเดี๋ยวมาตอบให้
Leave a Reply