図解！iOSとFCMで始めるCapacitorのPush通知/Illustration! Capacitor Push Notifications Start from iOS and Firebase Cloud Messaging

Transcript

1. 図解！iOSとFCMで始める Capacitor Push通知 גࣜձࣾΏΊΈ Ռ෺ϦϯˏFruitRiin 2019/07/07 Ionic Meetup #12 Tokyo

   Illustration! Capacitor Push Notifications Start from iOS and Firebase Cloud Messaging

2. 前回のおさらい • Ionic/VueͰCapacitor΋ΠέΔͧɺ
 ໘ന͍ͳ͜Εʂ • Push௨஌ͷ΍Γํ͕Θ͔ΒΜʂ Ionic/Vue is Fun, and

   
 Native app made by Capacitor is also good
 Really interesting. Fooooo! Previous synopsis But, I said I can’t understand 
 to use push Notifications

3. ௨஌΍Γ͍ͨʂ I want to use Notifications!

4. ࠀ෰͍ͯͧ͘͠ʂ Overcome to this!

5. 自己紹介 • Ռ෺ϦϯˏFruitRiin • גࣜձࣾΏΊΈɹYumemi.inc • ϑϩϯτΤϯυΤϯδχΞ • ͍ͭͷؒʹ͔ϦʔυΤϯδχΞʹͳ͍ͬͯͨ •

   Vue͸͍͍ͧ • ࠷ۙ͸Ionic/Vue΋͍͍ͧ My profile

6. ＊以下Ionic Vueのコードで説明 Notice. My code references are Ionic/Vue

7. ２つの通知 • ϩʔΧϧ௨஌ • ֎෦ͱσʔλͷ΍ΓͱΓΛ͠ͳ͍ • ΞϓϦ಺ʹ௨஌։࢝Λઃஔͯ͠
 ͦͷεέδϡʔϧͰ௨஌͞ΕΔ • Push௨஌

   • ֎෦͔ΒૹΒΕ͖ͯͨσʔλΛड৴ͯ͠௨஌ • ࣮ػ͕ඞཁ

8. Two notifications • Local Notifications • Don’t need to receive

   any data from network • Scheduled notifications, need in code • Push Notifications • Notifications from network • Real test devices are need

9. ローカル通知 • Capacitor ͷLocal NotificationsͷυΩϡϝϯτ௨Γ • LocalNotifications Λcapacitor/coreͷPlugins͔Βల։ • LocalNotifications.schedule({௨஌σʔλ})

   Ͱઃஔ • Plz read capacitior’s Local Notifications Official docs. • Let’s read it codes! Local Notifications

10. こんな感じ Like this. Enough short.

11. あっという間！ toooo easy!

12. ローカル通知まとめ • ௒؆୯ɻ • υΩϡϝϯτݟͯ3෼ΫοΩϯά You can do it in

    3 minutes Really too easy Conclusion about Local Notifications

13. Note.ローカル通知と音 IonicͷNativeʹσϑΥϧτԻͷઃఆ͋Γ Note. Local Notifications and Sound

14. ౰ॳͷ໨త͸Ռͨͨ͠ؾ͕͢Δ͕ զʑʹ͸Push௨஌ͱ͍͏ఢ͕࢒͍ͬͯΔ I completed my first desire, But we need

    to fight for Push Notifications I guess..

15. Push通知 • Push Notifications ͷυΩϡϝϯτʹ
 ίʔυαϯϓϧ͕ॻ͔Ε͍ͯͳ͍
 ʢAPIυΩϡϝϯτͱconfig͸ॻ͍ͯ͋Δʣ • ͠ΕͬͱExampleͱͯ͠
 Push

    Notifications with FirabaseͳΔΨΠυ΁ No code sample in official docs It link to `Push Notifications with Firebase` Push Notifications

16. ͍͕ͭ͜ΊͬͪΌେมͩͬͨ This guide is very tough to me and I

    fault many things…

17. 図解！iOSとFCMで始める Capacitor Push通知 Illustration! Capacitor Push Notifications Start from iOS

    and Firebase Cloud Messaging

18. capacitor.config.json • લճͷํ๏Ͱ͸όϯυϧIDΛઃఆͯ͠ͳ͍ • όϯυϧIDΛͪΌΜͱͨ͠஋ʹ͢Δ • ઃఆͯ͠ͳͯ͘΋Ұݟಈ͍ͯ͠·͏͕ If you didn’t

    fix capacitor.config’s bandle Id,
 You should fix it now.

19. とりあえずコードで解決する部分 • PushNotificationଞΛcapacitor/core͔Βimport • PushNotifications.register() Λinit࣌ʹߦ͏ • ֬ೝͷͨΊड৴࣌ʹalert At first,

    written codes part Nonsense to explain words, so read a code Next page!

20. こんな感じ Like this. It seems also enough short?

21. イベントもあるよ！ • ΨΠυʹॻ͍ͯ͋Δίʔυͷ΄ͱΜͲ͸͜Ε • PushNotifications.addListener(event, callback) • event͸ ‘registration’, ‘pushNotificationReceived’,


    ‘pushNotificationActionPerformed' ͳͲ There are also events Guide’s code is almost event handling.
 But I cut off previous page sample.

22. AppDelegate.swiftを編集 • `import Firebase` ΛϑΝΠϧͷઌ಄ʹ • `FirebaseApp.configure()`Λ
 application(didFinishLaunchingWithOptions)ʹ Edit AppDelegate.swift

    Put new 2 lines to AppDelegate.swift

23. こんな感じ Like this. Just 2 line!

24. Xcode ϚδΘ͔ΒΜ… I cant understand Xcode UIs…

25. Podfileを編集する • ios/app/Podfile ʹ
 pod ‘Firebase/Messaging’ Λ௥Ճ͢Δ • npx cap

    update ios ͢Δ • Podsʹඞཁͳcapacitor plugin΍
 iOS nativeґଘͷϞδϡʔϧ͕ೖΔ • pod install ͸ෆཁͬΆ͍ Edit Podfile

26. ͜͜·Ͱ͸؆୯ ͔͜͜Βূ໌ॻͱͷಆ͍ Easy until here, But battle to certifications is

    tough

27. XcodeでPushNotificationを有効化 • CapabilitiesΛ։͘ • ༗ޮԽ

28. ビルドして実機へ • ࣮ػͰϏϧυ͢ΔͷʹσόΠεొ࿥ͱ͔ཁΔ͔΋ • Ұ౓Push௨஌༗ޮʹ͔ͯ͠ΒϏϧυ͠ͳ͍ͱ
 Apple DeveloperͰొ࿥Ͱ͖ͳ͍ͬΆ͍ Build and transfer

    Real device

29. Apple Developerへサインイン

30. Certifications, Identifiers &
 profiles へ

31. Generate profile

32. 案内に従って開発機を登録 • PCͱiOS୺຤྆ํΛͦΕͧΕબͿ • બ୒ࢶʹग़ͳ͚Ε͹Ϗϧυͯ͠ΈΔͱ͔ͯ͠Έͯ • Capabilities ͰPush Notification༗ޮԽΛબ͹ͳ͍ͱग़ͳ͍͔΋ •

    Certification ͱ Identifiers ͕ొ࿥͞ΕΔ Register develop machines follow from guide You did this step,
 register certification and Identifiers

33. 証明書を作成(APNs .p8 file) • Create a key ͯ͠อଘ Create APNs

    keys (.p8)

34. APNsにチェックをつける Check APNs and continue

35. ͔͜͜ΒFirebaseͱ஥ྑ͘ͳΔ And then, let’s get friendly with firebase

36. Firebaseにプロジェクトを作る • ͳΜ͔ద౰ʹΆͪΆͪͬͱ࡞Δ Create a Firebase Project

37. iOSアプリを追加する • ࣃंͷΞΠίϯͷͱ͜Ζ͔ΒϓϩδΣΫτઃఆ • Ҋ಺ʹैͬͯiOSΞϓϦͷ௥ՃΛߦ͍·͢ Add iOS App to Project

    Move project setting from gear icon And then add iOS app to Project

38. GoogleService-info.plistを
 プロジェクトへ Move .plist into project

39. 以降の工程は後で • Ұ୴εΩοϓ After step is skip at¥now

40. ビルドして実機へ • npx cap copy ios ͔ͯ͠Β Build and transfer

    device again

41. Firebaseのプロジェクト設定から クラウドメッセージングへ Go to Cloud Messaging Setting 
 from Project

    settings

42. APNs 認証キーを登録 • APNs = Apple Push Notifications serviceͷུ Register

    APNs certificate key

43. Keys で作成した.p8ファイルを登録 Upload .p8 file and register!

44. テストメッセージ送信 Send test message!

45. メッセージと宛先を設定 Settings message and receiver

46. ͍͟ɺૹ৴ʂ Let’s try!

47. ta… tada…!!!!

48. ΊͪΌͪ͘Όϝϯυ͔ͬͨʂʂʂ What a tough thing !

49. Note. Push通知と音 • FCMͷ
 ૹ৴Φϓγϣϯ Note. Push Notifications and Sound

    FCM’s send Option

50. ハマった罠 • APNsূ໌ॻΩʔ(.p8ϑΝΠϧ)ͷొ࿥࿙Ε • ͜Ε෼͔ΓͮΒ͍ͱࢥ͏ • Podfileʹॻ͘ϞδϡʔϧΛؒҧ͑ͯͨ • Firebase/Messaging͡Όͳͯ͘Firebase/Coreͬͯॻ͍ͯͨ •

    μα͗͢ΔϛεͰ4࣌ؒফඅ • ϑΥΞάϥ΢ϯυͩͱ௨஌μΠΞϩά͕ग़ͳ͍ • ࢿྉ༻ʹ࡟Γ͗ͯ͢ϋϚͬͨ

51. My faults… • I forgot registor .p8 APFs Keys •

    I think it difficult realize to this • I wrote different Pod module • I wrote `Firebase/Core` not `Firebase/Messaging` • I spent 4hours this fail • Don’t show notification dialog while foreground • I failed to remove all events to write this slide

52. Push通知まとめ • ίʔυ͔͍ͯ • ূ໌ॻͱ伴ͭͬͯ͘ • Firebaseͷઃఆͯ͠ • ϝοηʔδΛૹ৴ʂ Conclusion

    Push Notifications • Write codes • Create certifications 
 and keys • Setting Firebase • Send a message!

53. FCMͱPush௨஌׬શʹཧղͨ͠ Fin. Completely, I understand
 FCM and Push Notifications *

    It’s Joke

54. リファレンス(1) • Local Notifications - Capacitor
 https://capacitor.ionicframework.com/docs/apis/local-Notifications • Push Notifications

    - Capacitor https:// capacitor.ionicframework.com/docs/apis/push- notifications#method-createChannel-0 • Push Notifications with Firebase in an Ionic/Angular App - Capacitor
 https://capacitor.ionicframework.com/docs/guides/push- notifications-firebase/

55. リファレンス(2) • iOS ʹ Firebase Cloud Messaging ΫϥΠΞϯτ Ξ ϓϦΛઃఆ͢Δ

    | Firebase
 https://firebase.google.com/docs/cloud- messaging/ios/client?authuser=0 • ͓खܰfirebaseϓογϡ௨஌ূ໌ॻ࡞੒ϝϞ - Qiita
 https://qiita.com/matsuyoro/items/ 77408e5d09ef00be8577

56. Tips - デバッグログを見る方法