Web Push対応状況2023

Transcript

1. Web Push対応状況2023
 2023/4/19　まぁし


2. 知念 昌史 / まぁし Twitter@chocodogmagic
 • 沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦

   PWA Night（東京）/ v-okinawa（沖縄） 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • スプラトゥーン3（弓：S+17 / XP1900）
 • ポケモン：スカーレット：これから育成はじめます
 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主


3. https://www.tam-tam.co.jp/

4. なぜ今ごろWeb Pushが話題なの？


5. 1年前のWeb Push対応状況
 デバイス 対応ブラウザ Windows Chrome、Edge、Firefox Mac Chrome Android Chrome

   iPhone - ※クロスブラウザ対応のサービスでは厳しい 


6. iOS 16.4でWeb Pushに対応！！（2023.3.27）


7. 2023年4月現在のWeb Push対応状況
 デバイス 対応ブラウザ Windows Chrome、Edge、Firefox Mac Chrome、Safari（Venturaから対応） Android Chrome

   iPhone Safari※インストールしたPWAのみ ※OneSignalで動作確認、他サービスだと違う可能性あり 


8. Web Push
 Webページ経由で登録すると
 通知を受け取れる。（アプリは不要）
 ネイティブアプリの通知と同じ見た目。


9. Web Pushの設定項目（スクショはMac Chrome）
 ① ブラウザアイコン：通知を許可したブラウザ 
 ② タイトル：任意で指定可能 
 ③

   ドメイン名（通知を許可したサイトのURL）：通知を許可したサイト 
 ④ 本文：任意で指定可能 
 ⑤ 画像：任意で指定可能（省略した場合はPWAで設定したアイコン） 
 ⑥ タップした時に開くURL（表示はされない） 　 　　　　　　
 
 ①
 ②
 ⑤
 ④ 
 ③


10. WindowsのChrome
 • 許可ウィンドウはアドレスバーに表示 
 • 通知はディスプレイの右下に表示 


11. WindowsのEdge
 • 許可ウィンドウはアドレスバーに表示 
 • 通知はディスプレイの右下に表示 


12. WindowsのFirefox
 • 許可ウィンドウはアドレスバーに表示 
 • 通知はディスプレイの右下に表示 


13. MacのChrome
 • 許可ウィンドウはアドレスバーに表示 
 • 通知はディスプレイの右上に表示 
 UIとしてはWindowsのChromeと同 じ。
 拒否ばかりしているので通知がデ

    フォルトでブロックされてしまうケー ス・・・
 


14. MacのSafari
 
 • 許可ウィンドウは画面中央に表示 
 • 通知はディスプレイの右上に表示 
 Chromeとは違って、通知にはSafariのアイコンが表 示されない。


    


15. AndroidのChrome
 
 • 許可ウィンドウは画面中央に表示 
 • 通知は画面上部と通知一覧に表示 


16. iPhoneのSafari（PWA）
 
 • 許可ウィンドウは画面中央に表示 
 • 通知は画面上部と通知センターに表示 
 
 PWAをホーム画面に追加してそこから起動しな

    いと通知許可のウィンドウ自体が出ないので注 意！


17. Windowsでは画像を大きく表示できる


18. 実装についてはPWA Night for beginnersでも紹介
 5/11（木）12:00〜13:00


19. ありがとうございました！
 Twitter まぁし@chocodogmagic
 フォローしてね
 PWA Nightは
 毎月第3水曜日
 　　　　　　　　参加してね！
 平日9:00〜SpacesでWeb情報発信中！ 


    TAMで一緒にお仕事しませんか？
 お仕事のご依頼・各職種の採用も募集中