Browser detection

Recall the hypothetical example from Chapter 4, On Navigation, Footers, Alerts, and Content, where MyPhoto only supports browsers above certain versions. To this end, we added a Bootstrap alert to our page, which notified visitors that their browser is not supported. Up until now, however, we had no way to actually identify which browser or browser version a MyPhoto visitor was using. Lacking any logic to hide and display the alert, the alert was visible regardless of whether or not the user's browser was actually supported by our website. Now the time has come for us to implement this missing logic.

Web browsers identify themselves by specifying their name and version information using a special field called User-Agent, which is part of the HTTP Request Header (see Figure 5.1). JavaScript allows users to access this field using the window.navigator property. This property contains the exact same string that is present in the User-Agent field of the HTTP Request Header...