If you have worked on any kind of social network before you have probably faced the need to notify your users about new unread messages or alerts. Given the importance of that feature, I’ll explain in this article how you can easily implement a browser title notifier and you’ll be able to use it in your next project.
A common way to tell users they have new notifications is by changing the website title with the number of unread messages they have. And this is what TitleNotifier does easily for you.
What is TitleNotifier.js?
TitleNotifier is a lightweight, dependency-free library to handle browser title notification. It weights around 2kb and can be included in any WebApp because it has no dependency with other libraries. The idea to build this library was to prevent anybody that needs to implement this feature to not worry about the implementation logic and save their time to build other things.
Getting Started
It couldn’t be easier to get started with TitleNotifier, in 3 basic steps you can have it up and running in your website. Follow the steps below:
1. Go to the project website, download it and unpack it.
2. Include the title_notifier.js file in your page, before the </body> tag:
3. That’s it, now you just call the functions you need:
To add notifications:
This will add +1 to the total notifications titlenotifier.add();</code></strong>
Optionally you can pass in the number you want to add to the existing notifications.
This will add 3 to the current number of notifications you have. titlenotifier.add(3);
To set a specific number of notifications:
This will set the number of notifications to 13. titlenotifier.set(13);
To subtract from the total notifications:
This will subtract -1 to the total notifications. titlenotifier.sub();
Optionally you can pass in the number you want to subtract from the total:
titlenotifier.sub(2);
Benefits and Conclusion
TitleNotifier has a very simple and intuitive API as you could see above and provides a nice user experience. Do you have questions or comments about this library? Please leave a comment below.
If you feel like contributing to this project to make it better or even suggest changes or bug fixes, go to the project page and log an issue, fork the project or simply download it and use the way to prefer.
