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

Slide 1

Slide 1 text

図解！iOSとFCMで始める Capacitor Push通知 גࣜձࣾΏΊΈ Ռ෺ϦϯˏFruitRiin 2019/07/07 Ionic Meetup #12 Tokyo Illustration! Capacitor Push Notifications Start from iOS and Firebase Cloud Messaging

Slide 2

Slide 2 text

前回のおさらい • 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

Slide 3

Slide 3 text

௨஌΍Γ͍ͨʂ I want to use Notiﬁcations!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

自己紹介 • Ռ෺ϦϯˏFruitRiin • גࣜձࣾΏΊΈɹYumemi.inc • ϑϩϯτΤϯυΤϯδχΞ • ͍ͭͷؒʹ͔ϦʔυΤϯδχΞʹͳ͍ͬͯͨ • Vue͸͍͍ͧ • ࠷ۙ͸Ionic/Vue΋͍͍ͧ My profile

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

２つの通知 • ϩʔΧϧ௨஌ • ֎෦ͱσʔλͷ΍ΓͱΓΛ͠ͳ͍ • ΞϓϦ಺ʹ௨஌։࢝Λઃஔͯ͠  ͦͷεέδϡʔϧͰ௨஌͞ΕΔ • Push௨஌ • ֎෦͔ΒૹΒΕ͖ͯͨσʔλΛड৴ͯ͠௨஌ • ࣮ػ͕ඞཁ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ローカル通知 • Capacitor ͷLocal NotificationsͷυΩϡϝϯτ௨Γ • LocalNotifications Λcapacitor/coreͷPlugins͔Βల։ • LocalNotifications.schedule({௨஌σʔλ}) Ͱઃஔ • Plz read capacitior’s Local Notifications Official docs. • Let’s read it codes! Local Notifications

Slide 10

Slide 10 text

こんな感じ Like this. Enough short.

Slide 11

Slide 11 text

あっという間！ toooo easy!

Slide 12

Slide 12 text

ローカル通知まとめ • ௒؆୯ɻ • υΩϡϝϯτݟͯ3෼ΫοΩϯά You can do it in 3 minutes Really too easy Conclusion about Local Notifications

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

͍͕ͭ͜ΊͬͪΌେมͩͬͨ This guide is very tough to me and I fault many things…

Slide 17

Slide 17 text

図解！iOSとFCMで始める Capacitor Push通知 Illustration! Capacitor Push Notiﬁcations Start from iOS and Firebase Cloud Messaging

Slide 18

Slide 18 text

capacitor.config.json • લճͷํ๏Ͱ͸όϯυϧIDΛઃఆͯ͠ͳ͍ • όϯυϧIDΛͪΌΜͱͨ͠஋ʹ͢Δ • ઃఆͯ͠ͳͯ͘΋Ұݟಈ͍ͯ͠·͏͕ If you didn’t fix capacitor.config’s bandle Id,  You should fix it now.

Slide 19

Slide 19 text

とりあえずコードで解決する部分 • PushNotiﬁcationଞΛcapacitor/core͔Βimport • PushNotiﬁcations.register() Λinit࣌ʹߦ͏ • ֬ೝͷͨΊड৴࣌ʹalert At first, written codes part Nonsense to explain words, so read a code Next page!

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

イベントもあるよ！ • ΨΠυʹॻ͍ͯ͋Δίʔυͷ΄ͱΜͲ͸͜Ε • 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.

Slide 22

Slide 22 text

AppDelegate.swiftを編集 • `import Firebase` ΛϑΝΠϧͷઌ಄ʹ • `FirebaseApp.conﬁgure()`Λ  application(didFinishLaunchingWithOptions)ʹ Edit AppDelegate.swift Put new 2 lines to AppDelegate.swift

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Podfileを編集する • ios/app/Podﬁle ʹ  pod ‘Firebase/Messaging’ Λ௥Ճ͢Δ • npx cap update ios ͢Δ • Podsʹඞཁͳcapacitor plugin΍  iOS nativeґଘͷϞδϡʔϧ͕ೖΔ • pod install ͸ෆཁͬΆ͍ Edit Podﬁle

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Apple Developerへサインイン

