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
A2Aのクライアントを自作する
rynsuke
1
160
Welcome to the LLM Club
koic
0
140
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
270
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
370
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
1
210
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
4.8k
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
11
4.2k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
570
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
2
430
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
150
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A designer walks into a library…
pauljervisheath
206
24k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Optimizing for Happiness
mojombo
379
70k
Agile that works and the tools we love
rasmusluckow
329
21k
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で一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中