はじめに
Web Notifications は、ブラウザで通知機能を行うための仕様です。
今回はこれを試してみました。
Webサーバ（nginx）
何はともあれ、Webサーバが必要ですのでインストールします。
MacBook には最初から Apache が入っていますが、これは使いたくないので別にインストールします。
私の MacBook には Docker for Mac がインストールしてあるので簡単に作れます。
以下のコマンドで nginx のコンテナを作成します。
$ docker run -d -p 80:80 --name webserver nginx
Unable to find image 'nginx:latest' locally
latest: Pulling from library/nginx
6d827a3ef358: Pull complete
b556b18c7952: Pull complete
03558b976e24: Pull complete
9abee7e1ef9d: Pull complete
Digest: sha256:52f84ace6ea43f2f58937e5f9fc562e99ad6876e82b99d171916c1ece587c188
Status: Downloaded newer image for nginx:latest
e2fdc7b02c011813ae1f64e6b0ac7d6904908543e5210d4962a51ebb8772b34f
$
アクセスして Welcome画面 が表示されれば OK です。
ただ、このままではファイルをデプロイするのが面倒なので、
docker の Volume 機能を使用してホスト上のディレクトリを
nginx の Document Root にマウントします。
- 一度、コンテナを停止してから削除します。
$ docker stop webserver
webserver
$ docker rm webserver
webserver
$
- Volume を指定して再度コンテナを起動します。(カレントを Document Root に指定)
$ docker run -d -p 80:80 -v $PWD:/usr/share/nginx/html --name webserver nginx
78d4d793320f5659bd1b038a067e865a913a04f015a7bd30fd9cdce2c2f53157
$
- カレントに適当な index.html を作成してブラウザで確認します。
次回からは以下のコマンドで起動／停止します。
$ docker start webserver
webserver
$ docker stop webserver
webserver
$
通知 - Notifications API
通知は Notifications API という Javascript API を使います。
Notifications API で通知を表示するためには、最初にユーザに許可を得る必要があります。
許可しないともちろん通知は表示されません。
通知の表示許可
Notification.requestPermission() を呼び出すと、上記のようなダイアログが表示されます。
既に許可／拒否している場合はダイアログは表示されずに、直ぐにコールバックが呼び出されたので、現在の状態を気にせずに呼び出しても平気です。
// ブラウザが通知をサポートしているか確認する
if (!('Notification' in window)) {
alert('未対応のブラウザです');
}
else {
// 許可を求める
Notification.requestPermission()
.then((permission) => {
if (permission == 'granted') {
// 許可
} else if (permission == 'denied') {
// 拒否
} else if (permission == 'default') {
// 無視
}
});
}
一度、許可や拒否をした後は、ブラウザで設定を元（デフォルトに設定）に戻さないと再度ダイアログを表示することができません。
Chrome の場合はアドレスバー左の赤丸をクリックすると通知設定を変更できました。
通知の表示
通知には様々な内容を含めることができます。
以下に一部を記載します。
| 項目 | 説明 |
|---|---|
| title | 通知ウィンドウの上部に表示される。 |
| body | 通知の本文でタイトルの下に表示される。 |
| icon | 通知に表示されるアイコンのURL。 |
| tag | 通知の識別タグ。同じタグを指定すると通知が置き換えられる。 |
| data | 通知に関連付ける任意のデータ。 |
title 以外はオプションです。
通知の表示は簡単で、タイトルとオプションを指定して Notification インスタンスを生成するだけです。
var n = new Notification(
title,
{
body: '本文です',
icon: 'img/xxx.png',
tag: '',
data: {
xxx: '任意のデータ'
}
}
);
色々なブラウザで表示してみましたが、チョットずつ違うんですね。
改行できなかったり、アイコンが表示されなかったり。 (^^;
■ Chrome
■ Firefox
■ Safari
■ Edge
■ Vivaldi
tag の指定
| ブラウザ | tagなし | tagあり |
|---|---|---|
| Chrome | 最大３つまで表示し、１つ閉じたら次の通知が表示された。
|
同じ tag を指定すれば、ちゃんと通知が置き換わった。 |
| Firefox | 通知したらどんどん表示される。 Mac では重なって表示されたので、１つしか表示してないように見えた。 Windows ではちゃんと表示された。 |
同じ tag を指定すれば、ちゃんと通知が置き換わった。 |
| Safari | 通知したらどんどん表示される。 Mac では重なって表示されたので、１つしか表示してないように見えた。 |
同じ tag を指定すれば、ちゃんと通知が置き換わった。 |
| Edge | 1つ閉じたら次の通知が表示された。 | tag なしと同じ動作をした。 |
| Vivaldi | 通知したらどんどん表示される。 Mac では重なって表示されたので、１つしか表示してないように見えた。 Windows ではちゃんと表示された。 |
tag を指定すると２回目から表示されない。 |
通知を閉じる
表示された通知は少し (4 秒程度) 経過したら自動的に閉じますが、動作が異なるブラウザがあったのでまとめました。
| ブラウザ | 自動的に 閉じるまでの秒数 |
|---|---|
| Chrome | 20秒 |
| Firefox | 4秒 |
| Safari | 4秒 |
| Edge | 6秒 |
| Vivaldi | 4秒 Windows版は20秒 |
以下のサイトにいい情報が載っていました。
https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications
Firefox および Safari は、少し (4 秒程度) 経過したら自動的に通知を閉じます。またこれは、オペレーティングシステムレベルで行われます。一方 Chrome など、動作が異なるブラウザがあります。すべてのブラウザで確実に通知を閉じるには 4 秒後に通知を閉じるため、前出の関数の末尾に Notification.close 関数を収めた setTimeout() 関数を置きます。close() を通知に関連付けて呼び出すために bind() を使用していることに注意してください。
通知の表示 で書いたコードに４秒程度経過後に自動的に閉じる処理を追加します。
var n = new Notification(
title,
{
body: '本文です',
icon: 'img/xxx.png',
tag: '',
data: {
xxx: '任意のデータ'
}
}
);
// 確実に通知を閉じる
setTimeout(n.close.bind(n), 5000);
まとめ
かなり簡単に実装できるので、機会があったら使ってみようと思いました。
ただ、使いすぎには注意が必要だと。