$30 off During Our Annual Pro Sale. View Details »

Web Push対応状況2023

Chinen
April 19, 2023

Web Push対応状況2023

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

Chinen

April 19, 2023
Tweet

More Decks by Chinen

Other Decks in Technology

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