大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【Ionic/Angular】iOSアプリ開発におけるLocalNotificationsの挙動

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要

本格的にIonicでアプリ開発を始めました。
参考書は「Ionicで作るモバイルアプリ制作入門[Angular版]」です。
初心者の方でも本の通りに開発を進めればちゃんとアプリが作れる内容になっていると思います。

今回はLocalNotificationsの実装で詰まったところがあったので備忘録として書いていきます。

iOSアプリ開発におけるLocalNotificationsの挙動

問題発生

参考書に則ってLocalNotificationsを実装していたのですが、iOSで挙動を確認すると動作はしているけど通知が表示されない。Androidでは通知は来るしWebでも動作は確認できる。

確認環境

・Ionic 5.0.0
・Angular 8.3.23
Xcode
・iPhone11ProMax

対策①

IonicのドキュメントからLocalNotifications(capacitor)をインストールします。
Local Notifications - Ionic Framework 日本語ドキュメンテーション

app.module.tsでLocalNotificationsをインポートする必要があります。

app.module.ts

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
...
providers: [
  LocalNotifications
]
...

これでiOSで動くようになりましたが、Androidの方で挙動がおかしくなりました。

対策②

Xcodeの設定を変更します。
Push Notifications - Capacitor

Signing&CapabilitiesにPush Notificationsを追加します。
Signing&Capabilities画面の左上にある「+Capability」を押します。 Xcode ウィンドウが開くので「Push Notifications」を検索してダブルクリックします。 LocalNotifications これでiOSでも通知が来るようになります。

結論

「Ionicで作るモバイルアプリ制作入門[Angular版]」で開発を進めるのであればXcodeの設定を変えるのがいいと思います。

参考

素晴らしい記事に感謝致します。
Push Notifications - Capacitor
Local Notifications - Ionic Framework 日本語ドキュメンテーション