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

2018年10月1日2019年7月11日

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

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

Push.jsとは

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

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

導入方法

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>

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

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

neco913.kirara.st

テーマ Luxeritasでfooter専用の入力欄を追加 | きららとジュレのブログ

Luxeritasが 3.3.5にバージョンアップされ、 addhead 専用の入力欄が 追加されました。 今までは 記事や固定ページ単位で ヘッダーを追加したい場合は、 記事投稿…

neco913.kirara.st

まとめ

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

参考ブログ

世界一簡単にブラウザのプッシュ通知を実装できる「Push.js」の使い方を徹底解説｜fer

スマートフォンアプリではおなじみの*プッシュ通知*。実は、Webブラウザからもできることをご存知でし ...

 https://ferret-plus.com/6035

最後に

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