モバイルのメールとか Facebook アプリとか、新着が入るとお知らせが入りますよね。作りたい Webアプリにそれを入れたくて試してみました。ネイティブアプリだとできるんです。(やったことないけど)でも私は Web にこだわって、そして出来なかった事例を紹介します。挫折です。今回はね!


Webアプリでそれを実装するには WebSocket という API を使うのだけど、それを使うための準備が今のところタイヘンです。それを準備して、コード書いて、テストした結果、「出来ないことが分かりました!」だとツライ。。ので今回は PUSHER というサービスを使いました。

▼ Plans & Pricing
http://pusher.com/pricing
– Sandbox は無料。それ以外は有料。
ここのページ中程にある「Get your free API account」で名前・メールアドレス・パスワードを登録すると Sandbox版がすぐに使えるマイページに遷移します。(もししなかったら、ログインして Main App の APP Keys を見てください。)

ページの右側に「app_id」など必要な情報がありますね。今回は動作テストだけなので、test_channel(用意されてるもの)をそのまま使います。

用意するのはお知らせを受けるクライアントと、お知らせを発信するサーバのスクリプトです。
どちらも多言語でライブラリが用意されていますが、クライアントは Javascript、サーバは PHP を使って説明します。だってそれが得意だから。

クライアント(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Pusher Test</title>
  <script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var pusher = new Pusher('key をいれてね');
    var channel = pusher.subscribe('test_channel');
    channel.bind('my_event', function(data) {
      /* navigator.vibrate(2000); */
      alert(data.message);
    });
  </script>
</head>
<body>
このページは開いたままで。
</body>
</html>

サーバ(push.php)

<?php
require('Pusher.php');

$key    = 'key をいれてね';
$secret = 'secret をいれてね';
$app_id = 'app_id をいれてね';

$pusher = new Pusher($key, $secret, $app_id);
$pusher->trigger('test_channel', 'my_event', array('message' => 'うぇーい!') );
?>

※ require している「Pusher.php」は GitHub からダウンロードして同階層に置いてください。

クライアントをいくつか開いた状態で、サーバスクリプトを実行(アクセスするだけでいいよ)すると一斉にプッシュ通知が入るのが確認できます。
Sandbox なので 20接続しかできません。ムチャしないでねー。ひとつよろしく。

クライアント:http://proto.sabi-an.com/0004_pusher/

サーバ:http://proto.sabi-an.com/0004_pusher/push.php

上手く動きました。
でも、これじゃダメ。
なぜならば、クライアントがスリープ状態になると通知が入らない。orz..
意味ないじゃん。
あ!Vibration API で振動させてみよ。わくわく。と index.html の 11行目に入れてみましたが、これも同じ。スリープ状態だと無効。そして、まだ Safari ではこれが実装されてない。Firefox では使えるよ。(←モバイルの話ね)

というわけで、今回の試みは挫折。。でも、いつか、きっと、きっとぉぉぉ。
いじょ。

え?できるよ。という方、どうか教えてくださりませ。ネイティブじゃなく、Web 希望。contact me