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
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
110
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
110
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
130
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
350
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
自動テストのコストと向き合ってみた
qa
0
210
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
370
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
700
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
370
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
140
許しとアジャイル
jnuank
1
140
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.3k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Six Lessons from altMBA
skipperchong
28
4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Side Projects
sachag
455
43k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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 - デバッグログを見る方法