みかづきブログ その3

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

Web Components で pushタグをつくろう

前回のserifタグkimizuka.hatenablog.com
に続いて、今回はpushタグをつくってみました。
クライアントに ここをプッシュして欲しいんだよね。 とか言われたときに、つかいましょう。


JavaScript

(function(doc) {

  "use strict";
  // エレメントが生成された時のコールバック
  doc.registerElement('k-push', {
    prototype: Object.create(HTMLElement.prototype, {
      createdCallback: {
        value: function() {
          Notification.requestPermission();
          this.addEventListener("click", this.push, false);
        }
      },
      // 独自メソッド
      push: {
        value: function() {
          new Notification("PUSH!", {
            body: this.innerText,
            icon: "http://kimizuka.github.io/html5plus/data/img/icon.jpg"
          });
        }
      }
    })
  });
})(document);

DEMO

クリックするとプッシュ通知がきます。

<link rel="import" href="http://kimizuka.github.io/html5plus/push/index.html" />

と、インポートすればつかえるようになるはずです。