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