Blazor Hosting

Shiny Blazor Hosting provides an IAppSupport service for Blazor WebAssembly apps — app version, browser user-agent, screen and viewport dimensions, plus live culture and time-zone change notifications. It’s the browser-side sibling of MAUI Hosting’s IAppSupport, reading browser state synchronously through IJSInProcessRuntime (the same approach as Stores for WebAssembly).

Note

This is a Blazor WebAssembly library. The synchronous property reads rely on IJSInProcessRuntime, which Blazor Server does not provide.

GitHub
Downloads

Frameworks

Blazor

Operating Systems

Web

Features

• IAppSupport — app version, browser user-agent (raw string + best-effort parsed browser Version), screen and viewport dimensions
• Live CultureChanged / TimeZoneChanged events with lazy subscription
• Synchronous browser reads via IJSInProcessRuntime — no await needed for property access
• App version supplied at registration from the head assembly’s ThisAssembly constant — no runtime reflection

Setup

1. Install the NuGet package:

   dotnet add package Shiny.Extensions.BlazorHosting

2. Reference the bundled script in wwwroot/index.html, before blazor.webassembly.js:

   <script src="_content/Shiny.Extensions.BlazorHosting/shiny-appsupport.js"></script>

3. Register in Program.cs, passing your app’s version constant:

   using Shiny;
   
   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   builder.Services.AddAppSupport(ThisAssembly.AssemblyVersion);
   
   await builder.Build().RunAsync();

Usage

@inject IAppSupport App

@code {
    protected override void OnInitialized()
    {
        // Snapshot
        Version version = App.AppVersion;
        string? userAgent = App.UserAgent;
        Version? browser = App.UserAgentVersion;     // best-effort, may be null
        var (w, h) = (App.BrowserWidth, App.BrowserHeight);   // viewport — read live
        var (sw, sh) = (App.ScreenWidth, App.ScreenHeight);   // physical screen

        // Live updates
        App.CultureChanged += (s, e) => InvokeAsync(StateHasChanged);
        App.TimeZoneChanged += (s, e) => InvokeAsync(StateHasChanged);
    }
}

Member	Source	Notes
AppVersion	Registration argument	Pass ThisAssembly.AssemblyVersion (or another compile-time constant) — never reflected
UserAgent	navigator.userAgent	Read once and cached for the page’s lifetime
UserAgentVersion	Parsed from UserAgent	Best-effort browser version (Edge → Opera → Firefox → Chrome → Safari); null if unparseable
ScreenWidth, ScreenHeight	window.screen.*	Physical screen size
BrowserWidth, BrowserHeight	window.innerWidth/innerHeight	Viewport — read live, so reflects window resizes
CurrentCulture + CultureChanged	CultureInfo.CurrentCulture	30-second poller raises the event on change
CurrentTimeZone + TimeZoneChanged	TimeZoneInfo.Local	30-second poller raises the event on change

Caution

The shiny-appsupport.js script must load before blazor.webassembly.js. Without it, the first browser read throws because window.shinyAppSupport is undefined.

Tip

CultureChanged and TimeZoneChanged use lazy subscription — the poll timer only runs while at least one handler is attached. Detach your handlers on Dispose to stop it.

AI Coding Assistant

Claude CodeGitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

View shiny-blazor-hosting Skill