Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
図解!iOSとFCMで始めるCapacitorのPush通知/Illustration! Capacitor Push Notifications Start from iOS and Firebase Cloud Messaging
果物リン
July 07, 2019
Technology
1
950
図解!iOSとFCMで始めるCapacitorのPush通知/Illustration! Capacitor Push Notifications Start from iOS and Firebase Cloud Messaging
Push通知やりたいんやあああ
え、簡単なの?Local通知?なにこれめっちゃ簡単じゃん。
Push通知?なにこれめっちゃめんどくさい。
ということで図解してみました
果物リン
July 07, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
48
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
6
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
150
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
580
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
290
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.1k
[社内LT]元窓使いで林檎教信者ですが窓使いに転生します/I'm an ex-windowman, a follower of the apple cult, but I'm turning into a windowman.
fruitriin
0
230
読書から始めるポモドーロ・テクニック/The Pomodoro Technique, starting with reading
fruitriin
0
1.1k
Other Decks in Technology
See All in Technology
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
510
Steps toward self-service operations in eureka
fukubaka0825
0
420
mROS 2のススメ
takasehideki
0
290
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
11
6.7k
Learning from AWS Customer Security Incidents [2022]
ramimac
0
480
様々な現場のPower Platform ~小さなエンジニアの奮闘記~
hyodol2513
0
1.8k
New Features in C# 10/11
chack411
0
720
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
oracle4engineer
PRO
1
110
アルプの 認証/認可分離戦略と手法
ma2k8
PRO
1
110
Deeplearning from almost scratch
hn410
0
580
Adopting Kafka for the #1 job site in the world
ymyzk
1
270
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
shonansurvivors
3
2.4k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
Building Adaptive Systems
keathley
25
1.1k
Optimizing for Happiness
mojombo
365
63k
Designing with Data
zakiwarfel
91
3.9k
How to name files
jennybc
39
58k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Bootstrapping a Software Product
garrettdimon
295
110k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
How GitHub (no longer) Works
holman
296
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
Transcript
図解!iOSとFCMで始める Capacitor Push通知 גࣜձࣾΏΊΈ ՌϦϯˏFruitRiin 2019/07/07 Ionic Meetup #12 Tokyo
Illustration! Capacitor Push Notifications Start from iOS and Firebase Cloud Messaging
前回のおさらい • 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
௨Γ͍ͨʂ I want to use Notifications!
ࠀ͍ͯͧ͘͠ʂ Overcome to this!
自己紹介 • ՌϦϯˏFruitRiin • גࣜձࣾΏΊΈɹYumemi.inc • ϑϩϯτΤϯυΤϯδχΞ • ͍ͭͷؒʹ͔ϦʔυΤϯδχΞʹͳ͍ͬͯͨ •
Vue͍͍ͧ • ࠷ۙIonic/Vue͍͍ͧ My profile
*以下Ionic Vueのコードで説明 Notice. My code references are Ionic/Vue
2つの通知 • ϩʔΧϧ௨ • ֎෦ͱσʔλͷΓͱΓΛ͠ͳ͍ • ΞϓϦʹ௨։࢝Λઃஔͯ͠ ͦͷεέδϡʔϧͰ௨͞ΕΔ • Push௨
• ֎෦͔ΒૹΒΕ͖ͯͨσʔλΛड৴ͯ͠௨ • ࣮ػ͕ඞཁ
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
ローカル通知 • Capacitor ͷLocal NotificationsͷυΩϡϝϯτ௨Γ • LocalNotifications Λcapacitor/coreͷPlugins͔Βల։ • LocalNotifications.schedule({௨σʔλ})
Ͱઃஔ • Plz read capacitior’s Local Notifications Official docs. • Let’s read it codes! Local Notifications
こんな感じ Like this. Enough short.
あっという間! toooo easy!
ローカル通知まとめ • ؆୯ɻ • υΩϡϝϯτݟͯ3ΫοΩϯά You can do it in
3 minutes Really too easy Conclusion about Local Notifications
Note.ローカル通知と音 IonicͷNativeʹσϑΥϧτԻͷઃఆ͋Γ Note. Local Notifications and Sound
ॳͷతՌͨͨ͠ؾ͕͢Δ͕ զʑʹPush௨ͱ͍͏ఢ͕͍ͬͯΔ I completed my first desire, But we need
to fight for Push Notifications I guess..
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
͍͕ͭ͜ΊͬͪΌେมͩͬͨ This guide is very tough to me and I
fault many things…
図解!iOSとFCMで始める Capacitor Push通知 Illustration! Capacitor Push Notifications Start from iOS
and Firebase Cloud Messaging
capacitor.config.json • લճͷํ๏ͰόϯυϧIDΛઃఆͯ͠ͳ͍ • όϯυϧIDΛͪΌΜͱͨ͠ʹ͢Δ • ઃఆͯ͠ͳͯ͘Ұݟಈ͍ͯ͠·͏͕ If you didn’t
fix capacitor.config’s bandle Id, You should fix it now.
とりあえずコードで解決する部分 • PushNotificationଞΛcapacitor/core͔Βimport • PushNotifications.register() Λinit࣌ʹߦ͏ • ֬ೝͷͨΊड৴࣌ʹalert At first,
written codes part Nonsense to explain words, so read a code Next page!
こんな感じ Like this. It seems also enough short?
イベントもあるよ! • ΨΠυʹॻ͍ͯ͋Δίʔυͷ΄ͱΜͲ͜Ε • 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.
AppDelegate.swiftを編集 • `import Firebase` ΛϑΝΠϧͷઌ಄ʹ • `FirebaseApp.configure()`Λ application(didFinishLaunchingWithOptions)ʹ Edit AppDelegate.swift
Put new 2 lines to AppDelegate.swift
こんな感じ Like this. Just 2 line!
Xcode ϚδΘ͔ΒΜ… I cant understand Xcode UIs…
Podfileを編集する • ios/app/Podfile ʹ pod ‘Firebase/Messaging’ ΛՃ͢Δ • npx cap
update ios ͢Δ • Podsʹඞཁͳcapacitor plugin iOS nativeґଘͷϞδϡʔϧ͕ೖΔ • pod install ෆཁͬΆ͍ Edit Podfile
͜͜·Ͱ؆୯ ͔͜͜Βূ໌ॻͱͷಆ͍ Easy until here, But battle to certifications is
tough
XcodeでPushNotificationを有効化 • CapabilitiesΛ։͘ • ༗ޮԽ
ビルドして実機へ • ࣮ػͰϏϧυ͢ΔͷʹσόΠεొͱ͔ཁΔ͔ • ҰPush௨༗ޮʹ͔ͯ͠ΒϏϧυ͠ͳ͍ͱ Apple DeveloperͰొͰ͖ͳ͍ͬΆ͍ Build and transfer
Real device
Apple Developerへサインイン
Certifications, Identifiers & profiles へ
Generate profile
案内に従って開発機を登録 • PCͱiOS྆ํΛͦΕͧΕબͿ • બࢶʹग़ͳ͚ΕϏϧυͯ͠ΈΔͱ͔ͯ͠Έͯ • Capabilities ͰPush Notification༗ޮԽΛબͳ͍ͱग़ͳ͍͔ •
Certification ͱ Identifiers ͕ొ͞ΕΔ Register develop machines follow from guide You did this step, register certification and Identifiers
証明書を作成(APNs .p8 file) • Create a key ͯ͠อଘ Create APNs
keys (.p8)
APNsにチェックをつける Check APNs and continue
͔͜͜ΒFirebaseͱྑ͘ͳΔ And then, let’s get friendly with firebase
Firebaseにプロジェクトを作る • ͳΜ͔దʹΆͪΆͪͬͱ࡞Δ Create a Firebase Project
iOSアプリを追加する • ࣃंͷΞΠίϯͷͱ͜Ζ͔ΒϓϩδΣΫτઃఆ • ҊʹैͬͯiOSΞϓϦͷՃΛߦ͍·͢ Add iOS App to Project
Move project setting from gear icon And then add iOS app to Project
GoogleService-info.plistを プロジェクトへ Move .plist into project
以降の工程は後で • Ұ୴εΩοϓ After step is skip at¥now
ビルドして実機へ • npx cap copy ios ͔ͯ͠Β Build and transfer
device again
Firebaseのプロジェクト設定から クラウドメッセージングへ Go to Cloud Messaging Setting from Project
settings
APNs 認証キーを登録 • APNs = Apple Push Notifications serviceͷུ Register
APNs certificate key
Keys で作成した.p8ファイルを登録 Upload .p8 file and register!
テストメッセージ送信 Send test message!
メッセージと宛先を設定 Settings message and receiver
͍͟ɺૹ৴ʂ Let’s try!
ta… tada…!!!!
ΊͪΌͪ͘Όϝϯυ͔ͬͨʂʂʂ What a tough thing !
Note. Push通知と音 • FCMͷ ૹ৴Φϓγϣϯ Note. Push Notifications and Sound
FCM’s send Option
ハマった罠 • APNsূ໌ॻΩʔ(.p8ϑΝΠϧ)ͷొ࿙Ε • ͜Ε͔ΓͮΒ͍ͱࢥ͏ • Podfileʹॻ͘ϞδϡʔϧΛؒҧ͑ͯͨ • Firebase/Messaging͡Όͳͯ͘Firebase/Coreͬͯॻ͍ͯͨ •
μα͗͢ΔϛεͰ4࣌ؒফඅ • ϑΥΞάϥϯυͩͱ௨μΠΞϩά͕ग़ͳ͍ • ࢿྉ༻ʹΓ͗ͯ͢ϋϚͬͨ
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
Push通知まとめ • ίʔυ͔͍ͯ • ূ໌ॻͱ伴ͭͬͯ͘ • Firebaseͷઃఆͯ͠ • ϝοηʔδΛૹ৴ʂ Conclusion
Push Notifications • Write codes • Create certifications and keys • Setting Firebase • Send a message!
FCMͱPush௨શʹཧղͨ͠ Fin. Completely, I understand FCM and Push Notifications *
It’s Joke
リファレンス(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/
リファレンス(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
Tips - デバッグログを見る方法