วิธีทำ Notification (แจ้งเตือน) ให้ Ionic2 แบบไม่ต้องมี server
ต่อเนื่องจากบทความที่แล้วนะครับกับ การส่งแจ้งเตือนให้แอพพลิเคชันด้วย Firebase และ Node.js
หลายคนอาจจะรู้สึกว่าโหยทำไมมันเยอะแยะขนาดนี้เนี่ยแค่อยากแจ้งเตือนให้เข้ามาแอพกูหน่อยวันล่ะครั้งก็ยังดีไรแบบนี้ (คิดถึงแอพเกมที่เวลาไม่ได้เข้านานแล้วส่งแจ้งเตือนมาว่า หมู่บ้านต้องการคุณ!) ประมาณนี้จะสังเกตุเห็นว่าการแจ้งเตือนแบบนี้ไม่ได้ต้องการนำเสนอข้อมูลเหมือนกันแจ้งเตือนปกติเราแค่อยากจะเตือนให้ผู้ใช้เข้ามาในแอพเราหรืออะไรก็ว่าไปเป็นที่มาของการทำ Local Notification (แจ้งเตือนจากตัวแอพเองนั่นเองนะจ๊ะ)
Start Ionic
เอาล่ะครับเรามาเริ่มกันเถอะขั้นตอนก็ไม่มีไรมากเหมือนเดิมครับสร้างแอพขึ้นมาและ add cordova plugin ตามนี้ขึ้นไป
ionic start ionic-local-notification blank --v2
cd ionic-local-notification
ionic platform add android
ionic plugin add cordova-plugin-background-mode
npm install --save @ionic-native/background-mode
ionic plugin add de.appplant.cordova.plugin.local-notification
npm install --save @ionic-native/local-notifications
- cordova-plugin-background-mode ใช้สำหรับให้แอพทำงานได้แม้ user จะออกจากแอพไปแล้ว
- local-notification คือพระเอกของงานนี้นะครับใช้สำหรับแจ้งเตือนแบบไม่ต้องมี server นั่นเอง
ต่อมาให้เปิดไฟล์ src/app/app.component.ts ขึ้นมาและเพิ่ม Code ไปดังนี้
import { BackgroundMode } from '@ionic-native/background-mode';
import { LocalNotifications } from '@ionic-native/local-notifications';
import module ที่ต้องการใช้นะครับโดยรายละเอียดก็ตามที่เขียนอธิบายไว้ข้างบน
constructor(
...,
private bgMode: BackgroundMode,
private localNoti: LocalNotifications
)
ประการศตัวแปร private ชื่อ bgMode, localNoti โดยนำค่ามาจาก Module BackgroundMode และ LocalNotifications ตามลำดับ ต่อมาเพิ่มการทำงานเข้าไปใน constructor ดังนี้
constructor(
...
){
platform.ready().then(() => {
...
this.bgMode.enable();
this.bgMode.on('activate').subscribe(() => {
var today = new Date();
var pm_6 = new Date();
pm_6.setDate(today.getDate());
pm_6.setHours(18);
pm_6.setMinutes(0);
pm_6.setSeconds(0);
var at_6_pm = new Date(pm_6);
this.localNoti.schedule({
text: 'แจ้งเตือนตอน 6 โมง',
firstAt: at_6_pm,
every: 'day'
});
})
});
}
เพียงแค่นี้ก็เป็นอันเสร็จแล้วนะจ๊ะสำหรับการทำงานที่เราใส่ไปมีดังนี้นะครับ
this.bgMode.enable();
เปิด Mode การทำงานแบบ background
this.bgMode.on('activate').subscribe(() => {
...
})
เป็น event ที่เกิดขึ้นเมื่อ application ทำงานแบบ background mode
var today = new Date();
var pm_6 = new Date();
pm_6.setDate(today.getDate());
pm_6.setHours(18);
pm_6.setMinutes(00);
pm_6.setSeconds(0);
var at_6_pm = new Date(pm_6);
สร้างวันเวลาสำหรับแจ้งเตือนโดยให้ตั้งเป็น 6 โมง
this.localNoti.schedule({
text: 'แจ้งเตือนตอน 6 โมง',
firstAt: at_6_pm,
every: 'day'
});
ตั้งค่าการแจ้งเตือนโดยมีรายละเอียดดังนี้
- text ข้อความที่จะให้แจ้งเตือน
- firstAt ให้แจ้งเตือนเมื่อไหร่
- every ให้แจ้งเตือนเมื่อไหร่ใส่ Day ให้แจ้งเตือนทุกวันนั่นเอง