0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Chrome DevToolsのServiceWorker 

Last updated at Posted at 2025-04-06

ServiceWorker.png

通知での挙動
'badge'
通知に小さなバッジアイコン(通常は白黒)を表示。スマホや一部ブラウザに対応。badge-icon.png が使われる。

'image'
通知に**大きな画像(バナー)**を表示(上部または中央に表示)。画像は banner.jpg。主にデスクトップ向け。

'requireInteraction'
通知が自動で消えず、ユーザーが操作するまで画面に残るようになる。

'tag'
通知に一意の識別子(タグ)を設定。同じタグの通知が来た場合、古い通知が上書きされる。

'renotify'
'tag' と一緒に使う。通知が上書きされたときにも、再度通知音やバイブを鳴らすようになる。

'silent'
通知音やバイブを鳴らさないようにする(静かな通知)。

'vibrate'
モバイルデバイスなどでバイブレーションをカスタムパターンで鳴らす(例:200ms振動→100ms停止→200ms振動)。

'timestamp'
通知に現在の時刻を表示する。一部ブラウザで「●分前」などが表示されるようになる。

'data'
通知にカスタムデータ(ここではURL)を埋め込む。通知クリック時にそのデータを利用できる。

'dir'
通知のテキストの向きを指定。"rtl"(右から左)なので、アラビア語などが正しく表示される。

'lang'
通知に言語情報を設定(例:日本語)。bodyも日本語にして、ローカライズ通知を作る例。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?