LanguagesToast Notifications in Chrome Packaged Apps

Toast Notifications in Chrome Packaged Apps

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

One of the core benefits of implementing an application as  Chrome installed is access to the Chrome extensions API with easy permissions from your manifest. This enables you to use APIs that require special permissions such as notifications.

Notifications allow your application to pop up a message in the bottom of the users screen, sometimes called a “toast”. This type of notification is called a toast because it pops up from the bottom of the user’s screen just like a piece of toast out of the toaster.

Chrome packaged apps can run in the background even when the user doesn’t have the Chrome browser launched. This enables your app to monitor conditions like Twitter feeds or other data and pop up a toast notification when a new message comes in.

Where can it be used?

These notifications are most notably used by Gmail and instant messaging applications to notify the user that there is a new message waiting but you can use them for any reason. Imagine you have a Chrome extension that your users install to tell them when an item goes on sale or a batch process that kicks off and might not complete for a few minutes. In either of these scenarios a toast fits the bill perfectly.

Chrome installed applications can run in the background even when the Chrome web browser isn’t running. This opens up a number of additional applications where you might use a Chrome notification to prompt the user to launch your application in response to an event.

Getting Ready – Manifest Changes

Chrome installed application manifests set the security constraints for the extension. In order to enable notifications you will need to add “notifications” to the permissions list to declare your application needs access to pop open notifications and if you want to use an icon, you will need to add it to the list of web_accessible_resources. It is worth noting that the user can disable notifications from your application after installing by clicking the wrench icon on any of the notifications you open, so you would be wise to include some kind of fallback functionality if the user has disabled your notifications.

 {
  "name": "FastGif",
  "version": "1.13",
  "manifest_version": 2,
  "app": {
  "launch": { "local_path": "index.html" }
  },
  "icons": { "128": "icon_128.png" },
  "permissions":["unlimitedStorage","storage","notifications",
  "https://apis.google.com/*"],
  "web_accessible_resources": [
  "icon_128.png"
  ]

Opening a Notification

To open a notification, call webkitNotifications.createNotification. This function accepts three parameters; Icon, title and message body. It returns a notification object that you can then attach event listeners to and show or hide the notification. To then show the notification, call “show()”.

notification = webkitNotifications.createNotification(
 'icon_128.png',
 'Animation complete',
 'Fastgif is done animating!');
 notification.show();
 setTimeout(function () { notification.cancel() }, 5000);

To close a notification, call “cancel()” and it will close the notification box. In the example above a setTimeout is used to close the notification automatically after five seconds have elapsed.

Events

The notification object supports multiple lifecycle events that are very useful in insuring the notification is opened and reacting appropriately depending on how the user interacts with your notification.

  • Ondisplay – This event handler is called when the notification is displayed.
  • Onclose – This event handler is called when the notification is closed either by the user or programmatically.
  • Onerror – This event handler is called if the notification can’t be displayed for any reason including if the user has disabled notifications.
  • Onclick – This event handler is called when the user clicks the notification. This is very useful if you want the user to be able to click your notification and be taken right to the part of your application that corresponds to the message.

The most important event to implement is the click event. At minimum you should make your application get focus when the user clicks the notification. A better implementation would be to take the user to the specific place in your application that most closely relates to the notification clicked.

To attach to any of these events, use a standard addEventListenter call to attach to the event you want to respond to.

notification.addEventListener("click", function () { 
 //Notification was clicked, do something useful!
 });

Detecting and Requesting Permission

Although your chrome installed application manifest.json includes the request for permission to open notifications, the user can subsequently disable them at any time. If they do this your application needs to know it and can request permission be granted again. To detect if you have permissions, call the checkPermissions() API. 0 means the user has granted permission, 1 means the user hasn’t allowed or denied it yet and 2 means that the user was asked if they wanted to allow it and denied it.

To request permission, call webkitNotifications.requestPermission(). This function takes a callback as a parameter because it is an asynchronous request.

if (webkitNotifications.checkPermission() == 0) {
 notification = webkitNotifications.createNotification(
 'icon_128.png',
 'Animation complete',
 'Fastgif is done animating!');
 notification.show();
 } else if (webkitNotifications.checkPermission() == 1) { webkitNotifications.requestPermission(function() {
 If(webkitNotifications.checkPermission() == 0) { 
 //Permission was granted
 }
 }); }
 else { 
 //Permission was denied, do a fallback if necessary
 }

Conclusion

Notifications in chrome are a great way to let your user know what’s happening in real time as it happens. Notifications have the ability to interrupt what the user is doing, so it is best to use restraint and only use them when they add value to the user experience.

About the Author:

David Talbot has over 14 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories