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 Push対応状況2023
Search
Chinen
April 19, 2023
Technology
0
570
Web Push対応状況2023
PWA Night Vol.50 ~Web Push〜 の登壇資料です。
https://pwanight.connpass.com/event/280017/
Chinen
April 19, 2023
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
frontend-conf-okinawa-2022
chinen
0
510
Other Decks in Technology
See All in Technology
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
2.7k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
170
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.2k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
Geminiとv0による高速プロトタイピング
shinya337
0
200
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
250
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
3
620
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
520
Github Copilot エージェントモードで試してみた
ochtum
0
140
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
450
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Navigating Team Friction
lara
187
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Rails Girls Zürich Keynote
gr2m
94
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Transcript
Web Push対応状況2023 2023/4/19 まぁし
知念 昌史 / まぁし Twitter@chocodogmagic • 沖縄でリモートワーク/元・美容師 • 技術コミュニティ運営 ◦
PWA Night(東京)/ v-okinawa(沖縄) • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/CMS • スプラトゥーン3(弓:S+17 / XP1900) • ポケモン:スカーレット:これから育成はじめます 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主
https://www.tam-tam.co.jp/
なぜ今ごろWeb Pushが話題なの?
1年前のWeb Push対応状況 デバイス 対応ブラウザ Windows Chrome、Edge、Firefox Mac Chrome Android Chrome
iPhone - ※クロスブラウザ対応のサービスでは厳しい
iOS 16.4でWeb Pushに対応!!(2023.3.27)
2023年4月現在のWeb Push対応状況 デバイス 対応ブラウザ Windows Chrome、Edge、Firefox Mac Chrome、Safari(Venturaから対応) Android Chrome
iPhone Safari※インストールしたPWAのみ ※OneSignalで動作確認、他サービスだと違う可能性あり
Web Push Webページ経由で登録すると 通知を受け取れる。(アプリは不要) ネイティブアプリの通知と同じ見た目。
Web Pushの設定項目(スクショはMac Chrome) ① ブラウザアイコン:通知を許可したブラウザ ② タイトル:任意で指定可能 ③
ドメイン名(通知を許可したサイトのURL):通知を許可したサイト ④ 本文:任意で指定可能 ⑤ 画像:任意で指定可能(省略した場合はPWAで設定したアイコン) ⑥ タップした時に開くURL(表示はされない) ① ② ⑤ ④ ③
WindowsのChrome • 許可ウィンドウはアドレスバーに表示 • 通知はディスプレイの右下に表示
WindowsのEdge • 許可ウィンドウはアドレスバーに表示 • 通知はディスプレイの右下に表示
WindowsのFirefox • 許可ウィンドウはアドレスバーに表示 • 通知はディスプレイの右下に表示
MacのChrome • 許可ウィンドウはアドレスバーに表示 • 通知はディスプレイの右上に表示 UIとしてはWindowsのChromeと同 じ。 拒否ばかりしているので通知がデ
フォルトでブロックされてしまうケー ス・・・
MacのSafari • 許可ウィンドウは画面中央に表示 • 通知はディスプレイの右上に表示 Chromeとは違って、通知にはSafariのアイコンが表 示されない。
AndroidのChrome • 許可ウィンドウは画面中央に表示 • 通知は画面上部と通知一覧に表示
iPhoneのSafari(PWA) • 許可ウィンドウは画面中央に表示 • 通知は画面上部と通知センターに表示 PWAをホーム画面に追加してそこから起動しな
いと通知許可のウィンドウ自体が出ないので注 意!
Windowsでは画像を大きく表示できる
実装についてはPWA Night for beginnersでも紹介 5/11(木)12:00〜13:00
ありがとうございました! Twitter まぁし@chocodogmagic フォローしてね PWA Nightは 毎月第3水曜日 参加してね! 平日9:00〜SpacesでWeb情報発信中!
TAMで一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中