MovableType.net 活用ブログ

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

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

先日、スタンダードプラン以上で利用できる新機能として更新情報をタイムリーに閲覧者に届けることのできる、Webプッシュ通知機能を公開しましたが、既存のサイトに購読機能を追加する方法をご紹介します!
※Webプッシュ機能を利用するには閲覧ページのHTPPSが有効になっている必要があります。

今回はPublic Organizationをベースにしたサイトを例にします。

マニフェストファイルの設定

まず、ホーム画面に登録する場合などの設定などが記載されたマニフェストファイルの設定の中の以下の項目を[設定]>[全般]から行います。

  • ショートネーム:ホーム画面に登録された際に表示される名前
  • アイコン:ホーム画面に登録された場合に表示されるアイコン。購読や通知画面にも利用される。

マニフェストファイルのテンプレートへの出力

作成されたマニュフェストファイルは<$mt:ManifestLink$>タグで出力されるので、Public Organizationテーマでは全ページのheadタグの終わりの前に挿入されるheader-scriptモジュールの最後に入れます。

実際の出力は以下のようにされます。

<link rel="manifest" href="https://example.com/.app/manifest.json">

Webプッシュ通知の設定

次に、[設定]>[Webサービス]からWebプッシュ通知の設定をします。

有効にチェックを入れ、実際に通知する際に表示される(通知するときにテキストは編集できます)際のテンプレートと、閲覧者が購読する際に表示される購読用モーダルのテンプレートの設定をします。

Webプッシュ通知に必要なスクリプトの挿入

通知の購読を実現するために必要なスクリプトを出力する<$mt:ServiceWorkerSnippet$>タグを挿入します。

このタグは、bodyの終了タグの直前に入れるのが望ましいのでfooter-scprtモジュールの一番下に挿入します。
今回は自動で登録モーダルが表示されないように、モディファイアをつけて<$mt:ServiceWorkerSnippet pn_auto_spawn="0"$> という記述にします。

購読・解除のためのボタンを設置

上記で登録モーダルの自動表示はさせないようにしたので、モーダル表示用のボタンを設置します。

まず、今回はサイドバーのインフォメーションに表示したいので、以下のソースをinformationモジュールに記述します。

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

次に以下のCSSをスタイルシートに追加します。

/* ------------------------------------------
            webpush
------------------------------------------ */
.webpush {
display: none;
}

.mtnet-push-notification-service-enabled .webpush {
  display: block;
}

.side-webpush {
  width: 100%;
  text-align: center;
  display: inline-block;
  padding: 15px 15px 15px 52px;
  position: relative;
  background-color: <$mt:Var name='main_color'$>;
  color: #ffffff;
}

.side-webpush::before {
  position: absolute;
  content: "\f0f3";
  z-index: auto;
  left: 2rem;
  top: 12px;
  font-size: 1.25rem;
  font-family: FontAwesome;
}

ボタンのCSSに関しては対応していないブラウザの場合は表示されないように基本的には非表示にしてあり、対応している場合はbodyタグのクラスに.mtnet-push-notification-service-enabledというクラスが追加されるので表示される、という仕組みを入れています。
その他詳しい条件等はマニュアルをご覧ください。

ボタンの色とテキストの色は、以下のbackground-colorとcolorでサイトにあわせて変更してください。

以上でウェブサイトにWebプッシュ通知の購読機能を持たせることができました。他のテーマをベースにしていても基本的な部分は同じですので、是非ご利用いただければと思います!

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

アカウント作成