2015-12-30 8 views
25

Ich bemerkte, dass Facebook begann, die HTML5-Benachrichtigung für den Desktop zu verwenden, und ich dachte, ich würde anfangen, es zum Spaß für meinen Blog zu tun. Meine Idee ist ziemlich einfach: neuer Blog kommt heraus, apache cronjob läuft alle X Minuten und ruft eine Datei auf, tut etwas PHP-Zauberei und geht die Benachrichtigung aus.HTML5-Benachrichtigung mit PHP

Ich habe online gesucht und Beispiele mit node.js and angular gefunden, aber ich bin nicht zufrieden mit beiden, damit ich lieber bei PHP bleiben würde.

Hier ist mein Prozess: Der Benutzer geht zu meinem Blog und wird auf eine Schaltfläche klicken, um Benachrichtigungen zuzulassen. Aus Gründen der Kürze sendet der folgende Code den Benutzern eine Benachrichtigung, wenn sie auf die Schaltfläche "Benachrichtigen" klicken. Dies funktioniert perfekt und sollte theoretisch für zukünftige Benachrichtigungen gelten.

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 
} 

Sie können die fiddle der oben genannten sehen.

Der Zugriff auf den Benutzer ist gewährt und jetzt sollte ich in der Lage sein, ihnen Benachrichtigungen zu senden, wann immer ich will. Genial! Ich schreibe dann einen Blog-Eintrag und es hat die ID von XYZ. Mein Cronjob geht und ruft das folgende PHP-Skript auf, wobei das obige node.js-Beispiel als Vorlage verwendet wird.

(In diesem Beispiel rufe ich nur das Skript manuell von meinem Handy und meinen Desktop-Bildschirm. Seit meinem Desktop „abonniert“ auf die gleiche Domäne ist, denke ich, die folgend würde/sollte funktionieren.)

$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; 

} 

Ich überprüfe dann die Datenbank und den Blog-Eintrag XYZ "alert" ist jetzt auf "1", aber mein Desktop-Browser wurde nie benachrichtigt. Da mein Browser dieselbe URL abonniert hat, die die Benachrichtigung ausschaltet, würde ich mir vorstellen, dass ich eine Nachricht erhalten würde.

Entweder mache ich etwas falsch (vielleicht PHP ist nicht die richtige Sprache dafür?), Oder ich missverstehe die Spezifikation. Könnte mir jemand helfen, in die richtige Richtung zu zeigen? Ich denke, ich vermisse etwas.

Vielen Dank.

aktualisieren 1

den Kommentaren nach, wenn ich nenne nur ein Skript mit diesem darin:

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); 

Es sollte alle Geräte betroffen, die auf meine Mitteilungen abonniert haben. Ich habe das auf meinem Handy versucht, aber auf meinem Desktop wurde immer noch keine Benachrichtigung angezeigt. Ich denke immer noch, dass ich etwas verpasse, da meine Benachrichtigungen auf einem Gerät hängen bleiben und nur beim Laden der Seite oder beim Klicken aufgerufen werden können, im Gegensatz zu Facebook, das Benachrichtigungen sendet, auch wenn die Seite in Ihrem Browser nicht geöffnet ist.

+0

Sie müssen die URL abrufen, die wiederholt von JS bereitgestellt wird, um Änderungen abzufangen, nachdem sie geschehen sind. Sie können eine Verbindung offen und lang-Poll oder Komet lassen, aber das ist Overkill für Low-Frequency-Updates wie neue Blog-Posts. – dandavis

+0

Ich verstehe nicht. Wenn ich die URL abrufe und die Benachrichtigung sende, würde sie alle abonnierten Benutzer treffen? Es scheint nur das fragliche Gerät und keine zusätzlichen zu senden. –

+0

es wird sie treffen, das nächste Mal, wenn sie die Seite neu laden oder den PHP Ajax. Es gibt kein integriertes "Abonnement" mit PHP, aber es gibt ein paar Möglichkeiten zum "Push". Eine einfache RSS-Datei ist der Lo-Fi-Weg, und wenn sie Benutzer abonniert haben, erhalten sie normalerweise eine Benachrichtigung. – dandavis

Antwort

15

Ihr Problem ist das Fehlen von AJAX ist Javascript und PHP zu verbinden. Die Art, wie Ihr PHP-Skript funktioniert, besteht darin, das Skript manuell auszuführen, sodass nur das Gerät, das dieses Skript trifft, die Benachrichtigung erhält. Es gibt nichts, was diese Informationen gerade an Ihr anderes Gerät sendet.

Um das Problem besser zu erklären, hat Ihr Desktop möglicherweise Zugriff auf die Benachrichtigungen zugelassen, aber diese Benachrichtigungen werden nicht automatisch abgerufen. Der von Ihnen bereitgestellte Code muss AJAX verwenden, um die Skript-URL zu treffen, anstatt sie als Cron-Job zu verwenden.

Als Erstes müssen Sie eine wiederholende Anfrage an das PHP-Skript starten, um zu sehen, ob es eine aktualisierte Benachrichtigung gibt. Wenn eine neue Benachrichtigung vorhanden ist, müssen Sie mithilfe der zurückgegebenen Antwort ein neues Benachrichtigungsobjekt erstellen.

Zweitens müssen Sie das PHP-Skript ändern, um statt des Benachrichtigungsskripts eine JSON-Zeichenfolge auszugeben.

JSON Ausgabe Beispiel:

{ 
    { 
    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!' 
    } 
    } 
} 

Ihre notifyUsers() sollte nehmen title und option als Argumente anstatt sie hartzucodieren:

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

jQuery verwenden, erhalten Sie die PHP-Antwort und erstellen Sie die Meldung:

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 
} 

Nun, Sie müssen nur die AJAX Polling kurbeln, so fügen Sie diese zu Ihrer Webseite:

$(document).ready(checkNotifications); 

so ziemlich fertig! Sie haben nur den Teil vermisst, als Ihr Desktop die Benachrichtigungen abrufen musste. Kopf hoch, das ist nicht getestet und Sie müssen möglicherweise etwas zwicken.

+0

Es gibt eine JS Push API zur Einrichtung eines Browser Service Worker, die jedoch nur in Chrome 42.0 (einschließlich Handy) und Firefox 44.0 (außer Handy) unterstützt wird und eine browserübergreifende Unterstützung noch nicht möglich ist. Dies würde die Notwendigkeit zum Wiederholen von AJAX-Anfragen beseitigen, indem es dem Browser erlaubt wird, die Arbeit zu bearbeiten. Check out: http://w3c.github.io/push-api/ – Siphon

1

verwenden Sie die folgende

<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. 
}