Hybrid (SPA) application with MAUI (WebView)

Copper Contributor

Are there any plans to make it possible to use WebView for SPA applications? Particularly I am interested in communication between Javascript (Frontend) and C# (Backend). Lets say I can execute the following javascript `let rows = MyService.GetRows();` and it will call C# and then take records from Sqlite db and send it back to Javascript in one async call. At the moment there is no way to do so.

 

There are many Hybrid frameworks (including Electron) but no one supports C# as a backend (apart of that https://www.blinkingcaret.com/2020/03/25/electroncgi-1-0-cross-platform-guis-for-net-core/ where guy converted xaml app into SPA).

I was thinking the MAUI can be a solution. Just few small changes need to be done to WebView.

I don't want to hurt xaml community, but we could have more choices and be more open to the audiences.

 

Javascript communication sample:

 

// GET

let query = {
    "query": "get:contacts",
    "page": 1,
    "rows": 16,
    "search": "name:contains:John"
};

Backend.Call(
    query, 
    (result) => {
        this.gridContacts.source = result;
    },
    (error) => {
        this.$message.popup(error);
    }
);


// SAVE

var newContact = {
    "query": "save:contact",
    "model": {
        "title": "Mr",
        "name": "John Smith",
        "email": "Email address removed",
        "tel": "+0123456789",
        "aim": "friend"
    }
};

Backend.Call(
    newContact, 
    (result) => {
        this.$message.feedback("Contact saved.", "success");
    },
    (error) => {
        this.$message.popup(error); // User error
    }
);

 

What do you think guys? I am already experimenting but I can see there is a lack of communication with backend currently (https://gitlab.com/fairking/napos/) and assets are not loaded properly (https://github.com/dotnet/maui/issues/6165).

 

I think it could be very useful as there are many existing SPA applications (ASP.NET Core) could be brought from the web into the Mobile/Desktop world and even be offline or communicate with devices.

1 Reply

I have found this: https://docs.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2.webmessagerecei...

Looking at that closer :)

 

The only one concern is to make it asynchronous to communicate without wasting time on waiting:

Denisp2_0-1650111195542.png