テーマ Luxeritasでプッシュ通知を試してみる
この記事は約 3 分で読めます。
Push.jsを使って、
WEBブラウザからのプッシュ通知を
送信してみます。
※ 通知の許可を得るための
リクエストダイアログが表示されます。
「許可」を押してください。
システム側が外部のサーバーと連携して
能動的に情報を取得して
ユーザーに通知する方式のこと。
Push.jsとは
Push.jsは、
Web Notification APIを
ブラウザ経由で簡単に
制御することができるjQueryプラグインです。
ブラウザで通知機能を行うための仕様です。
非常にシンプルなコードを書くだけで
簡単にプッシュ通知を実装することができます。
導入方法
- STEP 1jsライブラリの読み込みCDN経由でjsを読み込む
- STEP 2通知内容作成プッシュ通知の内容やアイコンの設定
STEP 1:jsを読み込む
GitHubから「Push.js」をダウンロードして
読み込む方法もありますが、
CDN経由で読み込む方法が簡単です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.9/push.min.js"></script>
今回は記事単位でヘッダーを追加したいので、
記事投稿(編集)画面で、
カスタムフィールドに addhead という名前を追加し、
値の部分に上記を書きます。
カスタムフィールドがない場合、
投稿の編集画面右上、
表示オプションから選択します。
STEP 2:通知の内容を作る
<script>
Push.create("こんにちは!", {
body: "更新のおしらせがあります。",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
window.focus();
this.close();
}
});
</script>
投稿の編集、テキスト画面に書き込むか、
下記リンクを参考に
カスタムフィールドに footer_custom という名前を追加し、
値の部分に上記を書きます。
テーマ Luxeritasのbodyの終了タグ手前にカスタムフィールドを組み込む | きららとジュレのブログ
ヘッダーを追加できる テーマ Luxeritasは、 記事や固定ページ単位で ヘッダーを追加したい場合は、 記事投稿(編集)画面で、 カスタムフィールドに addhead という名…
テーマ Luxeritasでfooter専用の入力欄を追加 | きららとジュレのブログ
Luxeritasが 3.3.5にバージョンアップされ、 addhead 専用の入力欄が 追加されました。 今までは 記事や固定ページ単位で ヘッダーを追加したい場合は、 記事投稿…
まとめ
プッシュ通知は、
ユーザーが表示を許可している必要があるので
制約がありますが、
こんな感じのメッセージも面白いと思います。
参考ブログ
最後に
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません