ブラウザからデスクトップ通知をする方法


久々に、HTML5 テクニックバイブルで知ったことのメモ。いったい何度目だ・・・。

今回はデスクトップ通知について。なんと、HTML5では、ブラウザからデスクトップ通知を表示することができるそうです。しかも、通知を指示するページを表示してなくても(ブラウザを最小化してたり、別タブで違うページを見てたりしててもという意味)。

とりあえず、サンプルページとして、カウントダウンタイマーを作成して0秒になった時点でデスクトップ通知を表示するウェブページを作ることにします。

サンプルページ:
最新のChromeやFirefoxではうまく動くはずです。

ページを開くと『デスクトップ通知を有効にする』というボタンが表示されていると思うので、そのボタンを押し、デスクトップ通知の許可をしてください。その後、スタートボタンが押せるようになると思うので、分と秒の数値を指定し、スタートボタンを押してください。カウントダウンがはじまります。0秒になるとデスクトップの右下に通知が表示されます。

試しに10秒ぐらいで試してみて、ブラウザを最小化したり、別タブを見たりしてみてください。それでも表示されると思います。なお、通知をクリックすると通知元のページを表示するようにしています。

コメントを残す

メールアドレスが公開されることはありません。