javascripthtmlnotificationstitlebar

How to dynamically update a webpage's title/name to indicate a message notification has been received


Some social media websites/websites with private message capabilities today show the number of notifications in the window or tab's title when a new notification is found. For example, if you have a notification on Facebook you get "(1) Facebook" shown as the page title.

How can I do that?


Solution

  • This uses JavaScript. First, the title of the document is stored somewhere so when the title is written to multiple times, it doesn't prepend multiple (1) s to the title (i.e., you wouldn't want (3) (1) Facebook). Then it sets document.title to that original title while putting some bit of information on the front, something like this:

    original_title = document.title
    
    // time passes
    
    document.title = "(" + update_count + ") " + original_title;