ITエンジニア/デザイナ向けにオープンソースを毎日紹介

チャットやコミュニティサイトをはじめ、Webサイトを訪れているユーザに通知を投げたいと思うケースは多々あります。HTML5のデスクトップ通知を使う手もありますが、サポートしていないブラウザもあります。

そこで試してみたいのがHTML5 Push Notificationsです。サイトの訪問中にしか使えませんが、サーバサイドでも簡単に使えるデスクトップ通知ツールです。

HTML5 Push Notificationsの使い方

送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。
送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。

文字を変えれば通知も変更できます。
文字を変えれば通知も変更できます。

HTML5 Push Notificationsはサーバサイドからも通知を送信できます。例えばPHPの場合、次のようなコードでできます。

$app_key = 'YOUR_APP_KEY';
$app_secret = 'YOUR_APP_SECRET';
$app_id = 'YOUR_APP_ID';

$pusher = new Pusher($app_key, $app_secret, $app_id);
$data = array('message' => 'This is an HTML5 Realtime Push Notification!');
$pusher->trigger('my_notifications', 'notification', $data);

この機能自体はPusherというリアルタイム通信を提供するサービスを使い、サーバサイドからPusherを経由してクライアントサイドにメッセージを送っています。ブロードキャストで送られるようで、特に端末の指定はできないようです。

仕組みとしては個別のユーザ宛と言うよりは、システムのお知らせや同じチャットルームにいる全員に送ったりといった目的に使うのが良いかもしれません。

HTML5 Push NotificationsはHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

HTML5 Push Notifications using Pusher - Frameset

pusher/html5-realtime-push-notifications

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2