0

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 and from PWA React App to Android
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

Abubakar Rafi
  • 91
  • 13
  • What kind of communication do you need? Webview is driven to not have address bar, buttons, only load the web page – JRichardsz Jul 11 '23 at 03:38
  • Hey @JRichardsz We need to send information from Web App (PWA) to Native Android Wrapper for example there is an AUTH session going on in the PWA app now we need to send that Authorization Token back to the Native Android Wrapper so it can handle some background processes we have designed – Abubakar Rafi Jul 11 '23 at 07:57
  • Pleas update the question details: It says `from Android to PWA`. It would help if you share a hello world of this approach. – JRichardsz Jul 11 '23 at 14:06
  • @JRichardsz yeah need it both ways , i have updated the question – Abubakar Rafi Jul 17 '23 at 13:51

2 Answers2

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/"}}
/>
);
}
Babak Yaghoobi
  • 1,892
  • 9
  • 18
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:

JRichardsz
  • 14,356
  • 6
  • 59
  • 94