テーマ Luxeritasでプッシュ通知を試してみる

2018年10月13日

この記事は約 4 分で読めます。

Push.jsを使って、
WEBブラウザからのプッシュ通知を
送信してみます。

※ 通知の許可を得るための
リクエストダイアログが表示されます。
「許可」を押してください。

プッシュ通知とは、
システム側が外部のサーバーと連携して
能動的に情報を取得して
ユーザーに通知する方式のこと。

Push.jsとは

Push.jsは、
Web Notification APIを
ブラウザ経由で簡単に
制御することができるjQueryプラグインです。

Web Notifications は、
ブラウザで通知機能を行うための仕様です。

非常にシンプルなコードを書くだけで
簡単にプッシュ通知を実装することができます。

導入方法

導入方法
  • STEP 1
    jsライブラリの読み込み
    CDN経由でjsを読み込む
  • STEP 2
    通知内容作成
    プッシュ通知の内容やアイコンの設定

STEP 1:jsを読み込む

GitHubから「Push.js」をダウンロードして
読み込む方法もありますが、
CDN経由で読み込む方法が簡単です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>

今回は記事単位でヘッダーを追加したいので、
記事投稿(編集)画面で、
カスタムフィールドに addhead という名前を追加し、
値の部分に上記を書きます。

POINT

カスタムフィールドがない場合、
投稿の編集画面右上、
表示オプションから選択します。

STEP 2:通知の内容を作る

<script>
Push.create("こんにちは!", {
body: "更新のおしらせがあります。",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
window.focus();
this.close();
}
});
</script>
出来上がったら、
投稿の編集、テキスト画面に書き込むか、
下記リンクを参考に
カスタムフィールドに footer_custom という名前を追加し、
値の部分に上記を書きます。

テーマ Luxeritasのbodyの終了タグ手前にカスタムフィールドを組み込む | きららとジュレのブログ

ヘッダーを追加できる テーマ Luxeritasは、 記事や固定ページ単位で ヘッダーを追加したい場合は、 記事投稿(編集)画面で、 カスタムフィールドに addhead という名…

neco913.kirara.st

まとめ

プッシュ通知は、
ユーザーが表示を許可している必要があるので
制約がありますが、
こんな感じのメッセージも面白いと思います。

参考ブログ

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

テーマ Luxeritasでプッシュ通知を試してみる

カスタマイズ - JSCustomize, JS, Luxeritas

Posted by four4to6