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
Webプッシュ通知触ってみた
Search
matumoto
February 22, 2023
Technology
0
36
Webプッシュ通知触ってみた
2023/2月に行われたサークル内追い出しLTの資料です
イベントページはこちら
https://zli.connpass.com/event/275487/
matumoto
February 22, 2023
Tweet
Share
More Decks by matumoto
See All by matumoto
testingを眺める
matumoto
1
160
sync/v2 プロポーザルの 背景と sync.Pool について
matumoto
0
410
Goトランザクション処理
matumoto
1
52
いまいちどスライスの 挙動を見直してみる
matumoto
0
350
Go1.22のリリース予定の機能を見る
matumoto
0
69
GoのUnderlying typeについて
matumoto
0
200
Typed-nilについて
matumoto
0
330
GoのType Setsという概念
matumoto
0
29
GoのRateLimit処理の実装
matumoto
0
380
Other Decks in Technology
See All in Technology
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
800
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
210
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
110
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
1
120
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
380
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
330
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
180
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
130
Liquid AI Hackathon Tokyo プレゼン資料
aratako
0
120
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
470
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
630
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Building an army of robots
kneath
306
46k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Transcript
Webプッシュ通知 触ってみた 追い出しLT 2023/02/22
• 学年:28期 • 所属:会津大学コンピュータ理工学部 • 今興味のある技術:Go, Haskell, Rustで競プ ロ •
趣味: ◦ モンハン ▪ 燃えないゴミはもう無いんだよ ◦ イカᔦꙬᔨ ◦ FGO ▪ 2部7章良かったね • Twitter:@matumoto_1234 matumoto 松本 響輝 自己紹介
今回触ってみた技術 • Webプッシュ通知
FirebaseCloudMessaging(FCM)の概要 • Firebaseサーバーに送り先を登録する • Firebaseサーバーから送り先に対してプッシュ通知を送る
送り先の登録処理 • デバイスで登録をする場合
送り先の登録処理 • ブラウザで登録する場合
送り先の登録処理 • では何に登録させるか? ◦ サイトごとに一意なものに登録させる( PushSubscriptionが発生する) ◦ Firebaseが用意しているSDKでmasseging.getToken(**省略*/)を呼び出す と登録トークンがFirebase側で発行されて返される(2回目以降はキャッシュされたも のが返される)
送られるとどうなるか • 送り先がサイトごとに一意 ◦ じゃあサイトを開いていないときとかは通知が来ないのでは? ◦ →ちゃんと来てくれる ▪ ServiceWorkerが受け取っている ServiceWorker
通知許可
ServiceWorkerについて • ServiceWorker発火などでなんらかの動作をしたい ◦ ServiceWorkerAPIが実は提供されている
実際に送るには • FirebaseConsoleからプッシュ通知を送ることができる • Firebase Admin SDKからも同じように送れる
実際に送るには • Firebase Admin SDKを使うメリット ◦ アプリのサーバー側から通知を叩ける
実装編
実装 • Firebaseプロジェクトを作って、生成されるサーバーキーとかを保管 • firebase-toolkitsをPCにインストール • $ firebase initとかをして生成されるindex.htmlなどのファイルに、さっきのサーバー キーとかをコピペ
• $ firebase serve でローカルファイルをホスティング • ホスティングしたlocalhost:5000とかに行って通知を許可 • FirebaseConsole(Web画面)から通知を送る • AC
デモ
ご卒業 おめでとうございます! 社会人になっても健康でいやがれください