Web Push対応状況2023

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で一緒にお仕事しませんか？  お仕事のご依頼・各職種の採用も募集中 

Web Push対応状況2023

Web Push対応状況2023

Chinen

More Decks by Chinen

Other Decks in Technology

Featured

Transcript