From 39b6d1c88fec5c94550438b67902f18ff4b1910c Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 2 Nov 2023 21:49:06 +0530 Subject: [PATCH 1/4] chore: mobile window color --- .../app/src/main/res/values/colors.xml | 2 +- .../mobile/html/Web.bundle/src/index.html | 11 +-- packages/mobile/src/MobileWebAppContainer.tsx | 83 +++++++++++-------- 3 files changed, 55 insertions(+), 41 deletions(-) diff --git a/packages/mobile/android/app/src/main/res/values/colors.xml b/packages/mobile/android/app/src/main/res/values/colors.xml index 1967a36e03a..e4e7616774b 100644 --- a/packages/mobile/android/app/src/main/res/values/colors.xml +++ b/packages/mobile/android/app/src/main/res/values/colors.xml @@ -1,4 +1,4 @@ - #2E2E2E + #000000 \ No newline at end of file diff --git a/packages/mobile/html/Web.bundle/src/index.html b/packages/mobile/html/Web.bundle/src/index.html index b392bb8090a..4136e9f2c89 100644 --- a/packages/mobile/html/Web.bundle/src/index.html +++ b/packages/mobile/html/Web.bundle/src/index.html @@ -6,6 +6,12 @@ + - diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 74d56255e9d..437040487d2 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -350,41 +350,54 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo } return ( - console.error('An error has occurred', err)} - onHttpError={() => console.error('An HTTP error occurred')} - onMessage={onMessage} - onContentProcessDidTerminate={() => { - webViewRef.current?.reload() + { - webViewRef.current?.reload() - }} - hideKeyboardAccessoryView={true} - onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} - allowFileAccess={true} - allowUniversalAccessFromFileURLs={true} - injectedJavaScriptBeforeContentLoaded={injectedJS} - bounces={false} - keyboardDisplayRequiresUserAction={false} - allowsInlineMediaPlayback={requireInlineMediaPlaybackForMomentsFeature} - mediaPlaybackRequiresUserAction={requireMediaUserInteractionForMomentsFeature} - scalesPageToFit={true} - /** - * This disables the global window scroll but keeps scroll within div elements like lists and textareas. - * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears. - */ - scrollEnabled={false} - overScrollMode="never" - nativeConfig={Platform.select({ - android: { - component: CustomAndroidWebView, - } as WebViewNativeConfig, - })} - /> + > + console.error('An error has occurred', err)} + onHttpError={() => console.error('An HTTP error occurred')} + onMessage={onMessage} + onContentProcessDidTerminate={() => { + webViewRef.current?.reload() + }} + onRenderProcessGone={() => { + webViewRef.current?.reload() + }} + hideKeyboardAccessoryView={true} + onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} + allowFileAccess={true} + allowUniversalAccessFromFileURLs={true} + injectedJavaScriptBeforeContentLoaded={injectedJS} + bounces={false} + keyboardDisplayRequiresUserAction={false} + allowsInlineMediaPlayback={requireInlineMediaPlaybackForMomentsFeature} + mediaPlaybackRequiresUserAction={requireMediaUserInteractionForMomentsFeature} + scalesPageToFit={true} + /** + * This disables the global window scroll but keeps scroll within div elements like lists and textareas. + * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears. + */ + scrollEnabled={false} + overScrollMode="never" + nativeConfig={Platform.select({ + android: { + component: CustomAndroidWebView, + } as WebViewNativeConfig, + })} + webviewDebuggingEnabled + /> + ) } From a72e705de8722a08b83b53c93a3652d8160d6a8a Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 2 Nov 2023 22:28:24 +0530 Subject: [PATCH 2/4] chore: revert some changes --- .../mobile/html/Web.bundle/src/index.html | 12 +-- packages/mobile/src/MobileWebAppContainer.tsx | 82 ++++++++----------- 2 files changed, 42 insertions(+), 52 deletions(-) diff --git a/packages/mobile/html/Web.bundle/src/index.html b/packages/mobile/html/Web.bundle/src/index.html index 4136e9f2c89..7cf4b3153b6 100644 --- a/packages/mobile/html/Web.bundle/src/index.html +++ b/packages/mobile/html/Web.bundle/src/index.html @@ -6,12 +6,6 @@ - + diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 437040487d2..0600b99a288 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -350,54 +350,44 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo } return ( - - console.error('An error has occurred', err)} - onHttpError={() => console.error('An HTTP error occurred')} - onMessage={onMessage} - onContentProcessDidTerminate={() => { - webViewRef.current?.reload() - }} - onRenderProcessGone={() => { - webViewRef.current?.reload() - }} - hideKeyboardAccessoryView={true} - onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} - allowFileAccess={true} - allowUniversalAccessFromFileURLs={true} - injectedJavaScriptBeforeContentLoaded={injectedJS} - bounces={false} - keyboardDisplayRequiresUserAction={false} - allowsInlineMediaPlayback={requireInlineMediaPlaybackForMomentsFeature} - mediaPlaybackRequiresUserAction={requireMediaUserInteractionForMomentsFeature} - scalesPageToFit={true} - /** - * This disables the global window scroll but keeps scroll within div elements like lists and textareas. - * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears. - */ - scrollEnabled={false} - overScrollMode="never" - nativeConfig={Platform.select({ - android: { - component: CustomAndroidWebView, - } as WebViewNativeConfig, - })} - webviewDebuggingEnabled - /> - + originWhitelist={['*']} + onError={(err) => console.error('An error has occurred', err)} + onHttpError={() => console.error('An HTTP error occurred')} + onMessage={onMessage} + onContentProcessDidTerminate={() => { + webViewRef.current?.reload() + }} + onRenderProcessGone={() => { + webViewRef.current?.reload() + }} + hideKeyboardAccessoryView={true} + onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} + allowFileAccess={true} + allowUniversalAccessFromFileURLs={true} + injectedJavaScriptBeforeContentLoaded={injectedJS} + bounces={false} + keyboardDisplayRequiresUserAction={false} + allowsInlineMediaPlayback={requireInlineMediaPlaybackForMomentsFeature} + mediaPlaybackRequiresUserAction={requireMediaUserInteractionForMomentsFeature} + scalesPageToFit={true} + /** + * This disables the global window scroll but keeps scroll within div elements like lists and textareas. + * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears. + */ + scrollEnabled={false} + overScrollMode="never" + nativeConfig={Platform.select({ + android: { + component: CustomAndroidWebView, + } as WebViewNativeConfig, + })} + webviewDebuggingEnabled + /> ) } From ac26e49a37a443058e8bd03a0910e68ae47e1f82 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 2 Nov 2023 22:49:42 +0530 Subject: [PATCH 3/4] chore: transparent when loading --- packages/mobile/src/MobileWebAppContainer.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 0600b99a288..7f76d0a1a03 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -308,6 +308,8 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo }) }, [device]) + const [didLoadEnd, setDidLoadEnd] = useState(false) + if (showAndroidWebviewUpdatePrompt) { return ( vo source={{ uri: sourceUri }} style={{ backgroundColor: '#000000', + opacity: didLoadEnd ? 1 : 0, }} originWhitelist={['*']} onError={(err) => console.error('An error has occurred', err)} @@ -366,6 +369,9 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo onRenderProcessGone={() => { webViewRef.current?.reload() }} + onLoadEnd={() => { + setDidLoadEnd(true) + }} hideKeyboardAccessoryView={true} onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} allowFileAccess={true} From bc9ae92dccd7ce0831061fc71fc75b6e2305bac2 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 3 Nov 2023 16:18:50 +0530 Subject: [PATCH 4/4] refactor: app load --- packages/mobile/src/MobileWebAppContainer.tsx | 7 ++++--- packages/web/src/javascripts/App.tsx | 7 +++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 7f76d0a1a03..e931da90c48 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -242,6 +242,10 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo setShowAndroidWebviewUpdatePrompt(true) return } + if (message === 'appLoaded') { + setDidLoadEnd(true) + return + } try { const functionData = JSON.parse(message) void onFunctionMessage(functionData.functionName, functionData.messageId, functionData.args) @@ -369,9 +373,6 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo onRenderProcessGone={() => { webViewRef.current?.reload() }} - onLoadEnd={() => { - setDidLoadEnd(true) - }} hideKeyboardAccessoryView={true} onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} allowFileAccess={true} diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx index ebaa71e2da6..4641da2e5e8 100644 --- a/packages/web/src/javascripts/App.tsx +++ b/packages/web/src/javascripts/App.tsx @@ -16,6 +16,9 @@ declare global { webClient?: DesktopManagerInterface electronRemoteBridge?: unknown reactNativeDevice?: WebDevice + ReactNativeWebView?: { + postMessage: (message: string) => void + } platform?: Platform isClipper?: boolean @@ -91,6 +94,10 @@ const startApplication: StartApplication = async function startApplication( onDestroy={onDestroy} />, ) + + if (window.ReactNativeWebView) { + window.ReactNativeWebView.postMessage('appLoaded') + } } const domReady = document.readyState === 'complete' || document.readyState === 'interactive'