HTML5 通知 PHP

Question

我注意到 Facebook 开始在桌面上使用 HTML5 通知，我想我会开始涉足它来为我的博客带来乐趣。我的想法很简单：新博客发布，apache cronjob 每 X 分钟运行一次并调用一个文件，执行一些 PHP 魔法然后发出通知。

我在网上查看并找到了使用 node.js and angular 的示例，但我不太习惯使用其中任何一个，所以我宁愿坚持使用 PHP。

这是我的过程：用户进入我的博客并单击一个按钮以允许通知。为简洁起见，以下代码在用户单击 "notify" 按钮时向用户发送通知。这非常有效，理论上应该让他们订阅任何未来的通知。

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。

已授予用户访问权限，现在我应该可以随时向他们发送通知。惊人的！然后我写了一篇博客文章，它的 ID 是 XYZ。我的 cronjob 调用以下 PHP 脚本，使用上面的 node.js 示例作为模板。

（在这个例子中，我只是从我的 phone 手动调用脚本并观察我的桌面屏幕。因为我的桌面是 "subscribed" 到同一个域，我认为以下 would/should 工作。）

$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，我想我会收到一条消息。

要么我做错了什么（也许 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);

它应该会影响所有订阅了我的通知的设备。我在我的 phone 上试过了，但我的桌面仍然没有收到通知。我仍然认为我遗漏了一些东西，因为我的通知似乎卡在一台设备上，只能在页面加载或点击时调用，而不是 Facebook，即使页面未在浏览器中打开，Facebook 也会向您发送通知。

Answer 1

您的问题是缺少 AJAX 来连接 Javascript 和 PHP。 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);

差不多就这些了！当您的桌面需要接收通知时，您只是错过了这一部分。不过请注意，这尚未经过测试，您可能需要调整一下。

HTML5 通知 PHP

HTML5 Notification With PHP

html

javascript

php

push-notification

html5-notifications