Web Push対応状況2023

PWA Night Vol.50 ～Web Push〜 の登壇資料です。
https://pwanight.connpass.com/event/280017/

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