PHP的HTML5通知

Question

我注意到Facebook開始使用桌面的HTML5通知，我想我會開始涉足我的博客。 我的想法非常簡單：新的博客出來了，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
}

你可以看到上面的小提琴 。

授予用戶訪問權限，現在我應該可以隨時向他們發送通知。 真棒！ 然后我寫了一篇博客文章，其ID為XYZ。 我的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);

它應該命中所有訂閱我的通知的設備。 我在手機上試過這個，但我的桌面仍然沒有收到通知。 我仍然認為我錯過了一些東西，因為我的通知似乎只停留在一個設備上，並且只能在頁面加載或點擊時調用，而不是Facebook，即使頁面未在瀏覽器中打開，它也會向您發送通知。

Answer 1

您的問題是缺少連接Javascript和PHP的AJAX。 PHP腳本的工作方式是手動運行腳本，因此只有訪問該腳本的設備才會看到通知。 實際上沒有任何東西可以將該信息發送到您的其他設備。

為了更好地解釋問題，您的桌面可能已允許訪問通知，但它不會自動提取這些通知。 您提供的代碼需要使用AJAX來訪問腳本URL，而不是將其用作cron作業。

首先，您需要啟動對PHP腳本的重復請求，以查看是否有任何更新的通知。 如果有新通知，則需要使用返回的響應創建新的通知對象。

其次，您需要更改PHP腳本以輸出JSON字符串而不是通知腳本。

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輪詢，將其添加到您的網頁：

$(document).ready(checkNotifications);

這就是它！ 當您的桌面需要提取通知時，您只是錯過了該部分。 抬頭，雖然沒有經過測試，你可能需要調整一些東西。