Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HybridWebView] Refactor and convert the HybridWebView.js file into a TypeScript file #27183

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+467 −290
Open

[HybridWebView] Refactor and convert the HybridWebView.js file into a TypeScript file #27183

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05f36e6
Convert the hybrid webview from typescript
mattleibow Jan 17, 2025
cef3e38
Update src/Core/src/Handlers/HybridWebView/HybridWebView.ts
mattleibow Jan 17, 2025
de2a74a
PR feedback
mattleibow Jan 17, 2025
e54c553
Don't assign functions to variables...
mattleibow Jan 21, 2025
c803e99
fix the merge conflicts
mattleibow Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
PR feedback
  • Loading branch information
@mattleibow
mattleibow committed Jan 23, 2025
commit de2a74aa5ebfd795c84e80051b894c0bfc4181db
38 changes: 19 additions & 19 deletions src/Core/src/Handlers/HybridWebView/HybridWebView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
* directly. To make changes, modify the TypeScript file and then recompile it.
*/
(() => {
// Cached function to send messages to the host application.
let sendMessageFunction = null;
/*
* Initialize the HybridWebView messaging system.
* This method is called once when the page is loaded.
Expand All @@ -15,6 +17,7 @@
const event = new CustomEvent('HybridWebViewMessageReceived', { detail: { message: message } });
window.dispatchEvent(event);
}
// Determine the mechanism to receive messages from the host application.
if (window.chrome?.webview?.addEventListener) {
// Windows WebView2
window.chrome.webview.addEventListener('message', (arg) => {
Expand All @@ -36,24 +39,28 @@
dispatchHybridWebViewMessage(arg.data);
});
}
// Determine the function to use to send messages to the host application.
if (window.chrome?.webview) {
// Windows WebView2
sendMessageFunction = window.chrome.webview.postMessage;
}
else if (window.webkit?.messageHandlers?.webwindowinterop) {
// iOS and MacCatalyst WKWebView
sendMessageFunction = window.webkit.messageHandlers.webwindowinterop.postMessage;
}
else if (window.hybridWebViewHost) {
// Android WebView
sendMessageFunction = window.hybridWebViewHost.sendMessage;
}
}
/*
* Send a message to the .NET host application.
* The message is sent as a string with the following format: `<type>|<message>`.
*/
function sendMessageToDotNet(type, message) {
const messageToSend = type + '|' + message;
if (window.chrome && window.chrome.webview) {
// Windows WebView2
window.chrome.webview.postMessage(messageToSend);
}
else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
// iOS and MacCatalyst WKWebView
window.webkit.messageHandlers.webwindowinterop.postMessage(messageToSend);
}
else if (window.hybridWebViewHost) {
// Android WebView
window.hybridWebViewHost.sendMessage(messageToSend);
if (sendMessageFunction) {
sendMessageFunction(messageToSend);
}
else {
console.error('Unable to send messages to .NET because the host environment for the HybridWebView was unknown.');
Expand Down Expand Up @@ -131,14 +138,7 @@
*/
__InvokeJavaScript: async function (taskId, methodName, args) {
try {
let result = null;
// @ts-ignore - We are checking the type of the function here
if (methodName[Symbol.toStringTag] === 'AsyncFunction') {
result = await methodName(...args);
}
else {
result = methodName(...args);
}
const result = await methodName(...args);
invokeJavaScriptCallbackInDotNet(taskId, result);
}
catch (ex) {
Expand Down
27 changes: 18 additions & 9 deletions src/Core/src/Handlers/HybridWebView/HybridWebView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ interface DotNetInvokeResult {

(() => {

// Cached function to send messages to the host application.
let sendMessageFunction: (message: any) => void = null;

/*
* Initialize the HybridWebView messaging system.
* This method is called once when the page is loaded.
Expand All @@ -64,6 +67,7 @@ interface DotNetInvokeResult {
window.dispatchEvent(event);
}

// Determine the mechanism to receive messages from the host application.
if (window.chrome?.webview?.addEventListener) {
// Windows WebView2
window.chrome.webview.addEventListener('message', (arg: any) => {
Expand All @@ -83,6 +87,18 @@ interface DotNetInvokeResult {
dispatchHybridWebViewMessage(arg.data);
});
}

// Determine the function to use to send messages to the host application.
if (window.chrome?.webview) {
// Windows WebView2
sendMessageFunction = window.chrome.webview.postMessage;
} else if (window.webkit?.messageHandlers?.webwindowinterop) {
// iOS and MacCatalyst WKWebView
sendMessageFunction = window.webkit.messageHandlers.webwindowinterop.postMessage;
} else if (window.hybridWebViewHost) {
// Android WebView
sendMessageFunction = window.hybridWebViewHost.sendMessage;
}
}

/*
Expand All @@ -92,15 +108,8 @@ interface DotNetInvokeResult {
function sendMessageToDotNet(type: string, message: string) {
const messageToSend = type + '|' + message;

if (window.chrome && window.chrome.webview) {
// Windows WebView2
window.chrome.webview.postMessage(messageToSend);
} else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
// iOS and MacCatalyst WKWebView
window.webkit.messageHandlers.webwindowinterop.postMessage(messageToSend);
} else if (window.hybridWebViewHost) {
// Android WebView
window.hybridWebViewHost.sendMessage(messageToSend);
if (sendMessageFunction) {
sendMessageFunction(messageToSend);
} else {
console.error('Unable to send messages to .NET because the host environment for the HybridWebView was unknown.');
}
Expand Down