スタンダードプラン以上では、更新情報をタイムリーに閲覧者に届けるWebプッシュ通知機能が利用でき、実際に自分で導入する方法は以下になります。
上記方法の場合、設置したブログを対象に購読することになりますが、カスタマイズをすると特定のブログの購読やウェブサイト配下のすべてのブログを登録することができます。
特定のブログを指定する方法
<a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir: 'blog'})">
<section class="side-webpush">Webプッシュ通知の購読</section>
</a>
特定のブログを１つ指定する場合は、上記のソースで購読ボタンを設置し rootDir: 'blog' のblogの部分を指定したいブログのフォルダ名を記述します。
例えば、example.com/staffblog/といったようにウェブサイトの配下にスタッフブログを作ったけど、トップページなどのウェブサイト上でも購読させたい、といった場合に利用できます。
ウェブサイトも含む配下のブログでオンになっているブログをすべて購読させる方法
対象が１つであれば上記のようにシンプルに対応が可能でしたが、ウェブサイトも含む配下のブログもまとめて購読する、という場合には少々追加コードが必要になります。
ただ、これが実現できれば閲覧者は１度購読するだけでそのサイト内の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プッシュ通知がオンになっているブログすべてをまとめて購読させることができます。
※購読は裏側で１つ１つ行っているため購読ブログ数が多い場合は、登録に時間がかかる場合があります。極端に多い場合はブラウザを閉じないようメッセージ等を表示してください。
以上、タイムリーな情報発信に便利なWebプッシュ通知機能、ぜひご活用ください。
