Web Push対応状況2023

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

Transcript

1. Web Push対応状況2023

   2023/4/19　まぁし

   

   View Slide

2. 知念 昌史 / まぁし Twitter@chocodogmagic

   ● 沖縄でリモートワーク/元・美容師

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/

   アクセシビリティ/SEO/パフォーマンス改善/CMS

   ● スプラトゥーン3（弓：S+17 / XP1900）

   ● ポケモン：スカーレット：これから育成はじめます

   株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主

   

   View Slide

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

   View Slide

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

   

   View Slide

5. 1年前のWeb Push対応状況

   デバイス 対応ブラウザ
   Windows Chrome、Edge、Firefox
   Mac Chrome
   Android Chrome
   iPhone -
   ※クロスブラウザ対応のサービスでは厳しい 

   

   View Slide

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

   

   View Slide

7. 2023年4月現在のWeb Push対応状況

   デバイス 対応ブラウザ
   Windows Chrome、Edge、Firefox
   Mac Chrome、Safari（Venturaから対応）
   Android Chrome
   iPhone Safari※インストールしたPWAのみ
   ※OneSignalで動作確認、他サービスだと違う可能性あり 

   

   View Slide

8. Web Push

   Webページ経由で登録すると

   通知を受け取れる。（アプリは不要）

   ネイティブアプリの通知と同じ見た目。

   

   View Slide

9. Web Pushの設定項目（スクショはMac Chrome）

   ① ブラウザアイコン：通知を許可したブラウザ 

   ② タイトル：任意で指定可能 

   ③ ドメイン名（通知を許可したサイトのURL）：通知を許可したサイト 

   ④ 本文：任意で指定可能 

   ⑤ 画像：任意で指定可能（省略した場合はPWAで設定したアイコン） 

   ⑥ タップした時に開くURL（表示はされない） 　 　　　　　　

   
 ①
 ②

   ⑤

   ④ 

   ③

   

   View Slide

10. WindowsのChrome

    ● 許可ウィンドウはアドレスバーに表示 

    ● 通知はディスプレイの右下に表示 

    

    View Slide

11. WindowsのEdge

    ● 許可ウィンドウはアドレスバーに表示 

    ● 通知はディスプレイの右下に表示 

    

    View Slide

12. WindowsのFirefox

    ● 許可ウィンドウはアドレスバーに表示 

    ● 通知はディスプレイの右下に表示 

    

    View Slide

13. MacのChrome

    ● 許可ウィンドウはアドレスバーに表示 

    ● 通知はディスプレイの右上に表示 

    UIとしてはWindowsのChromeと同
    じ。

    拒否ばかりしているので通知がデ
    フォルトでブロックされてしまうケー
    ス・・・

    

    

    View Slide

14. MacのSafari

    

    ● 許可ウィンドウは画面中央に表示 

    ● 通知はディスプレイの右上に表示 

    Chromeとは違って、通知にはSafariのアイコンが表
    示されない。

    

    

    View Slide

15. AndroidのChrome

    
 ● 許可ウィンドウは画面中央に表示 

    ● 通知は画面上部と通知一覧に表示 

    

    View Slide

16. iPhoneのSafari（PWA）

    
 ● 許可ウィンドウは画面中央に表示 

    ● 通知は画面上部と通知センターに表示 

    

    PWAをホーム画面に追加してそこから起動しな
    いと通知許可のウィンドウ自体が出ないので注
    意！

    

    View Slide

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

    

    View Slide

18. 実装についてはPWA Night for beginnersでも紹介

    5/11（木）12:00〜13:00

    

    View Slide

19. ありがとうございました！

    Twitter まぁし@chocodogmagic

    フォローしてね

    PWA Nightは

    毎月第3水曜日

    　　　　　　　　参加してね！

    平日9:00〜SpacesでWeb情報発信中！
    

    TAMで一緒にお仕事しませんか？

    お仕事のご依頼・各職種の採用も募集中

    

    View Slide