PHPでのHTML5通知

Question

私はFacebookがデスクトップ用のHTML5通知を使用し始めたことに気付きました。私は自分のブログで楽しいものになると思っていました。私のアイデアはかなりシンプルです：新しいブログが出てきて、apache cronjobがX分ごとに実行され、ファイルが呼び出され、PHPの魔法が出て、通知が出ます。

私はオンラインで見て、node.js and 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の "alert"は "1"に設定されていますが、デスクトップブラウザは通知されませんでした。私のブラウザは通知を送り出すのと同じURLに登録されているので、私はメッセージを受け取ると思います。

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

ありがとうございます。

アップデート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とは対照的に、ページロードまたはクリックでのみ呼び出すことができるため、

Answer 1

あなたの問題はJavascriptとPHPを接続するためのAJAXの欠如である使用します。あなたのPHPスクリプトが動作する方法は、スクリプトを手動で実行することであり、そのスクリプトを打つデバイスだけが通知を見るでしょう。その情報を現在他の端末に実際に送信するものはありません。

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

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

第2に、通知スクリプトの代わりに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取る必要があります：jQueryのを使用して

function notifyUser(title, options) { ... } 

を、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ポーリングをキックスタートするので、あなたのウェブページにこれを追加する必要があります。

$(document).ready(checkNotifications); 

かなりそれだそれ！あなたのデスクトップが通知を取り込む必要があったとき、あなたはその部分を見逃していました。頭を上げて、これはテストされておらず、あなたは何かtweekする必要があるかもしれません。

Answer 2

は、以下の

<button onclick="notifyMe()">Notify me!</button> 

function notifyMe() { 
    // Let's check if the browser supports notifications 
    if (!("Notification" in window)) { 
    alert("This browser does not support desktop notification"); 
    } 

    // Let's check whether notification permissions have already been granted 
    else if (Notification.permission === "granted") { 
    // If it's okay let's create a notification 
    var notification = new Notification("Hi there!"); 
    } 

    // Otherwise, we need to ask the user for permission 
    else if (Notification.permission !== 'denied') { 
    Notification.requestPermission(function (permission) { 
     // If the user accepts, let's create a notification 
     if (permission === "granted") { 
     var notification = new Notification("Hi there!"); 
     } 
    }); 
    } 

    // At last, if the user has denied notifications, and you 
    // want to be respectful there is no need to bother them any more. 
}