Pro Yearly is on sale from $80 to $50! »

図解!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通知?なにこれめっちゃめんどくさい。
ということで図解してみました

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

July 07, 2019
Tweet

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