Identify Browser Details Inside Blazor Application

Question

Okay, I get Microsoft took away all the cool features inside .Net Framework which allow us to determine Browser details. But how am I supposed to get this info inside the @Code block of a Blazor component? I've tried both Syjus.BrowserDetector and Wangkanai.Detection and have the same results. I can gather Browser detail in the html section of the Component, but NOT within the Code block. This is because all the examples use dependency injection into an MVC style component and I'm not seeing how to do this with the Blazor Code block. Any and all help appreciated, and I don't particularly care HOW I ID the Browser inside the Code block, Javascript, function, whatever, as long as it works.

Answer 1

Okay, here's a solution using Javascript to make a call to identify the browser. Note: These steps apply to javascript setup up in general and will work on any js functions. Create a JS folder under wwwroot folder on the project, then add a .js file. In _hosts.cshtml, add a file reference to your .js file. Ex: Add your functions to the .js file. In this case, we're looking at a browser identifying function. Ex:

function identifyBrowser() {
    var sBrowser, sUsrAg = navigator.userAgent;

    if (sUsrAg.indexOf("Firefox") > -1) {   // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
        sBrowser = "Mozilla Firefox";   
    } else if (sUsrAg.indexOf("SamsungBrowser") > -1) {     // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
        sBrowser = "Samsung Internet";
    } else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {         // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
        sBrowser = "Opera";
    } else if (sUsrAg.indexOf("Trident") > -1) {            // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
        sBrowser = "Microsoft Internet Explorer";
    } else if (sUsrAg.indexOf("Edge") > -1) {               // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
        sBrowser = "Microsoft Edge";
    } else if (sUsrAg.indexOf("Chrome") > -1) {             // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
        sBrowser = "Google Chrome or Chromium";
    } else if (sUsrAg.indexOf("Safari") > -1) {             // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
        sBrowser = "Apple Safari";
    } else {
        sBrowser = "unknown";
    }

    return sBrowser;
}

Inside your .razor file, create a way to call the function, say a control. Ex: Adding @onclick="IdentifyBrowser".

Inside the @code segment, add your method.

async Task IdentifyBrowser()
{
    string browser = "";
    browser = await JsRuntime.InvokeAsync<string>(identifier: "identifyBrowser");
        ShowAlert(browser);
}

Notice this call is passing a value (string) and the function (inside .js) is your 'identfier', in this case 'identifyBrowser'.

Note the 'ShowAlert' inside the example? This is a call that doesn't pass a value. Ex:

async Task ShowAlert(string message)
{
    await JsRuntime.InvokeVoidAsync(identifier: "createAlert", message);
}

Note that this example was built on Server run Blazor. As such, when you run this on IE 11, it STILL won't work since it's Web Assembly. I'll look next at the promise of polyfill on actually getting IE 11 to run.