控えめなお知らせ機能を実装する(JavaScript, Notification API , Page Visibility API)

2016.11.30

どうもfujiharaです。めっきり寒くなりましたね。
先日飲み会がありまして、元会社の先輩がMA1というジャンパーを着用していて、その時初めてMA1という存在を知り、とりあえず買っておきました。
本日はブラウザ上で控えめなお知らせ機能の実装をご紹介致します。
注)**PCブラウザでお試しください。

Notification API

API自体はHTML5 で追加されたものです。通知の方法自体は至って簡単です。


// Notification がブラウザで使用可能か
"Notification" in window
// Notification がユーザに許可されているか
Notification.permission === "granted"
// Notification 許可をユーザに求める
Notification.requestPermission(function(permission) {
  // permission が granted なら許可
});
//新しく通知を作成する
new Notification(title);
//新しく通知を作成する title + body
new Notification(title, {body: '本文', ...});

APIが使用可能ならば、後は呼び出すだけです。呼び出す方法は new Notification(title)になります。
オプションについては Notification APIを参照下さい。今回はNotificationのアイコンのみ変更します。

Page Visibility API

これはブラウザが表示されているかの判定に使えます。各ブラウザによって若干イベント名とプロパティ名が異なりますので、初回に決定します。コードは以下になります。参考


//反転に使用するプロパティメイト, イベント名を決定する
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

//ページが表示されているかのイベント登録
document.addEventListener(visibilityChange, callback, false);

仕様

控えめなお知らせですので、ページが非表示になったときにお知らせを出すようにします。ページが表示の際にはお知らせを表示しないようにしています。
(ページの非表示とはブラウザのタブを切り替えたりした時です。)


function enableNotification() {
  if (!("Notification" in window)) {
    return false;
  }
  return true;
}

var hidden, visibilityChange;

if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

//お知らせを表示する関数
function viewNotification(options) {
  var title = 'バシャログ閲覧ありがとうございます。';
  var baseOptions = {
    icon: 'https://bashalog.c-brains.jp/favicon.ico'
  };
  new Notification(title, Object.assign({}, baseOptions, options));
}

//ページのPageVisibility が変更された際に呼ばれる
function noticeVisibilityChanged()
{
  //ページが表示されてるときは通知を出さない
  if (!document[hidden]) {
    return;
  }
  viewNotification({body: 'ページが非表示になりました。'});
}

//PageVisibility の変更をイベント登録
function setVisibilityEventListener() {
  document.addEventListener(visibilityChange, noticeVisibilityChanged, false);
}

//通知機能が使えるか
if (!enableNotification() && (hidden && visibilityChange)) {
  alert('各種API機能をサポートしていません。ブラウザを変更してお試しください。');
} else {
  if (Notification.permission !== "granted") {
    Notification.requestPermission(function(permission) {
      if (permission === 'granted') {
        viewNotification({body: "通知許可ありがとうございます。"});
        setVisibilityEventListener();
      }
    });
  } else {
    viewNotification({body: 'お知らせ通知が許可されています。'});
    setVisibilityEventListener();
  }
}