วิธีทำ Notification (แจ้งเตือน) ให้ Ionic2 แบบไม่ต้องมี server

วิธีทำ 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 ให้แจ้งเตือนทุกวันนั่นเอง
Share: Twitter Facebook
Freeweed's Picture

About Freeweed

Freeweed is a programmer, freelance, thinker, dreamer, weed smoker and more.

Thailand, Bangkok noob-studio.github.io