Posts

Showing posts from August, 2023

Add a PWA feature to our Blazor Maui Hybrid application

Image
  I have been working on a series of posts about the Maui Hybrid solution.  I create a desktop and Blazor web assembly web client that uses the same code for the UI and the same code for their backend services. Just for fun or to see if it is even possible, I wanted the ability to deploy the solution as a Progress web app as well.  This gives users an additional way they can get the application and use it.  I have an older post about why you would want to build a PWA. Turn Blazor Web Assembly web client into a PWA The steps are fairly straightforward to archive this: 1. Create a Manifest File:       This is a JSON file that provides information about your application (such as name, author, icon, and description) to the browser. It's typically named manifest.json and placed in the wwwroot directory of your project.  Here's a basic example: {   "short_name": "BlazorPWA",   "name": "Blazor Progressive Web Application",   "icons":

Maui hybrid Desktop and a Web client share the same database

Image
  In the first couple of posts on Maui Hybrid, Let's Make a Blazor Hybrid app and Blazor Hybrid application, and a Blazor Web application , we covered the basics of creating our Maui hybrid application and a Blazor web assembly application, all using the same UI.  These 2 projects worked nicely together.  It worked nicely. My next step was configuring the Maui hybrid desktop to access the same database as the web client.  Seems easy enough. Turns out it is.  What we need to do is check to see if we are running in a hosted environment, if so, make a call to the server API to get the weather data.  If not, just use the local source. In my demo, I am using the data source from which the Blazor sample app comes, but you could also easily use a database.  Changes to the WeatherForecastService We need to add a flag to the WeatherForecastService to let it know if we are in a hosted mode or not.  To achieve this we add a parameter to the constructor:         private bool hosted = false;  

Maui Hybrid application and a Blazor

Image
Since Java first came out, I have been trying to use the same code for both a desktop client and a web client. It was easy to do this for the backend. Getting a shared UI across a desktop and a web client that provided the same experience, was not possible.  Add in the support for Android and iOS and you end up with 4 UI code bases, 4 UI teams, 4 QA teams, etc. Maui Blazor Hybrid to the rescued. With Maui Blaozr I can finally achieve that goal. In my last post, "Let’s Make a Blazor Hybrid Application!" I showed how to create a simple Maui Blazor hybrid application.  I now took the next step, added a Blazor Web Assembly application, and using the Shared library, I created a hosted web client and a desktop client, with the same UI. Here is how I did it. Desktop Application Create a Share UI library project Move the Pages Folder into the new library Move the Shared Folder into the new library Move the CSS folder into the new library Create a new Shared Service Library Move the W