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

developer.mozilla.org

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

DEMO

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

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

※ Chromeの場合

※ 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

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