Skip to content

Latest commit

 

History

History
217 lines (169 loc) · 17.6 KB

README.md

File metadata and controls

217 lines (169 loc) · 17.6 KB
Raw

Browser Detect for Blazor

This is a browser detect component for Blazor WebAssembly and Blazor Server with .NET6.

If you need help, info or some device is not detected correctly, leave your message in the Forum.

Read the full post on PureSourceCode.com:

Now, you can try your component by yourself from the website. Try it now!

browsers

Installation

Fist, you have to add the component from NuGet. Then, open your _Imports.razor and add the following:

@using PSC.Blazor.Components.BrowserDetect

Detected capabilities or properties

Property Value
BrowserName Name of the browser
BrowserMajor Major version of the browser
BrowserVersion Version of the browser
CPUArchitect If it is possible, the component detect the CPU architecture of the machine
DeviceModel Device model (if it is possible)
DeviceType Device type (if it is possible)
DeviceVendor Device Vendor (if it is possible)
EngineName Browser engine name
EngineVersion Browser engine version
GPURenderer Type of the GPU renderer
GPUVendor Vendor of the GPU
IsDesktop Detect if the device is a desktop computer
IsMobile Detect if the device is a mobile
IsTablet Detect if the device is a tablet
IsAndroid Detect if the device is an Android device
IsIPhone Detect if the device is an iPhone or iPod
IsIPad Detect if the device is an iPad (any version)
IsIPadPro Detect if the device is an iPad Pro
OSName Detect the operating system
OSVersion Version of the operating system
ScreenResolution Detect the screen resolution
TimeZone Read the time zone
UserAgent The full user agent

Detecting the operating system and the architecture

To detect the browser and all the other details from the user, it is not always accurate. For example, if the client has Windows 11 there is no way to return the correct version of the operating system. If you have a MacOS, again JavaScript can't detect from the navigator string any info. The JavaScript can detect the OSName, Windows or MacOS but not the exact version.

To detect in a correct way the correct version of the operating system and the architecture of the CPU, the component has to run few tests that take time.

For this reason I added 2 events in the component:

  • OSArchitectureUpdate
  • OSVersionUpdate

So, if you want to receive the notification when of the correct version of the operating system and the CPU architecture, the component is like this code:

<BrowserDetect @bind-BrowserInfo="@Info" 
               OSArchitectureUpdate="WindowsArchitectureString"
               OSVersionUpdate="WindowsUpdateString" />

then the functions look like

public BrowserInfo? Info { get; set; }
public string? OSInfo { get; set; } = "";
public string? OSCPUInfoString { get; set; }

private void OSArchitectureString(string cpu)
{
    OSCPUInfoString = cpu;
}

private void OSUpdateString(string version)
{
    OSInfo = version;
}

Both events return a simple string with the values. For example:

  • if the operating system is Windows 11, the OSUpdateString receives the string 11;
  • if the operating system is Windows 10 1809, the OSUpdateString receives the string 10 (1809)
  • if the CPU is 32 bit, the OSArchitectureString, receives the string x86

Mac Architecture

  • ARM
  • ARM 64

Windows Architecture Values

  • x86_64
  • x86
  • ARM64
  • ARM32

Windows Version

Version platformVersion
Win7/8/8.1 7/8/8.1
Win10 1507 10 (1507)
Win10 1511 10 (1511)
Win10 1607 10 (1607)
Win10 1703 10 (1703)
Win10 1709 10 (1709)
Win10 1803 10 (1803)
Win10 1809 10 (1809)
Win10 1903 10 (1903 or 10 1909)
Win10 1909 10 (1903 or 10 1909)
Win10 2004 10 (2004 or 20H2 or 21H1 or 21H2)
Win10 20H2 10 (2004 or 20H2 or 21H1 or 21H2)
Win10 21H1 10 (2004 or 20H2 or 21H1 or 21H2)
Win10 21H2 10 (2004 or 20H2 or 21H1 or 21H2)
Win11 11

Screenshot

Windows 11

image

Windows 10

image

iPhone

image

Android mobile

Screenshot_20220210-093352 4335

Amazon Fire tablet

Screenshot_20220210-093737 4338

iPad

image

iMac

Screenshot 2022-02-10 at 09 42 16

PureSourceCode.com

PureSourceCode.com is my personal blog where I publish posts about technologies and in particular source code and projects in .NET.

In the last few months, I created a lot of components for Blazor WebAssembly and Blazor Server.

My name is Enrico Rossini and you can contact me via:

Blazor Components

Component name Forum NuGet Website Description
AnchorLink Forum NuGet badge An anchor link is a web link that allows users to leapfrog to a specific point on a website page. It saves them the need to scroll and skim read and makes navigation easier. This component is for Blazor WebAssembly and Blazor Server
Autocomplete for Blazor Forum NuGet badge Simple and flexible autocomplete type-ahead functionality for Blazor WebAssembly and Blazor Server
Browser Detect for Blazor Forum NuGet badge Demo Browser detect for Blazor WebAssembly and Blazor Server
ChartJs for Blazor Forum NuGet badge Demo Add beautiful graphs based on ChartJs in your Blazor application
Clippy for Blazor Forum NuGet badge Demo Do you miss Clippy? Here the implementation for Blazor
CodeSnipper for Blazor Forum NuGet badge Add code snippet in your Blazor pages for 196 programming languages with 243 styles
Copy To Clipboard Forum NuGet badge Add a button to copy text in the clipboard
DataTable for Blazor Forum NuGet badge Demo DataTable component for Blazor WebAssembly and Blazor Server
Google Tag Manager Forum NuGet badge Demo Adds Google Tag Manager to the application and manages communication with GTM JavaScript (data layer).
Icons and flags for Blazor Forum NuGet badge Library with a lot of SVG icons and SVG flags to use in your Razor pages
ImageSelect for Blazor Forum NuGet badge This is a Blazor component to display a dropdown list with images based on ms-Dropdown by Marghoob Suleman. This component is built with NET7 for Blazor WebAssembly and Blazor Server
Markdown editor for Blazor Forum NuGet badge Demo This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users.
Modal dialog for Blazor Forum NuGet badge Simple Modal Dialog for Blazor WebAssembly
Modal windows for Blazor Forum NuGet badge Modal Windows for Blazor WebAssembly
Quill for Blazor Forum NuGet badge Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application
ScrollTabs NuGet badge Tabs with nice scroll (no scrollbar) and responsive
Segment for Blazor Forum NuGet badge This is a Segment component for Blazor Web Assembly and Blazor Server
Tabs for Blazor Forum NuGet badge This is a Tabs component for Blazor Web Assembly and Blazor Server
Timeline for Blazor Forum NuGet badge This is a new responsive timeline for Blazor Web Assembly and Blazor Server
Toast for Blazor Forum NuGet badge Toast notification for Blazor applications
Tours for Blazor Forum NuGet badge Guide your users in your Blazor applications
TreeView for Blazor Forum NuGet badge This component is a native Blazor TreeView component for Blazor WebAssembly and Blazor Server. The component is built with .NET7.
WorldMap for Blazor Forum NuGet badge Demo Show world maps with your data

C# libraries for .NET6

Component name Forum NuGet Description
PSC.Evaluator Forum NuGet badge PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions.
PSC.Extensions Forum NuGet badge A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions...

More examples and documentation

Blazor

Blazor & NET8