Push Notifications

Sometimes it is useful to alert a user in real-time on their smartphone. In this case, we can use push messages with IFTTT and web hooks. This tutorial explains how.

Video

Watch this video where I walk you through the process of setting up IFTTT and integrate it with our JavaScript code:

Enable webhooks service

Type "webhook" into the search field in the upper-left corner and hit enter. In the results, click on the services tab and click on the box with the label "Webhooks".

In the opening page, you should a "settings" symbol in the upper-right corner. Click this symbol to activate or deactivate your webhook-URL. Copy the URL into your browser to open the documentation page.

Create a new applet

Navigate to the page where you can create a new applet within IFTTT. You should see the following image:

IFTTT applets are based on a trigger and an action.

Trigger the webhook from our app

You can copy the following function to call your IFTTT webhook from JavaScript. The function uses the fetch() function to make an HTTP POST request to the URL specified in the IFTTT documentation. The function expects you to pass your personal key and the event name that should be sent. Additionally, you can pass 3 possible parameter values to provide more information.

function sendIFTTTPushNotification(
  eventName,
  key,
  value1 = null,
  value2 = null,
  value3 = null
) {
  var url =
    "https://maker.ifttt.com/trigger/" +
    eventName +
    "/with/key/" +
    key +
    "?value1=" +
    value1 +
    "&value2=" +
    value2 +
    "&value3=" +
    value3;

  fetch(url, {
    method: "post",
    mode: "no-cors",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    }
  }).then(response => {
    console.log(
      "IFTTT webhook called successfully. See if there were errors before."
    );
    return true;
  });
}

Links

IFTTTIFTTT