How to schedule a toast notification (HTML)

Note  Not using JavaScript? See How to schedule a toast notification (XAML).

 

This topic shows how to schedule a toast notification to appear at a specific time.

What you need to know

Technologies

• Windows Runtime

Prerequisites

• A working knowledge of toast notification terms and concepts. For more information, see Toast overview.
• The ability to create a basic Windows Store app with JavaScript using Windows Runtime APIs. For more information, see Create your first Windows Store app using JavaScript.
• The Toast Capable option must be set to "Yes" in your app's manifest to send or receive toast notifications. For more information, see How to opt in for toast notifications.

Instructions

Step 1: Specify a template

Before you can specify the delivery time, you must create the notification.

var template = Windows.UI.Notifications.ToastTemplateType.toastText02;                        
var toastXml = Windows.UI.Notifications.ToastNotificationManager.getTemplateContent(template);

Step 2: Provide toast notification content

We won't cover this here because it's the same for a scheduled toast as for a non-scheduled toast. For more information, see Quickstart: Sending a toast notification.

Step 3: Specify the time that the toast notification should be delivered

This example specifies that the notification should appear in 3 seconds. This example uses the JavaScript Date object to retrieve the current time.

var currentTime = new Date();
var startTime = new Date(currentTime.getTime() + 3 * 1000);

Step 4: Create the scheduled toast notification object

Send the toast notification content and the scheduled delivery time to the constructor.

var scheduledToast = new Windows.UI.Notifications.ScheduledToastNotification(toastXml, startTime);

Step 5: Optional: Give the scheduled toast notification an ID

This ID must be 16 characters or less. It can be used later if you want to cancel the notification.

scheduledToast.id = "Future_Toast";

Step 6: Add your toast notification to the schedule.

Create the ToastNotifier object, which in turn is used to add your notification to the schedule.

var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.createToastNotifier();
toastNotifier.addToSchedule(scheduledToast);

Adding a toast notification that repeats at a specific interval

The following code displays a single toast notification five times, each one minute apart. The code to fill in the template is omitted for clarity.

var template = Windows.UI.Notifications.ToastTemplateType.toastText02;
var toastXml = Windows.UI.Notifications.ToastNotificationManager.getTemplateContent(template);

// TO DO: Fill in the template with your notification content here. 
 
var currentTime = new Date();
var startTime = new Date(currentTime.getTime() + 1000);
 
var recurringToast = new Windows.UI.Notifications.ScheduledToastNotification(toastXml, startTime, 60 * 1000, 5);
recurringToast.id = "Recurring_Toast";

var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.createToastNotifier();
toastNotifier.addToSchedule(recurringToast);