Blazor Hybrid Apps: Integrate API Controllers to fetch data offline via https://0.0.0.0/api/method calls from Javascript Frameworks

[jugstalt]

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I am developing a Blazor hybrid app with an integrated interactive leaflet.js map. The map is generated via a javascript (map.js), which is activated in the corresponding Razor component:

function createMap() {
    var map = L.map('map-container').setView([47.751, 12.985], 15);

    var gl = L.maplibreGL({
        style: 'http://localhost:8080/styles/klokantech-basic/style.json'
    }).addTo(map);
}

@page "/map"
@inject IJSRuntime JSRuntime

<h3>Map</h3>

<div id="map-container">
</div>

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        if(firstRender)
        {
            JSRuntime.InvokeVoidAsync("createMap");
        }
    }
}

Works perfectly on Windows and Adriod as a nativ app! :) Blazor hybrid apps can be a good way for me as a web developer to develop native apps. Wow!

The url to the styes and map-tiles come from an self developed ASP.NET Core API (here: http://localhost:8080/styles/klokantech-basic/style.json, http://localhost:8080/ties/0/0/0.bpf, ...) This "Files" are not static files. The are created dyanmically or stored in an SQLite Database. Storing the files in the file system is not an option, as there are tens of thousands or millions.

Now my request:

The application an also the (Javascript) map should also work offline. For this purpose, the SQLite databases (or excerpts thereof) are also stored at the cient with the App.

The Javascript frameworks (leaflet.js) then fetch the data via an "API" integrated inside the Blazor Hybrid App. My idea was to rewrite the corresponding scripts like this:

function createMap() {
    var map = L.map('map-container').setView([47.751, 12.985], 15);

    var gl = L.maplibreGL({
        style: 'https://0.0.0.0/styles/klokantech-basic/style.json'
    }).addTo(map);
}

However, as I understand it, https://0.0.0.0/ only works for Razor components and static files in the wwwroot directory,

My wish would be:

The integration of ApiControllers into Blazor Hybrid App. This would allow the logic of the Server API (here for the maps tiles) to be easily transferred to the Blazor Hybrid App.

Alternatively, one could also offer a possibility to integrate middleware into the workflow, which can work these requests and return corresponding results.

I'm not sure if this requirement is too exotic or not possible for Blazor Maui hybrid apps, but I would at least appreciate an answer or an alternative solution.

Describe the solution you'd like

Whenever Javascript Framework within a Blazor hybrid page should also work offline, it would be nice, if i can do something like this.

//
// Add Api Controllers to the App. 
// So, Javascript Frameworks inside the Bazor Hyprid App can fetch data offline
// via https://0.0.0.0/api/tiles/capabilities
//
builder.Services.AddApiConntrolers()

// and or

var app = builder.Build();

//
// Middleware to handle Request http://0.0.0.0/tiles/15/23456/76543.pbf 
// *.pbf are not stored in FS (wwwroot) 
// Middeware return this assets as byte-stream an make them accessable from Javascript Frameworks
//
app.Use<MyCustomMiddleware>() 

So i can reuse my backend API code and everthing runs inside the App on the client (with offline database)

Additional context

No response

[javiercn]

@jugstalt thanks for contacting us.

For future reference, we can move the issues ourselves if needed. We normally track Blazor Hybrid requests in the Maui repo as that's where all the actual implementations live.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.