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
31
Webプッシュ通知触ってみた
2023/2月に行われたサークル内追い出しLTの資料です
イベントページはこちら
https://zli.connpass.com/event/275487/
matumoto
February 22, 2023
Tweet
Share
More Decks by matumoto
See All by matumoto
sync/v2 プロポーザルの 背景と sync.Pool について
matumoto
0
53
Goトランザクション処理
matumoto
0
36
いまいちどスライスの 挙動を見直してみる
matumoto
0
330
Go1.22のリリース予定の機能を見る
matumoto
0
62
GoのUnderlying typeについて
matumoto
0
190
Typed-nilについて
matumoto
0
280
GoのType Setsという概念
matumoto
0
23
GoのRateLimit処理の実装
matumoto
0
320
拡張ユークリッドの互除法の紹介
matumoto
0
250
Other Decks in Technology
See All in Technology
Agentic Workflowという選択肢を考える
tkikuchi1002
1
530
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
210
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
フィンテック養成勉強会#54
finengine
0
180
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
540
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
0
100
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Navigating Team Friction
lara
187
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Faster Mobile Websites
deanohume
307
31k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Code Review Best Practice
trishagee
68
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
It's Worth the Effort
3n
185
28k
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
デモ
ご卒業 おめでとうございます! 社会人になっても健康でいやがれください