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.4k
図解!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
81
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
880
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
150
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
社内お問い合わせBotの仕組みと学び
nish01
1
570
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.2k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
100
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
350
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
160
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
600
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
140
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
190
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Visualization
eitanlees
149
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
We Have a Design System, Now What?
morganepeng
53
7.8k
Context Engineering - Making Every Token Count
addyosmani
5
230
The Invisible Side of Design
smashingmag
302
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
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 - デバッグログを見る方法