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
40
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
86
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
偏光画像処理ライブラリを作った話
elerac
1
170
AIエージェント入門
minorun365
PRO
31
17k
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
200
Active Directory攻防
cryptopeg
PRO
8
5.4k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
610
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
5
850
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
340
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
日経のデータベース事業とElasticsearch
hinatades
PRO
0
230
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
270
Windows の新しい管理者保護モード
murachiakira
0
200
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Navigating Team Friction
lara
183
15k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Designing for humans not robots
tammielis
250
25k
A better future with KSS
kneath
238
17k
Bash Introduction
62gerente
611
210k
Facilitating Awesome Meetings
lara
52
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
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 - デバッグログを見る方法