[HTML5] Desktopにメッセージを送るNotification

[HTML5] Desktopにメッセージを送るNotification

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

こんにちは。ハンナです。

最近注目を集めているチームコミュニケーションツールの【Slack】のウェブバージョンを見るとプログラムを設置したこともないのにBrowserではなくDesktopにアラームが表示されていることを見たことがありますよね。

それは、なぜできるのか?
理由はHTML5のNotificationを利用しているからです。

HTML5のNotification

Desktopにアラームを権限要求するNotificationと、Desktopにアラーム送るNotificationを利用すれば簡単にできます。

下記のDemoを見てください。
https://jsfiddle.net/kh0gvpu0/5/embedded/result/

とりあえず下のようなHTMLを作成します。

image06

Desktop Notificationの権限要請はNotification.requestPermission(callback)のMethodで処理ができます。
Desktopアラーム権限要請のボタンクリックしてブラウザのラベルでユーザが確認します。

アラーム使用許可の結果はcallbackのparameterに送ります。
parameterの内容は許可が【granted】、拒絶は【denied】、それと【default】があります。

if(“Notification” in window)でNotification支援するブラウザを確認します。
サポート・ブラウザであれば下図のようにNotificationの許可を選択するアラートが出ます。

image07

var notification = new Notification(title, options)を利用してメッセージを送ることができます。
一番のparameterはアラームタイトル、二番のparameterはoptionになります。

option中にはbodyと言うメッセージとアラームイメージのiconと色々ありますが、このPropertiesはMDNのNotificationを参考してください。

image04

アラームが来ました。

Notificationでユーザにメッセージとかお知らせなどができて、いろいろと応用できるのではないかと思います。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...