久々に、HTML5 テクニックバイブルで知ったことのメモ。いったい何度目だ・・・。
今回はデスクトップ通知について。なんと、HTML5では、ブラウザからデスクトップ通知を表示することができるそうです。しかも、通知を指示するページを表示してなくても(ブラウザを最小化してたり、別タブで違うページを見てたりしててもという意味)。
とりあえず、サンプルページとして、カウントダウンタイマーを作成して０秒になった時点でデスクトップ通知を表示するウェブページを作ることにします。
<div id="cd_timer"> <select id="cd_minute"> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 <option value="8">8 <option value="9">9 <option value="10">10 </select> 分 <select id="cd_second"> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 <option value="8">8 <option value="9">9 <option value="10">10 <option value="11">11 <option value="12">12 <option value="13">13 <option value="14">14 <option value="15">15 <option value="16">16 <option value="17">17 <option value="18">18 <option value="19">19 <option value="20">20 <option value="21">21 <option value="22">22 <option value="23">23 <option value="24">24 <option value="25">25 <option value="26">26 <option value="27">27 <option value="28">28 <option value="29">29 <option value="30">30 <option value="31">31 <option value="32">32 <option value="33">33 <option value="34">34 <option value="35">35 <option value="36">36 <option value="37">37 <option value="38">38 <option value="39">39 <option value="40">40 <option value="41">41 <option value="42">42 <option value="43">43 <option value="44">44 <option value="45">45 <option value="46">46 <option value="47">47 <option value="48">48 <option value="49">49 <option value="50">50 <option value="51">51 <option value="52">52 <option value="53">53 <option value="54">54 <option value="55">55 <option value="56">56 <option value="57">57 <option value="58">58 <option value="59">59 </select> 秒 <input type="button" value="スタート" id="btn_start" disabled> <input type="button" value="ストップ" id="btn_stop" disabled> </div> <div id="cd_txt"></div>
var min = 0, sec = 0;
var cdTimer; //カウントダウンタイマー
// カウントダウン表示
function viewCountDown(){
var txt;
if(min > 0){
txt = min + '分' + sec + '秒';
}else{
txt = sec + '秒';
}
$('#cd_txt').text(txt);
}
// カウントダウン
function setCountDown(){
--sec;
if(sec === 0 && min === 0){
viewNotification();
clearInterval(cdTimer);
$('#btn_stop').attr('disabled' , true);
$('#btn_start').attr('disabled', false);
}else{
if(sec < 0){
sec = 59;
--min
}
}
viewCountDown();
}
// 通知表示
function viewNotification(){
var notification = new Notification('タイマー終了しました', {
body: 'クリックしてください',
icon: 'green64_i.png'
});
notification.onclick = function(){
window.focus();
};
}
$(function(){
switch(Notification.permission){
case 'denied':
$('#cd_txt').html('ブラウザ設定でデスクトップ通知の許可を有効化するようお願いします');
break;
case 'default':
var $button = $('<input type="button" value="デスクトップ通知を有効にする">')
$button.click(function(){
Notification.requestPermission(function(permission){
$('#btn_start').attr('disabled', false);
});
});
$('#cd_txt').append($button);
break;
default:
$('#btn_start').attr('disabled', false);
}
// スタートボタン
$('#btn_start').click(function(){
min = $('#cd_minute').val() - 0;
sec = $('#cd_second').val() - 0;
viewCountDown();
cdTimer = setInterval(setCountDown, 1000);
$('#btn_stop').attr('disabled' , false);
$('#btn_start').attr('disabled', true);
});
// ストップボタン
$('#btn_stop').click(function(){
clearInterval(cdTimer);
$(this).attr('disabled', true);
$('#btn_start').attr('disabled', false);
});
});
サンプルページ：
最新のChromeやFirefoxではうまく動くはずです。
ページを開くと『デスクトップ通知を有効にする』というボタンが表示されていると思うので、そのボタンを押し、デスクトップ通知の許可をしてください。その後、スタートボタンが押せるようになると思うので、分と秒の数値を指定し、スタートボタンを押してください。カウントダウンがはじまります。０秒になるとデスクトップの右下に通知が表示されます。
試しに１０秒ぐらいで試してみて、ブラウザを最小化したり、別タブを見たりしてみてください。それでも表示されると思います。なお、通知をクリックすると通知元のページを表示するようにしています。
コメント