Uploaded May 2025 | Updated September 2026, 2 weeks ago

---

🔗 Resources & Code:
github.com/BlazorPuzzle/Puzzle-79

Episode 79 of The Blazor Puzzle comes to you from Microsoft Build in Seattle! Carl Franklin and Jeff Fritz dive into building a connectivity indicator for Blazor WebAssembly apps, showing whether you're online or offline — perfect for PWAs.

🔌💚 Using green and gray Wi-Fi icons, they show how to dynamically update UI state based on real-time browser connectivity — all using Blazor components, JS interop, and RenderFragments… the Blazor way.

🔍 What You’ll Learn:
✔️ How to detect online/offline status in a Blazor WebAssembly app
✔️ How to hook into navigator.onLine and listen for connectivity changes
✔️ Using [JSInvokable] and DotNetObjectReference to connect Blazor and JS
✔️ Swapping content with RenderFragments instead of JavaScript hacks
✔️ Why this approach is clean, testable, and reusable in PWAs

🧩 All wrapped up in a reusable ConnectivityIndicator component—just drop it in and go!

📫 Got a clever Blazor trick or puzzle? Send it to blazorpuzzle@appvnext.com and you might win a Blazor Puzzle mug (or even get your name shouted out on the show!).

📌 Want to level up your Blazor testing skills? Subscribe & join the puzzle! 🧩

Get Started Today – Free 30 Day Trial
dxpr.es/NUGET
dxpr.es/FREE-TRIAL

Pricing and Online Demos
dxpr.es/BUY
dxpr.es/DEMOS

We Are Here to Help
dxpr.es/SUPPORT

Follow DevExpress on Social Media
dxpr.es/FACEBOOK
dxpr.es/TWITTER
dxpr.es/BLOGS

Review Customer Testimonials
dxpr.es/TESTIMONIALS
dxpr.es/MARKETPLACE

#DevExpress, #devexpress_blazor