Question 205435 in React native Question posted in
The official React Native documentation can be found here.

React native – React PWA (Progressive web app) with Native Android WebView Wrapper

We have developed a PWA Progressive Web App in React and we need to run background service to fetch the location of user at all the time as PWA app cannot do that so we created a native wrapper to handle this
The Native Android Wrapper is a WebView which load the PWA app url
Everything works fine till here , Now we need to do communication from Android to PWA React App
we have tried adding webView.addJavascriptInterface and the guide lines mentioned in
https://developer.android.com/reference/android/webkit/WebView
but nothing works
can any one help with suggestions or links to communicate between Native Wrapper and a PWA app

Thanks

We have tried the Guideline of Android created Bridge between Android and React PWA app but did not work
https://developer.android.com/reference/android/webkit/WebView

Tags:

2

Answers


  1. 0

    If you want send data to Webview :

    1. make a function in your React inside window like:

       function myFunc(data){
     console.log(data);
 }
 window.myFunc = myFunc;

    now in your native android code like React-Native :
    capture geo locations and send it into PWA like this:

    sendDataToPWA=()=>{
  let injectedData = `window.myFunc("Hello");`;
  this.webViewRef.injectJavaScript(injectedData);
}

render(){
return(
                <WebView
                    ref={ref = this.webViewRef=ref}
                    cacheEnabled={false}

                    bounces={false}
                    scrollEnabled={false}
                    scalesPageToFit={true}

                    userAgent={"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"}

                    // incognito={true}
                    domStorageEnabled={true}
                    startInLoadingState={true}
                    mediaPlaybackRequiresUserAction={false}
                    useWebKit={true}
                    originWhitelist={['*']}
                    allowsInlineMediaPlayback={true}
                    javaScriptEnabledAndroid={true}
                    javaScriptEnabled={true}
                    //injectedJavaScript={INJECTEDJAVASCRIPT}
                    mixedContentMode={'compatibility'}
                    onMessage={this.handleWebViewMessage}
                    onError={(syntheticEvent) => {
                        const { nativeEvent } = syntheticEvent;
                        console.log('WebView error: ');
                        console.log(nativeEvent);
                    }}
                    onLoadEnd={this.props.onLoadEnd}
                    renderLoading={() => (
                        <View style={styles.loader}>
                            <ActivityIndicator size="large" color="#d50000" />
                        </View>
                    )}

                    source={{uri:"https://sample.com/"}}
/>
);
}
    Login or Signup to reply.
  2. 0

    There are a lot of configurations and versions that you can be using, so it is too hard give the right solution.

    Here some approaches that could help you:

    Access to Javascript Storage

    If you save some key-value in the Javascript storage like the oauth2 token, according to these links you should be able to access from WebView

    Access to the url value

    If we are talking of access_token which expires, you should know that this is not a "secret" to the user. I mean this value usually should be accessed for any javascript part inside of the web page. Similar for native applications. As examples:

    • Google code grant flow, returns the auth code in the url
    • Some webpages (without backend security engine) receives the access_token in the url, store it somewhere and removes it from url

    If you understood that to have the access_token in the url in a trusted device with trusted user, is not a security concern, you could append the token to your url and then using native android the the full url with these:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search