PWA Night Vol.50 ~Web Push〜 の登壇資料です。 https://pwanight.connpass.com/event/280017/
Web Push対応状況2023 2023/4/19 まぁし
View Slide
知念 昌史 / まぁし 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、FirefoxMac ChromeAndroid ChromeiPhone -※クロスブラウザ対応のサービスでは厳しい
iOS 16.4でWeb Pushに対応!!(2023.3.27)
2023年4月現在のWeb Push対応状況 デバイス 対応ブラウザWindows Chrome、Edge、FirefoxMac Chrome、Safari(Venturaから対応)Android ChromeiPhone 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で一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中