mynameisvasco/BlazorOnlineState

This package provides Blazor applications with access to the browser Online State API

🌎 Blazor Online State

This package provides Blazor applications with access to an improved version of the browser's Online State API

📝 Usage

1. In your Blazor app, add the BlazorOnlineState NuGet package

   dotnet add package BlazorOnlineState

2. In your Blazor app's Startup.cs (Server) or Program.cs (Client), register the 'OnlineStateService'.

   • Server

     ...
     using BlazorOnlineState;
     ...
     
     public void ConfigureServices(IServiceCollection services)
     {
         ...
         services.AddSingleton<OnlineStateServer>();
         ...
     }

   • Client

     ...
     using BlazorOnlineState;
     ...
     
     public static async Task Main(string[] args)
     {
         ...
         builder.Services.AddSingleton<OnlineStateService>();
         ...
     }

3. Include the following javascript code into index.html inside www-root folder

   window.addEventListener("online", async () => {
     const req = await fetch("https://icanhazip.com/");
     if (req.ok) {
       DotNet.invokeMethodAsync("BlazorOnlineState", "OnOnline");
     }
   });
   
   window.addEventListener("offline", () => {
     DotNet.invokeMethodAsync("BlazorOnlineState", "OnOffline");
   });
   
   window.IsOnline = async () => {
     if (window.navigator.onLine) {
       const req = await fetch("https://icanhazip.com/");
       return req.ok;
     }
     return window.navigator.onLine;
   };

4. Now you can inject the OnlineService into any Blazor page!

💁🏼‍♂️ Author

Vasco Sousa

🌐 Visit Website

💰Donate

📧 Send Email