Slide 30

Slide 30 text

Certifications, Identifiers &  profiles へ

Slide 31

Slide 31 text

Generate profile

Slide 32

Slide 32 text

案内に従って開発機を登録 • PCͱiOS୺຤྆ํΛͦΕͧΕબͿ • બ୒ࢶʹग़ͳ͚Ε͹Ϗϧυͯ͠ΈΔͱ͔ͯ͠Έͯ • Capabilities ͰPush Notification༗ޮԽΛબ͹ͳ͍ͱग़ͳ͍͔΋ • Certification ͱ Identifiers ͕ొ࿥͞ΕΔ Register develop machines follow from guide You did this step,  register certification and Identifiers

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

iOSアプリを追加する • ࣃंͷΞΠίϯͷͱ͜Ζ͔ΒϓϩδΣΫτઃఆ • Ҋ಺ʹैͬͯiOSΞϓϦͷ௥ՃΛߦ͍·͢ Add iOS App to Project Move project setting from gear icon And then add iOS app to Project

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

APNs 認証キーを登録 • APNs = Apple Push Notiﬁcations serviceͷུ Register APNs certificate key

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

͍͟ɺૹ৴ʂ Let’s try!

Slide 47

Slide 47 text

ta… tada…!!!!

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ハマった罠 • APNsূ໌ॻΩʔ(.p8ϑΝΠϧ)ͷొ࿥࿙Ε • ͜Ε෼͔ΓͮΒ͍ͱࢥ͏ • Podﬁleʹॻ͘ϞδϡʔϧΛؒҧ͑ͯͨ • Firebase/Messaging͡Όͳͯ͘Firebase/Coreͬͯॻ͍ͯͨ • μα͗͢ΔϛεͰ4࣌ؒফඅ • ϑΥΞάϥ΢ϯυͩͱ௨஌μΠΞϩά͕ग़ͳ͍ • ࢿྉ༻ʹ࡟Γ͗ͯ͢ϋϚͬͨ

Slide 51

Slide 51 text

My faults… • I forgot registor .p8 APFs Keys • I think it difﬁcult realize to this • I wrote different Pod module • I wrote `Firebase/Core` not `Firebase/Messaging` • I spent 4hours this fail • Don’t show notiﬁcation dialog while foreground • I failed to remove all events to write this slide

Slide 52

Slide 52 text

Push通知まとめ • ίʔυ͔͍ͯ • ূ໌ॻͱ伴ͭͬͯ͘ • Firebaseͷઃఆͯ͠ • ϝοηʔδΛૹ৴ʂ Conclusion Push Notiﬁcations • Write codes • Create certiﬁcations   and keys • Setting Firebase • Send a message!

Slide 53

Slide 53 text

FCMͱPush௨஌׬શʹཧղͨ͠ Fin. Completely, I understand  FCM and Push Notifications * It’s Joke

Slide 54

Slide 54 text

リファレンス(1) • Local Notifications - Capacitor  https://capacitor.ionicframework.com/docs/apis/local-Notifications • Push Notifications - Capacitor https:// capacitor.ionicframework.com/docs/apis/pushnotifications#method-createChannel-0 • Push Notifications with Firebase in an Ionic/Angular App - Capacitor  https://capacitor.ionicframework.com/docs/guides/pushnotifications-firebase/

Slide 55

Slide 55 text

リファレンス(2) • iOS ʹ Firebase Cloud Messaging ΫϥΠΞϯτ Ξ ϓϦΛઃఆ͢Δ | Firebase  https://ﬁrebase.google.com/docs/cloud- messaging/ios/client?authuser=0 • ͓खܰﬁrebaseϓογϡ௨஌ূ໌ॻ࡞੒ϝϞ - Qiita  https://qiita.com/matsuyoro/items/ 77408e5d09ef00be8577

Slide 56

Slide 56 text

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