はじめに

プッシュ通知には２種類あります。
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
        }
      ]
    });
  }

soundはまぁなんとなくわかる。

でもattachments, actionTypeId, extraって一体何に使うの？？！

ストップさせる方法

ローカルプッシュ通知をストップさせる方法について、以下の記事に書きました〜。
ionic ローカルプッシュ通知をストップさせる

もしローカルプッシュ通知関連のコードを消しても、通知がずっと来る場合の対処法です。

指定の時間に通知を出す

Ionic ローカルプッシュ通知を毎月指定の日に出す（Capacitor）を参考に。

最後に

全て公式ドキュメント通りでしたが、、、地味にscheduleをeveryにできる事に気付かなかったので、誰かの参考になれば幸いです

また、Androidでも実装する場合は下記の記事も見てね〜！
Ionic Androidのローカルプッシュ通知はアイコンの設定が必要だった（Capacitor）