Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erossini/blazorbrowserdetect
Browser detect component for Blazor WebAssembly and Blazor Server with .NET6
https://github.com/erossini/blazorbrowserdetect
blazor blazor-component blazor-components blazor-server blazor-webassembly net6
Last synced: 2 months ago
JSON representation
Browser detect component for Blazor WebAssembly and Blazor Server with .NET6
- Host: GitHub
- URL: https://github.com/erossini/blazorbrowserdetect
- Owner: erossini
- Created: 2022-02-10T09:28:58.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-13T13:22:11.000Z (about 1 year ago)
- Last Synced: 2024-05-02T06:09:13.229Z (9 months ago)
- Topics: blazor, blazor-component, blazor-components, blazor-server, blazor-webassembly, net6
- Language: JavaScript
- Homepage:
- Size: 286 KB
- Stars: 31
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Browser Detect for Blazor
This is a browser detect component for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) with .NET6.
> If you need help, info or some device is not detected correctly, leave your message in the [Forum](https://www.puresourcecode.com/forum/browser-detect-for-blazor/).
Read the full post on [PureSourceCode.com](https://www.puresourcecode.com):
- [Version 1.0.11](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor-2/)
- [First version](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor)
Now, you can try your component by yourself from the website. [Try it now!](https://browserdetect.puresourcecode.com/)
## Installation
Fist, you have to add the component from [NuGet](https://www.nuget.org/packages/PSC.Blazor.Components.BrowserDetect/). 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:
```
```
then the functions look like
```csharp
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
### Windows 10
## iPhone
## Android mobile
## Amazon Fire tablet
## iPad
## iMac
---
## PureSourceCode.com
[PureSourceCode.com](https://www.puresourcecode.com/) is my personal blog where I publish posts about technologies and in particular source code and projects in [.NET](https://www.puresourcecode.com/category/dotnet/).
In the last few months, I created a lot of components for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/).
My name is Enrico Rossini and you can contact me via:
- [Personal Twitter](https://twitter.com/erossiniuk)
- [LinkedIn](https://www.linkedin.com/in/rossiniuk)
- [Facebook](https://www.facebook.com/puresourcecode)
## Blazor Components
| Component name | Forum | NuGet | Website | Description |
|---|---|---|---|---|
| [AnchorLink]() | [Forum](https://puresourcecode.com/forum/anchorlink/) |  | | 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](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |
| [Autocomplete for Blazor](https://www.puresourcecode.com/dotnet/net-core/autocomplete-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/autocomplete-blazor/) |  | | Simple and flexible autocomplete type-ahead functionality for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |
| [Browser Detect for Blazor](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/browser-detect-for-blazor/) |  | [Demo](https://browserdetect.puresourcecode.com) | Browser detect for Blazor WebAssembly and Blazor Server |
| [ChartJs for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/) | [Forum](https://www.puresourcecode.com/forum/chart-js-for-blazor/) |  | [Demo](https://chartjs.puresourcecode.com/) | Add beautiful graphs based on ChartJs in your Blazor application |
| [Clippy for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/) | [Forum](https://www.puresourcecode.com/forum/clippy/) |  | [Demo](https://clippy.puresourcecode.com/) | Do you miss Clippy? Here the implementation for Blazor |
| [CodeSnipper for Blazor](https://www.puresourcecode.com/dotnet/blazor/code-snippet-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/codesnippet-for-blazor/) |  | | Add code snippet in your Blazor pages for 196 programming languages with 243 styles |
| [Copy To Clipboard](https://www.puresourcecode.com/dotnet/blazor/copy-to-clipboard-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/copytoclipboard/) |  | | Add a button to copy text in the clipboard |
| [DataTable for Blazor](https://www.puresourcecode.com/dotnet/net-core/datatable-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/datatables/) |  | [Demo](https://datatable.puresourcecode.com/) | DataTable component for Blazor WebAssembly and Blazor Server |
| [Google Tag Manager]() | [Forum]() |  | [Demo](https://datatable.puresourcecode.com/) | Adds Google Tag Manager to the application and manages communication with GTM JavaScript (data layer). |
| [Icons and flags for Blazor](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) |  | | Library with a lot of SVG icons and SVG flags to use in your Razor pages |
| [ImageSelect for Blazor]() | [Forum](https://puresourcecode.com/forum/imageselect/) |  | | 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](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |
| [Markdown editor for Blazor](https://www.puresourcecode.com/dotnet/blazor/markdown-editor-with-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/markdown-editor-for-blazor/) |  | [Demo](https://markdown.puresourcecode.com/) | 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](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) |  | | Simple Modal Dialog for Blazor WebAssembly |
| [Modal windows for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) |  | | Modal Windows for Blazor WebAssembly |
| [Quill for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-a-blazor-component-for-quill/) | [Forum](https://www.puresourcecode.com/forum/forum/quill-for-blazor/) |  | | 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](https://www.puresourcecode.com/dotnet/blazor/scrolltabs-component-for-blazor/) | |  | | Tabs with nice scroll (no scrollbar) and responsive |
| [Segment for Blazor](https://www.puresourcecode.com/dotnet/blazor/segment-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/segments-for-blazor/) |  | | This is a Segment component for Blazor Web Assembly and Blazor Server |
| [Tabs for Blazor](https://www.puresourcecode.com/dotnet/blazor/tabs-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/tabs-for-blazor/) |  | | This is a Tabs component for Blazor Web Assembly and Blazor Server |
| [Timeline for Blazor](https://www.puresourcecode.com/dotnet/blazor/timeline-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/timeline/) |  | | This is a new responsive timeline for Blazor Web Assembly and Blazor Server |
| [Toast for Blazor](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/psc-components-and-source-code/) |  | | Toast notification for Blazor applications |
| [Tours for Blazor](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/psc-components-and-source-code/) |  | | Guide your users in your Blazor applications |
| [TreeView for Blazor]() | [Forum](https://puresourcecode.com/forum/treeview/) |  | | This component is a native Blazor TreeView component for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/). The component is built with .NET7. |
| [WorldMap for Blazor](https://puresourcecode.com/dotnet/blazor/world-map-component-for-blazor) | [Forum](https://www.puresourcecode.com/forum/worldmap-for-blazor/) |  | [Demo](https://worldmap.puresourcecode.com/) | Show world maps with your data |
## C# libraries for .NET6
| Component name | Forum | NuGet | Description |
|---|---|---|---|
| [PSC.Evaluator](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) |  | PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions. |
| [PSC.Extensions](https://www.puresourcecode.com/dotnet/net-core/a-lot-of-functions-for-net5/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) |  | 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
* [Write a reusable Blazor component](https://www.puresourcecode.com/dotnet/blazor/write-a-reusable-blazor-component/)
* [Getting Started With C# And Blazor](https://www.puresourcecode.com/dotnet/net-core/getting-started-with-c-and-blazor/)
* [Setting Up A Blazor WebAssembly Application](https://www.puresourcecode.com/dotnet/blazor/setting-up-a-blazor-webassembly-application/)
* [Working With Blazor Component Model](https://www.puresourcecode.com/dotnet/blazor/working-with-blazors-component-model/)
* [Secure Blazor WebAssembly With IdentityServer4](https://www.puresourcecode.com/dotnet/blazor/secure-blazor-webassembly-with-identityserver4/)
* [Blazor Using HttpClient With Authentication](https://www.puresourcecode.com/dotnet/blazor/blazor-using-httpclient-with-authentication/)
* [InputSelect component for enumerations in Blazor](https://www.puresourcecode.com/dotnet/blazor/inputselect-component-for-enumerations-in-blazor/)
* [Use LocalStorage with Blazor WebAssembly](https://www.puresourcecode.com/dotnet/blazor/use-localstorage-with-blazor-webassembly/)
* [Modal Dialog component for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/)
* [Create Tooltip component for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-tooltip-component-for-blazor/)
* [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0&tabs=visual-studio)
* [ChartJs component for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/)
* [Labels and OnClickChart for ChartJs](https://www.puresourcecode.com/dotnet/blazor/labels-and-onclickchart-for-chartjs/)
### Blazor & NET8
* [Custom User Management with NET8 and Blazor (1st part)](https://puresourcecode.com/dotnet/blazor/custom-user-management-with-net8-and-blazor/)
* [NET8, Blazor and Custom User Management (2nd part)](https://puresourcecode.com/dotnet/blazor/net8-blazor-and-custom-user-management/)