$30 off During Our Annual Pro Sale. View Details »

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

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

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

果物リン

July 07, 2019
Tweet

More Decks by 果物リン

Other Decks in Technology

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. 2つの通知 • ϩʔΧϧ௨஌ • ֎෦ͱσʔλͷ΍ΓͱΓΛ͠ͳ͍ • ΞϓϦ಺ʹ௨஌։࢝Λઃஔͯ͠
 ͦͷεέδϡʔϧͰ௨஌͞ΕΔ • 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 - デバッグログを見る方法