web-dev-qa-db-ja.com

PHPを使用したHTML5通知

Facebookがデスクトップ用のHTML5通知を使用し始めたことに気づき、ブログを楽しむためにFacebookに手を出してみようと思いました。私のアイデアはかなり単純です。新しいブログが出てきて、Apache cronjobがX分ごとに実行され、ファイルを呼び出し、いくつかのPHPウィザードを実行して、通知を出します。

私はオンラインで調べて、 node.jsとangular を使用した例を見つけましたが、どちらも使い慣れていないため、PHPを使い続けます。

ここに私のプロセスがあります：ユーザーは私のブログに行き、ボタンをクリックして通知を許可します。簡潔にするために、以下のコードはユーザーが「通知」ボタンをクリックしたときにユーザーに通知を送信します。これは完全に機能し、理論的には将来の通知にサブスクライブする必要があります。

if ('Notification' in window) {

function notifyUser() {
    var title = 'example title';
    var options = {
        body: 'example body',
        icon: 'example icon'
    };

    if (Notification.permission === "granted") {
        var notification = new Notification(title, options);
    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
            if (permission === "granted") {
                var notification = new Notification(title, options);
            }
        });
    }

}

$('#notify').click(function() {
    notifyUser();
    return false;
});

} else {
    //not happening
}

上記の fiddle を見ることができます。

ユーザーへのアクセスが許可され、必要なときにいつでも通知を送信できるようになります。驚くばかり！次に、ブログエントリを作成すると、XYZというIDが表示されます。私のcronjobは、上記のnode.jsの例をテンプレートとして使用して、次のPHPスクリプトを呼び出します。

（この例では、電話から手動でスクリプトを呼び出し、デスクトップ画面を見ています。デスクトップが同じドメインに「サブスクライブ」されているため、次のように動作するはずです。

$num = $_GET['num'];

$db = mysql_connect(DB_Host, DB_USER, DB_PASS);
if($db) {
    mysql_select_db('mydb', $db);
    $select = "SELECT alert FROM blog WHERE id = ".$num." && alert = 0 LIMIT 1";
    $results = mysql_query($select) or die(mysql_error());
    $output = '';
    while($row = mysql_fetch_object($results)) { 

        $output .= "<script>

        var title = 'new blog!';
        var options = {
            body: 'come read my new blog!',
            icon: 'same icon as before or maybe a new one!'
        };

        var notification = new Notification(title, options);

        </script>";

      $update = "UPDATE blog SET alert = 1 WHERE id = ".$num." && alert = 0 LIMIT 1";
      mysql_query($update) or die(mysql_error());

    }

    echo $output;

}

次に、データベースとブログエントリXYZの「アラート」が「1」に設定されていることを確認しますが、デスクトップブラウザーに通知されません。私のブラウザーは、通知をプッシュしているのと同じURLにサブスクライブしているので、メッセージが表示されると思います。

何か間違っているのでしょうか（おそらくPHPはこれに適した言語ではありませんか？）、または仕様を誤解しています。誰かが私を正しい方向に向けてくれませんか？何か不足しています。

どうもありがとう。

更新1

コメントによると、これを含むスクリプトを呼び出すだけの場合：

 var title = 'new blog!';
 var options = {
    body: 'come read my new blog!',
    icon: 'same icon as before or maybe a new one!'
 };

  var notification = new Notification(title, options);

それは私の通知に登録されているすべてのデバイスをヒットする必要があります。携帯電話で試してみましたが、デスクトップに通知が届きませんでした。私の通知は1つのデバイスにスタックしているように見え、ページがブラウザーで開いていない場合でも通知を送信するFacebookとは対照的に、ページの読み込み時またはクリック時にのみ呼び出すことができるため、まだ何かが足りないと思います。

javascriptphphtmlpush-notificationhtml5-notifications
27
Kenton de Jong

あなたの問題は、JavaScriptとPHPを接続するAJAX=がないことです。PHPスクリプトが機能する方法は、手動でスクリプトを実行することです。スクリプトが通知を表示します。現在、実際にその情報を他のデバイスに送信するものはありません。

問題をよりよく説明するために、デスクトップは通知へのアクセスを許可している可能性がありますが、それらの通知は自動的には取得されません。指定したコードでは、cronジョブとして使用するのではなく、スクリプトURLをヒットするためにAJAX=を使用する必要があります。

まず、PHPスクリプトへの繰り返し要求を開始して、更新された通知があるかどうかを確認する必要があります。新しい通知がある場合は、次を使用して新しい通知オブジェクトを作成する必要があります。返された応答。

次に、通知スクリプトではなく、JSON文字列を出力するようにPHPスクリプトを変更する必要があります。

JSON出力の例：

_{
  {
    title: 'new blog!',
    options: {
      body: 'come read my new blog!',
      icon: 'same icon as before or maybe a new one!'
    }
  },
  {
    title: 'another blog item!',
    options: {
      body: 'come read my second blog!',
      icon: 'hooray for icons!'
    }
  }
}
_

notifyUsers()は、ハードコーディングする代わりに、titleとoptionを引数として取る必要があります。

_function notifyUser(title, options) { ... }
_

JQueryを使用して、PHP=応答を取得し、通知を作成します。

_function checkNotifications(){
  $.get( "/path/to/script.php", function( data ) {
    // data is the returned response, let's parse the JSON string
    json = JSON.parse(data);

    // check if any items were returned
    if(!$.isEmptyObject(json)){
      // send each item to the notify function
      for(var i in json){
        notifyUser(json[i].title, json[i].options);
      }
    }
  });

  setTimeout(checkNotifications, 60000); // call once per minute
}
_

ここで、AJAXポーリングをキックスタートする必要があるので、これをWebページに追加します。

_$(document).ready(checkNotifications);
_

それだけです！デスクトップが通知を取り込む必要があるとき、その部分が欠けていました。ただし、これはテストされておらず、何かを調整する必要があるかもしれません。

15
Siphon