HybridWebView Docs: Overview #2433
Comments
|
@davidbritch I don't have permissions to assign this to myself. I'm working on this and should have draft content posted here tomorrow. |
davidbritch
added
doc-idea
|
@BethMassi I've assigned to you, but I've also added you to the relevant group that should give you the permissions you need. |
|
From @Eilon : Getting Started with HybridWebViewTo build a .NET MAUI app with HybridWebView you need a few pieces:
The entire app, including the web content, is packaged and then runs locally on the device, and can be published to applicable app stores. The web content is hosted within a native web view control and runs within the context of the app. Any part of the app can access external web services, but it is not required. Create a new projectCreate a new .NET MAUI Application project in Visual Studio, Visual Studio Code, or using command line tools. Adding web content to the appYour app's web content is included as part of the .NET MAUI project as "raw assets." A raw asset is any file in the app's For HybridWebView the default location is to place files in the A simple application might have the following files and contents:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="icon" href="data:,">
<script src="scripts/HybridWebView.js"></script>
<script>
window.addEventListener(
"HybridWebViewMessageReceived",
function (e) {
var messageFromCSharp = document.getElementById("messageFromCSharp");
messageFromCSharp.value += '\r\n' + e.detail.message;
});
</script>
</head>
<body>
<h1>HybridWebView app!</h1>
<div>
<button onclick="window.HybridWebView.SendRawMessage('Message from JS!')">Send message to C#</button>
</div>
<div>
Messages from C#: <textarea readonly id="messageFromCSharp" style="width: 80%; height: 300px;"></textarea>
</div>
</body>
</html>
NOTE: The contents of this file change with each version (and pre-release) of .NET MAUI, so check that the content matches the latest release. The content below is from .NET 9 Preview 7.
function HybridWebViewInit() {
function DispatchHybridWebViewMessage(message) {
const event = new CustomEvent("HybridWebViewMessageReceived", { detail: { message: message } });
window.dispatchEvent(event);
}
if (window.chrome && window.chrome.webview) {
// Windows WebView2
window.chrome.webview.addEventListener('message', arg => {
DispatchHybridWebViewMessage(arg.data);
});
}
else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
// iOS and MacCatalyst WKWebView
window.external = {
"receiveMessage": message => {
DispatchHybridWebViewMessage(message);
}
};
}
else {
// Android WebView
window.addEventListener('message', arg => {
DispatchHybridWebViewMessage(arg.data);
});
}
}
window.HybridWebView = {
"SendRawMessage": function (message) {
if (window.chrome && window.chrome.webview) {
// Windows WebView2
window.chrome.webview.postMessage(message);
}
else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
// iOS and MacCatalyst WKWebView
window.webkit.messageHandlers.webwindowinterop.postMessage(message);
}
else {
// Android WebView
hybridWebViewHost.sendRawMessage(message);
}
}
}
HybridWebViewInit();And you can then add any other files for CSS, images, additional HTML files, and so on. TIP: In some cases the IDE or code editor might add entries to the project's Adding the HybridWebView controlIn the app's <Grid RowDefinitions="Auto,*" ColumnDefinitions="*">
<Button Text="Send message to JavaScript" Clicked="OnSendMessageButtonClicked" />
<HybridWebView x:Name="hybridWebView" RawMessageReceived="OnHybridWebViewRawMessageReceived" Grid.Row="1" />
</Grid>Use HybridWebView APIs to send messages between the JavaScript and C# codeThe sample HTML code above already include JavaScript code to send messages to the C# code. Edit the private void OnSendMessageButtonClicked(object sender, EventArgs e)
{
hybridWebView.SendRawMessage($"Hello from C#!");
}
private async void OnHybridWebViewRawMessageReceived(object sender, HybridWebViewRawMessageReceivedEventArgs e)
{
await DisplayAlert("Raw Message Received", e.Message, "OK");
}The message are "raw" because no additional processing is performed. You can encode data within the message to perform more advanced messaging. Future of HybridWebViewFuture updates will include the ability to invoke methods from C# to JavaScript, and also from JavaScript to C#. |
|
This article explains .NET MAUI hybrid apps, a way to build cross-platform native apps that use web UI. What are Hybrid apps?Hybrid apps provide native experiences across multiple device platforms but use web technologies for building the UI. The UI is packaged with the app, and you have full access to the native device capabilities. This approach also allows you to reuse UI assets across devices and web browsers. Hybrid apps are a blend of both native and web solutions. The core UI of the application is written using web technologies such as HTML, CSS, and JavaScript. These apps are then wrapped in a lightweight native app container that allows them to leverage certain native platform features and device hardware (like a device's camera, calendar, push notifications, and pinch and spread functionality) that a web application cannot access easily or even at all. This approach allows hybrid apps to run on, for example, both iOS and Android platforms without the need for completely separate development. And they can be downloaded and installed through the app stores. The main advantage of hybrid apps is that they can achieve greater developer productivity via code reuse across devices and web browsers. .NET MAUI Hybrid App OptionsWith .NET MAUI you can either host Blazor components with the BlazorWebView control or any other HTML/JavaScript-based UI with the HybridWebView control. These controls derive from the native platform’s WebView. No internet is required; your UI is packaged with the app. This makes it easier to share UI across native and web hosting models. Hybrid apps rely on .NET MAUI for a native application container and native controls, if you want to use them. This means you can mix web UI with native UI if you want. .NET MAUI Hybrid apps can also be packaged for store distribution whether that’s the Microsoft, Apple or Google App stores. .NET MAUI Blazor Hybrid apps also have additional controls, templates and tooling in Visual Studio and Visual Studio Code to make development easier. For more information on .NET MAUI Blazor Hybrid apps see the ASP.NET Core Blazor Hybrid docs. .NET MAUI Blazor Hybrid TutorialsGetting Started with HybridWebView// Eilon's stuff above goes here |
|
[chromium] [INFO:CONSOLE(43)] "Uncaught TypeError: hybridWebViewHost.sendRawMessage is not a function", source: https://0.0.0.0/scripts/HybridWebView.js (43) |
|
@nine-2-five the preview doc listed above is out-of-date now. Check that you have the latest We'll make sure the docs are up-to-date! |
|
@davidbritch what are the next steps for getting a /hybrid/ section in the TOC with the intro/overview above that explains BlazorWebView and HybridWebView options? Can we mirror the blazor/hybrid section docs into maui/hybrid/blazor or something similar here? |
davidbritch
added
🗺️ reQUEST
I'll do it next week.
Yes. |
sequestor
bot
added
📌 seQUESTered
dotnetrepoman
bot
added
⌚ Not Triaged
Overview
- What are MAUI hybrid apps?, explain options: HybridWebView or BlazorWebView, point to blazor/hybrid docs for BlazorWebView
- Getting started / set up HybridWebView
- Suggested project structure (VS / VS Code differences)
- WebView config
- passing messages / calling methods to JS <-> C#
- Globalization / localization? (probably not needed or needed later)
Associated WorkItem - 370907
The text was updated successfully, but these errors were encountered: