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

Push通知やりたいんやあああ
え、簡単なの？Local通知？なにこれめっちゃ簡単じゃん。
Push通知？なにこれめっちゃめんどくさい。
ということで図解してみました

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 - デバッグログを見る方法