How to send a web notification at a specific time

You can use the Push API to send timely notifications from your website (the notifications are delivered even when the user is not on your website). If you use Pushpad, a service for web push notifications, it is very simple to set the time when the notification must be delivered.

A simple example

When you send a notification from the Pushpad dashboard, you can set the date / time when the notification should be delivered. You can also set the date / time when you send a notification programmatically using the REST API or the libraries (available in many languages). Here's an example using the Ruby library:

# build a scheduled notification
notification = Pushpad::Notification.new({
  body: "This is an example of scheduled notification.",
  send_at: Time.new(2020, 12, 31, 12, 0)
});

# deliver to everyone
notification.broadcast

# or deliver to specific users
notification.deliver_to user_id

A full example: "remind me" button

The following example shows how to create a button to create a reminder.

On the client side, you can use the Javascript SDK to subscribe the user to the notifications and send a request to your server to create the reminder / notification:

// when the user clicks the button
document.querySelector('button#create_reminder').addEventListener('click', function() {
  // make sure that the user is subcribed to push notifications
  pushpad('subscribe', function (isSubscribed) {
    if(isSubscribed) {
      // let's schedule the notification from the backend
      fetch('/create_reminder', {
        method: 'POST',
        body: 'event_id=' + $('button#create_reminder').data('event')
      });
    } else {
      alert('You need to allow push notifications from this website in order to receive the reminder.');
    }
  }, {
    // an ID for the current user (e.g. the user primary key in your database)
    // learn more: https://pushpad.xyz/docs/identifying_users
    uid: userID,
    uidSignature: '...'
  });
});

On your server, you can create the notification that will be delivered in the future by Pushpad (and you can also save the reminder in your database if you want). You can use the Pushpad libraries, which are available for most languages. For example, if you use Ruby:

def create_reminder
  @event = Event.find(params[:event_id])

  # create a scheduled notification that is delivered 1 hour before the event starts
  notification = Pushpad::Notification.new({
    body: "Reminder: #{@event.name}",
    send_at: (@event.happens_at - 1.hour)
  });
  notification.deliver_to current_user.id

  # optional: you may also want to save the tuple (user_id, event_id, notification_id) in your database 
  # in case you need to cancel the notification later or you need to find the reminders for a user
end

An alternative approach would be to save the reminder only in your database, without scheduling the notifications. Then run a cron job every minute which queries the database and sends the notifications at the correct time. Another alternative would be to use a background worker like Sidekiq which supports scheduled jobs. See also this post for more information.