More than 3 years have passed since last update.

Ionic ローカルでプッシュ通知のテスト（Capacitor）

Last updated at 2020-03-03Posted at 2020-01-15

はじめに

プッシュ通知には２種類あります。
1つは全ユーザーに向けて発信するような、サーバーから送信されるもの。
→詳しくはこちらを参考に。

もう１つは、リマインダーのようなローカル環境で完結する通知。

今回はIonic + Capacitorでローカルプッシュ通知を出してみたいと思います！
CapacitorのLocal Notifications API を使用していきます〜。

push.service.tsを作成

home.page.tsにプッシュ通知関連のコードをかくと、ごちゃごちゃして見にくくなるので
serviceにまとめちゃいます。

ionic g service service/push

これでserviceフォルダに、push.service.tsが作成されたかと。

Local Notifications APIを使ってプッシュ通知を登録

push.service.ts

import { Injectable } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { LocalNotifications } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class PushService {

  constructor() { }

  LocalNotifications() {
    // 5秒後に通知が来る
     const date = new Date(Date.now() + 1000 * 5);
    LocalNotifications.schedule({
      notifications: [
        {
          title: 'Title',
          body: 'Body',
          id: 1,
          schedule: { at: date },
          sound: null,
          attachments: null,
          actionTypeId: '',
          extra: null
        }
      ]
    });
  }
}

あとはLocalNotifications()を任意のhome.page.tsにて呼び出しましょう。

home.page.ts

import { PushService } from './../service/push.service';

constructor(
  private pushService: PushService
) {
 this.pushService.LocalNotifications();
 }

これでアプリを起動すると、5秒後に通知が来ます。

毎日通知を出す

LocalNotifications() {
    LocalNotifications.schedule({
      notifications: [
        {
          title: 'Title',
          body: 'Body',
          id: 1,
          schedule: { every: 'day' },
          sound: null,
          attachments: null,
          actionTypeId: '',
          extra: null
        }
      ]
    });
  }

scheduleの所を変えれば定期的に出すことも可能。
hourなら1時間毎に。

疑問点

    LocalNotifications.schedule({
      notifications: [
        {
          title: 'Title',
          body: 'Body',
          id: 1,
          schedule: { every: 'two-weeks' },
          sound: null,
          attachments: null,
          actionTypeId: '',
          extra: null
        }
      ]
    });
  }