Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Push対応状況2023
Search
Chinen
April 19, 2023
Technology
0
430
Web Push対応状況2023
PWA Night Vol.50 ~Web Push〜 の登壇資料です。
https://pwanight.connpass.com/event/280017/
Chinen
April 19, 2023
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
85
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
300
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.3k
Other Decks in Technology
See All in Technology
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
社内勉強会運営のコツ
senoo
6
1.2k
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
200
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
62
18k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.4k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
700
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
530
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
180
オブザーバビリティの Primary Signals
onk
PRO
0
550
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
A better future with KSS
kneath
231
16k
Web development in the modern age
philhawksworth
202
10k
Bash Introduction
62gerente
604
210k
Optimizing for Happiness
mojombo
370
69k
A Philosophy of Restraint
colly
196
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
The Invisible Side of Design
smashingmag
294
49k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Thoughts on Productivity
jonyablonski
57
3.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Writing Fast Ruby
sferik
620
60k
Transcript
Web Push対応状況2023 2023/4/19 まぁし
知念 昌史 / まぁし 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、Firefox Mac Chrome Android Chrome
iPhone - ※クロスブラウザ対応のサービスでは厳しい
iOS 16.4でWeb Pushに対応!!(2023.3.27)
2023年4月現在のWeb Push対応状況 デバイス 対応ブラウザ Windows Chrome、Edge、Firefox Mac Chrome、Safari(Venturaから対応) Android Chrome
iPhone 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で一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中