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
500
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 2023
chinen
1
320
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.7k
WWDC2023-Recap-LT
chinen
1
110
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
130
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
150
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
410
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
350
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.5k
Other Decks in Technology
See All in Technology
Tracking down sources of kernel errors with retsnoop
ennael
PRO
0
140
エムスリーマネジメントチーム紹介資料 / Introduction of M3 Management Team
m3_engineering
0
250
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
220
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
2
310
Rubyはなぜ「たのしい」のか? / Why is Ruby a programmers' best friend? #tqrk15
expajp
4
1.7k
不感対策ソリューション
jtes
0
230
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
山手線一周のパフォーマンス改善
suzukahr
0
120
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
200
XPを始める新人に伝えたい近道の鍵
nakasho
1
270
Efficient zero-copy networking using io_uring
ennael
PRO
0
280
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
300
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
What's new in Ruby 2.0
geeforr
341
31k
Making the Leap to Tech Lead
cromwellryan
130
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A better future with KSS
kneath
235
17k
How to name files
jennybc
77
98k
Adopting Sorbet at Scale
ufuk
73
8.9k
What the flash - Photography Introduction
edds
67
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Done Done
chrislema
181
16k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
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で一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中