Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
図解!iOSとFCMで始めるCapacitorのPush通知/Illustration! C...
Search
果物リン
July 07, 2019
Technology
1
1.3k
図解!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 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
41
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
87
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
クラウド食堂とは?
hiyanger
0
120
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
140
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
AIエージェント入門
minorun365
PRO
31
18k
php-conference-nagoya-2025
fuwasegu
0
150
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
手を動かしてレベルアップしよう!
maruto
0
220
Featured
See All Featured
It's Worth the Effort
3n
184
28k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Facilitating Awesome Meetings
lara
52
6.2k
Music & Morning Musume
bryan
46
6.4k
Producing Creativity
orderedlist
PRO
344
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Gamification - CAS2011
davidbonilla
80
5.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Done Done
chrislema
182
16k
4 Signs Your Business is Dying
shpigford
182
22k
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 - デバッグログを見る方法