Advice and answers from the Realtime Team

If you followed our Web Push example you have probably noticed that we add a hard-coded click url when we show the notification. 

This was only for the sake of simplicity, since we wanted to keep the notifications demo as simple as possible.

This is the code of our showNotification function in the service worker with the hard-coded link to "/index.html".

function showNotification(message) { 
  // The notification title
  const notificationTitle = 'Web Push Notification';

  // The notification properties
  const notificationOptions = {
    body: message,
    icon: 'img/realtime-logo.jpg',
    data: {
      click_url: '/index.html'          
    },
    tag: 'demo'
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
}

To make the click url change according to the push notification you are sending, you should use a JSON object as your notification message and include the url as a property of your message. 

Something like this:

{
  "text": "The notification alert text",
  "url": "/some-page-in-your-website.html"

NOTE: The url must be a relative url not an absolute one.

Then, in your service worker you need to change the showNotification function to parse the pushed notification message and extract the alert text and url as follows:

function showNotification(message) { 
  // The notification title
  const notificationTitle = 'Web Push Notification';

  // assuming message is a JSON object
  // containing a text and url properties

  var parsedMsg = JSON.parse(message);
  var notificationText = parsedMsg.text;
  var notificationUrl = parsedMsg.url;

  // The notification properties
  const notificationOptions = {
    body: notificationText,
    icon: 'img/realtime-logo.jpg',
    data: {
      click_url: notificationUrl          
    },
    tag: 'demo'
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
}

What about publishing the push?

You can use the send method of any Realtime SDK or if you prefer, you can use the Realtime Push REST API to send the push notification from your PHP server.

The following PHP snippet shows how to do it (note that your message is now a JSON string, containing an object with 2 properties, that the service worker above will parse to get the text and url of your notification):

<?php
 
$curl = curl_init();
 
curl_setopt_array($curl, array(
  CURLOPT_URL => "https://ortc-mobilepush.realtime.co/mp/publish",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_HTTPHEADER => array(
    "content-type: application/json"
  ),
  CURLOPT_POSTFIELDS => '{
      "applicationKey": "YOUR_REALTIME_APPKEY",
      "privateKey": "YOUR_REALTIME_PRIVATEKEY",
      "channel" : "channel-3cb5ebfe-25d7-4139-9304-1fba0a73983a",
      "message" : "{\"text\": \"The notification alert text\", \"url\": \"/some-page-in-your-website.html\"}"
  }'
));
 
$response = curl_exec($curl);
$err = curl_error($curl);
 
curl_close($curl);
 
if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
Did this answer your question?