Club Record Certificate: Part 5 ... Edge V Chrome


The app is a Blazor app and the certificate layout is therefore specified by razor page. A print dialog is used to save the certificate page, hosted in a web browser, as a PDF. There are some slight differences in the print dialogs between 2 main web browsers used in Windows, Microsoft Edge and Google Chrome. The app has been updated to detect one or the other and provide slightly different instructions depending upon the browser.

Recap (again)

As discussed in previous posts we have developed a Club Blazor Server app that includes the life cycle management of an club’s athletic records. Records are claimed by athletes. An admin manages verifying and accepting claims. The latest extension is the ability to list all records set by an athlete in any one season as a certificate with similar graphics and saved as a PDF which can then be downloaded by the athlete.

Detecting the Web Browser

As discussed in a StackOverFlow post, a call is required in Javascript to navigator.userAgent.

At the top level in the razor page the following code detects the browser:

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

This requires access to a Javascript function so the page requires at the top:

@inject IJSRuntime js

The function is then added to the _hosts.cshtml file as a script:

    <script>
        function identifyBrowser() {
            var sBrowser, sUsrAg = navigator.userAgent;
            if (sUsrAg.indexOf("Edg") > -1) {               
            //"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.50"
                sBrowser = "Microsoft Edge";
            } else if (sUsrAg.indexOf("Chrome") > -1) {            
             // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36"
                sBrowser = "Google Chrome";
            } else {
                sBrowser = "unknown";
            }
            return sBrowser;
        }
    </script>

The browser sample navigator.userAgent for recent versions of Edge and Chrome are embedded in the code above.

Note that in the StackOverflow post, the check is for Edge not Edg as is required for the recent versions of Edge (at least). A check for Edg will though capture both Edg and Edge.

The different strings, to be displayed in a dialog are:

string msgEdge = "In the print Dialog, set Printer to Save As PDF\nClick on More Settings.\nSet Margins to none.\nTick box Background Graphics.\nSet No Headers and footers\nPs: There is a filename on the Clipboard that can be pasted when saving.";

string msgChrome = "In the print Dialog, set Destination to Save As PDF\nSet Margins to none.\nTick box Background Graphics\nPs: There is a filename on the Clipboard that can be pasted when saving.";

Which are then conditionally used and displayed in an alert on the razor page, followed by the print dialog being invoked:

    async Task Print()
    {
        await IdentifyBrowser();
        string msg = "";
        if (browser == "Microsoft Edge")
            msg = msgMS;
        else
            msg = msgGGL;

        await js.InvokeVoidAsync("alert", msg);
        await js.InvokeVoidAsync("print");
    }

Conditional UI Code

Instructions are also displayed in more detail on an earlier page, conditional upon the browser type:

@if(browser=="")
{
     <h2>Browser not recognised. Please use Microsoft Edge or Google Chrome</h2>      
}
else if (browser=="Microsoft Edge")
{
    ...
}
else if (browser=="Google Chrome")
{
    ...
}
else 
{
    <h2>Browser not recognised. Please use Microsoft Edge or Google Chrome</h2> 
+
 TopicSubtopic
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > Jekyll
<  Prev:   Entity Framework