みかづきブログ その3

3ヶ月つづけてみました。

Chrome、Safariにプッシュ通知を飛ばす

developer.mozilla.org

いつものようにインターネットという大海原をサーフィンしていたら、偶然 Notification API とやらを見つけたのでモックをつくってみました。



DEMO

※ PC版の Chrome, Safari でお試しください

なにやら許可を求められているのもOKして、Pボタンを押すと速攻プッシュ通知が飛んできます。


f:id:kimizuka:20150316194322p:plain
※ Chromeの場合


f:id:kimizuka:20150316195057p:plain
※ Safariの場合


JavaScript

(function(win, doc) {

  "use strict";

  // 許可を取る
  Notification.requestPermission();

  new Button(doc.querySelector(".btn"), push);

  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() {
    // 通知の作成
    new Notification("理屈抜きでPUSH!", {
      body: "We can say !", // 本文
      icon: "http://jsrun.it/assets/t/D/c/B/tDcBz.jpeg" // (Chrome用画像)
    });
  }
})(this, document);

ドキュメントをみるにイベントとかも貼れるようですが、今回は表示のみにしてみました。



5秒まってからプッシュバージョンをつくって検証してみたところ、

  • 該当ページを閉じているとプッシュ通知は来ない
  • 別タブでも開いていればOK
  • Safariは通知をクリックすると通知をクリックすると該当のページが開く

ということがわかりました。


5秒まってから通知バージョン DEMO



なにかにつかえるようなつかえないようなですね。