Hello! Today we will talk about a subtle but frustrating problem in Blazor Hybrid development: State Desynchronization between C# and JavaScript.
In a .NET MAUI Blazor Hybrid app, you are running a "double-sided" architecture. You have your native C# logic (running in the .NET process) and your UI logic (running inside the WebView’s JavaScript engine). While they feel like one app, they have completely different lifecycles for state management.
If you’ve ever had a user background your app to check a message, only to return and find they’ve been "logged out" or their form data has vanished while the C# services are still running, you’ve hit the Hybrid State Gap.
The Problem: The "Ghost" State
When a mobile OS (especially iOS) needs memory, it may suspend or partially throttle the WebView process. While your MAUI app might stay alive in the background, the JavaScript localStorage or sessionStorage can behave inconsistently, or the JS variables might be reset during a "Warm Start" where the WebView reloads.
Meanwhile, your C# Singleton services might still hold the user's data. This leads to a "Ghost State" where C# thinks the user is authenticated, but the Blazor UI is showing the Login screen.
1. The Solution: C# as the "Single Source of Truth" (SSoT)
Instead of relying on JavaScript’s localStorage, we should treat MAUI’s Native Preferences as our master database. C# is much more resilient to backgrounding than the WebView's JS engine.
2. Implementing the Synchronized Store
We can create a service that automatically "hydrates" the JavaScript side every time the app resumes or a page loads.
3. The "Hydration" Pattern on App Resume
The real magic happens in your App.xaml.cs. We can detect when the app returns from the background and force the WebView to re-sync its state with the native layer.
Inside your MainLayout.razor, you listen for this message and ensure the JS layer matches the C# layer:
4. Handling Auth Desync: The "Interceptor" Approach
A unique way to solve this is to create a custom AuthenticationStateProvider. Instead of checking a JS cookie, it should always call into the MAUI native layer. This ensures that even if the WebView is completely refreshed, the user remains logged in as long as the native C# secure storage hasn't been cleared.
Summary
In a Hybrid world, JavaScript should be treated as a View-only layer. Keep your critical state—Authentication, User Preferences, and Progress—in the C# native layer using Preferences or SecureStorage. By pushing this state down to JavaScript rather than letting JS manage its own, you eliminate the "random logout" bugs that plague many MAUI Blazor applications.
Have you noticed your Blazor Hybrid apps losing state after being backgrounded? Let's discuss your strategies for keeping C# and JS in sync below!