MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

Webプッシュ通知の購読を配下のブログも含めて行えるようにする方法

スタンダードプラン以上では、更新情報をタイムリーに閲覧者に届けるWebプッシュ通知機能が利用でき、実際に自分で導入する方法は以下になります。

ウェブサイトにWebプッシュ通知の購読機能を持たせる

上記方法の場合、設置したブログを対象に購読することになりますが、カスタマイズをすると特定のブログの購読やウェブサイト配下のすべてのブログを登録することができます。

特定のブログを指定する方法

<a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir: 'blog'})">
  <section class="side-webpush">Webプッシュ通知の購読</section>
</a>

特定のブログを1つ指定する場合は、上記のソースで購読ボタンを設置し rootDir: 'blog' のblogの部分を指定したいブログのフォルダ名を記述します。

例えば、example.com/staffblog/といったようにウェブサイトの配下にスタッフブログを作ったけど、トップページなどのウェブサイト上でも購読させたい、といった場合に利用できます。

ウェブサイトも含む配下のブログでオンになっているブログをすべて購読させる方法

対象が1つであれば上記のようにシンプルに対応が可能でしたが、ウェブサイトも含む配下のブログもまとめて購読する、という場合には少々追加コードが必要になります。

ただ、これが実現できれば閲覧者は1度購読するだけでそのサイト内のWebプッシュ通知を利用しているすべての更新情報を受け取ることができるようになるので便利です。

まずは購読ボタンの方のソースコードは以下になります。

<a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir:'/'})">
  <span>Webプッシュ通知の購読</span>
</a>

こちらも rootDir:'/' といったように指定するのがポイントです。

続いて、必要なスクリプトを出力させる mt:ServiceWorkerSnippet にもその下に追加で以下のスクリプトを追加します。

<$mt:ServiceWorkerSnippet pn_auto_spawn="0"$>
<script id="subscribe-all-blogs" data-blog-dirs='<mt:Blogs><mt:If tag="PushNotificationEnabled"><mt:BlogDirname>,</mt:If></mt:Blogs>'>
if (MT.PushNotification.isSupportEnvironment()) {
  MT.PushNotification.ready.then(function() {
    var service = MT.PushNotification.PushNotificationService.getInstance();
    var siteUrl = (function() {
      var aElement = document.createElement("a");
      aElement.href = "/";
      return aElement.href;
    })();

    service.on("scriptionstatuschange", function(data) {
      if (!(siteUrl in data)) {
        return;
      }

      var siteIsSubscribed = data[siteUrl];

      document
        .getElementById("subscribe-all-blogs")
        .dataset["blogDirs"].slice(0, -1)
        .split(",")
        .forEach(function(dir) {
          MT.PushNotification.isSubscribed({ rootDir: dir }).then(function(
            blogIsSubscribed
          ) {
            if (siteIsSubscribed && !blogIsSubscribed) {
              service.subscribe({ rootDir: dir });
            } else if (!siteIsSubscribed && blogIsSubscribed) {
              service.unsubscribe({ rootDir: dir });
            }
          });
        });
    });
  });
}
</script>

上記により、Webプッシュ通知がオンになっているブログすべてをまとめて購読させることができます。
※購読は裏側で1つ1つ行っているため購読ブログ数が多い場合は、登録に時間がかかる場合があります。極端に多い場合はブラウザを閉じないようメッセージ等を表示してください。

以上、タイムリーな情報発信に便利なWebプッシュ通知機能、ぜひご活用ください。

Webプッシュ通知を利用する - マニュアル | MovableType.net

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成