5分後にプッシュ通知を飛ばす

kimizuka.hatenablog.com

以前、ブラウザのプッシュAPIをつかったことがありました が、今回はそれを応用して、5分タイマーをつくりました。
プレゼンの時とかに役に立ちます。

JavaScript

(function(win, doc) {

  "use strict";

  Notification.requestPermission();

  new Button(doc.querySelector(".btn"), function() {
      var LIMIT = 5;
      
      setTimeout(function() {
          push("1分前");
          setTimeout(function() {
              push("終了！");
          }, 1 * 60 * 1000);
      }, (LIMIT - 1) * 60 * 1000);
  });

  function Button(elm, callback) {
    var PUSH_CLASSNAME = "push";

    _init();
    
    function _init() {
      elm.addEventListener("mousedown",  _handlePushStart, false);
      elm.addEventListener("touchstart", _handlePushStart, false);
      elm.addEventListener("mouseup",    _handlePushEnd,   false);
      elm.addEventListener("touchend",   _handlePushEnd,   false);
    }
    
    function _handlePushStart() {
      elm.classList.add(PUSH_CLASSNAME);
    }
    
    function _handlePushEnd() {
      elm.classList.remove(PUSH_CLASSNAME);
      callback();
    }
  }

  function push(msg) {
    new Notification("TIMER", {
      body: msg,
      icon: "http://jsrun.it/assets/t/D/c/B/tDcBz.jpeg"
    });
  }
})(this, document);

DEMO

ページを閉じてしまうと通知が来なくなってしまうので注意！