title: Firebase Notifications to iOS topic via HTTP POST request
body: <p>So we are using Firebase to send notifications to our users on our iOS app. It works great in the console, but now we are looking to allow a few more people to send notifications, and we don't really want them signing into Firebase to do that. One solution we came up with is to put a form on our website and let them sign in and send notifications from there, but we can't get it to work. The code below is a stripped down version of what we have right now. It uses the cloud messaging API to send an HTTP POST request to a specific topic and Firebase responds with a <code>message_id</code>, however no message is delivered on any of the devices.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;input id="title"&gt;&lt;/input&gt;
      &lt;input id="message"&gt;&lt;/input&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/body&gt;
  &lt;script   src="https://code.jquery.com/jquery-1.12.2.min.js"   integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="   crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script&gt;
          $("button").click(function () {
              var title = $("#title").val();
              var message = $("#message").val();
  
              var param = {
                "to" : "/topics/myTopic",
                "content_available" : true,
                "notification" : {
                  "title" : title,
                  "body" : message
                 }
              };
  
             $.ajax({
               url: 'https://fcm.googleapis.com/fcm/send',
               type: "POST",
              headers: { 'Authorization': 'key=&lt;myKey&gt;', 'Content-Type': 'application/json' },
               data: JSON.stringify(param),
               success: function () {
                 alert("success");
               },
               error: function(error) {
                 alert("error: "+error);
               }
             });
           });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <h2><strong>Solution:</strong></h2>
  
  <p>After we played around with it a bit more, we found that <code>content_available</code> should really be false in order to actually display a notification in our app. We also made sure to implement jQuery variables correctly. You can see our improved script for handling everything below.</p>
  
  <pre><code>$("button").click(function () {
     // Grab the input values
     $title = $("#title").val();
     $message = $("#message").val();
  
     // Verify that the message is not left empty
     if ( $message.length &lt; 2 ){
         // Message is empty
         return;
     }
  
     // Create the JSON object
     var paramaters = {
       "to" : "/topics/test",
       "content_available" : false,
       "notification" : {
         "title" : $title,
         "body" : $message
        }
     };
  
     // Send request
     $.ajax({
       url: 'https://fcm.googleapis.com/fcm/send',
       type: "POST",
       headers: { 'Authorization': 'key=$key', 'Content-Type': 'application/json' },
       data: JSON.stringify(paramaters),
       success: function (e) {
         // Process succeeded
         console.log(e);
       },
       error: function(error) {
         // Display error message
       }
     });
  });
  </code></pre>
  
  <p>We also made sure that our server keys were not included directly in our code as Frank mentioned in his comment. Everything now works and we are successfully receiving notifications.</p>