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
540
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
79
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.3k
MTDDC Meetup TOKYO 2023
chinen
2
360
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.9k
WWDC2023-Recap-LT
chinen
1
140
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
170
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
190
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
frontend-conf-okinawa-2022
chinen
0
480
Other Decks in Technology
See All in Technology
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
240
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.4k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
500
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
170
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.8k
JavaにおけるNull非許容性
skrb
2
2.7k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
180
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
For a Future-Friendly Web
brad_frost
176
9.6k
How STYLIGHT went responsive
nonsquared
99
5.4k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
611
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Music & Morning Musume
bryan
46
6.4k
How to Ace a Technical Interview
jacobian
276
23k
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で一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中