Movable Type.net 安心・高速・サーバー不要の
SaaS型 本格CMS

マニュアル

Webプッシュ通知を利用する

Webプッシュ通知機能を有効にすることで、MovableType.net のサイト内でWebプッシュ通知を利用できるようになります。
利用するための設定はそれぞれ以下になります。

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

Webプッシュ通知に必要なファイルの１つとしてマニフェストファイルというものがありますが、このファイルで指定は以下の手順で行えます。

  1. 左サイドバーの [設定] - [全般] をクリックする
  2. 「ショートネーム」項目でマニフェストのショートネームを設定する（最大で12文字推奨）
  3. 「ウェブアプリ マニフェスト」項目のチェックボックスを [有効] にする
  4. 「アイコン」項目で [参照] ボタンからアイコンを設定する
  5. 「表示タイプ」項目でサイトを開いた際に、ブラウザのUIを表示する／しないを設定する
  6. 「テーマカラー」項目でデバイスのホーム画面からユーザーがサイトを開いた際のカラーを設定する
    16進数のカラーコードで入力してください。　例）#ffffff

    テーマカラーに関しては、マニフェストファイル以外にもhead内にmeta情報として記述することが推奨されていますので、以下の記述で追加を行ってください。

    <meta name="theme-color" content="<$mt:BlogThemeColor$>">
  7. 「背景色」項目でサイトを最初に表示した際のスプラッシュスクリーンの背景色を設定する
    16進数のカラーコードで入力してください。　例）#ffffff
  8. [変更を保存] をクリックする

マニフェストファイルの出力は <$mt:ManifestLink$> タグで行えるので全てのページのhead内等に記述してください。

Webプッシュ通知の設定

  1. 左サイドバーの [設定] - [Web サービス] をクリックする
  2. 「Webプッシュ通知」項目の [有効] チェックを有効にする
  3. 必要な項目を入力し [変更を保存] をクリックする
    通知テンプレート
    投稿後にこのテンプレートを使ってプッシュ通知を送ることができます。送信するプッシュ通知の内容はここで設定します。
    • タイトル
    • 本文
    登録テンプレート
    登録用モーダルで使用するメッセージを変更することができます。 ブログ（ウェブサイト）上に表示される登録モーダルに使用するメッセージの内容はここで設定します。
    • タイトル
    • 本文
    • テンプレートタグ
      <$mt:ServiceWorkerSnippet$>

      上記タグを登録用モーダルを表示したい全てのページの</body>タグの前に設置してください。画像はマニフェストファイルで指定したアイコンが利用されます。

      登録用モーダルは標準で自動的に表示されます。自動で表示させたくない場合は、 pn_auto_spawn="0" のモディファイアを追加します。
      例：<$mt:ServiceWorkerSnippet pn_auto_spawn="0"$>

Webプッシュ通知の購読・解除モーダルの表示方法

購読・解除のモーダルウィンドウを表示させたい場合は、以下の記述で表示することができます。

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

上記記述では今表示しているブログの登録モーダルを表示しますが、パスの情報を渡すことによって任意のブログのモーダルを表示することもできます。

MT.PushNotification.openSubscriptionModal({path: '../foo'});

以下の記述ではrootDirは <$mt:BlogDirname$> で出力される値と同じになるので、fooの部分にブログのフォルダ名を指定すれば特定のブログの購読モーダルを表示可能です。ルートのブログは{rootDir: '.'}という記述になります。

MT.PushNotification.openSubscriptionModal({rootDir: 'foo'});

また、状態や表示している環境によって以下のclassがbodyタグに追加されます。

  • Servie Workerが登録された状態： mtnet-service-worker-registered
  • Webプッシュ通知が利用できる状態： mtnet-push-notification-service-enabled
  • Webプッシュ通知を購読した状態： mtnet-push-notification-is-subscribed
  • Webプッシュ通知を購読していない状態： mtnet-push-notification-is-not-subscribed

これを利用することによって、CSSを利用して対応していないブラウザで表示しない等ボタンの表示のコントロールを細かく行うことができます。

Webプッシュ通知を行うための手順

  1. 記事、またはウェブページを公開する
  2. ページ上部に表示されるメッセージで「通知する」リンクをクリックする

    すでに投稿済みの記事、ウェブページで Web プッシュ通知を利用する場合、右上の記事（ウェブページ）の操作から通知するリンクをクリックする。

  3. 開いたモーダルで「Webプッシュ通知」項目のチェックが有効であることを確認する
    タイトルと本文は必要に応じて変更してください。

  4. [通知] ボタンをクリックする

Webプッシュ通知の利用者を解除するための手順

  1. 左サイドバーの [設定] - [Web サービス] をクリックする
  2. 「購読者のリセット」項目の [プッシュ通知の購読者をリセットする] リンクをクリックする