In react native Webview I can give it HTML to render offline but I also want it to load the css and js files offline as well as handle any http traffic while offline.
I have a couple ideas so far: using something like https://github.com/remy/inliner to make the entire site dependency free, or setting up a proxy that sees an http request has been made from inside the Webview and then handles it with react native code.
What would be an easy way to set up a proxy for Webview? I found https://github.com/marcuswestin/WebViewProxy and going to be looking into it, but would really like to find something cross platform and already bridged with react native.
Related
The mobile app interface implemented via Gluon must be written in JavaFX, this is not our option, as we need to use HTML/JavaScript/CSS/Reactjs to build the interface.
So I am trying to create an webview (either UIWebView or WKWebView for iOS) in Gluon, so I can load the offline HTML asset, and then I am trying to use the method as described here (https://medium.com/#sreeharikv112/communication-from-webview-to-native-ios-android-app-6d842cefe02d) to communicate between webview and native code (Java by Gluon).
But I can't find any guide to do so in Gluon API, is that possible? How can I achieve that?
Alright after some time, I have figured out how to achieve this.
Previously I was in wrong direction, checking through all Gluon Charm-down/Attach service to look for the WebView wrapper but couldn't find.
Then I realise the WebView implementation was provided in JavaFX Port, which mean we can use JavaFX in normal way (like how we do in JavaFX desktop), so we can setup the bridge as per usual and communicate between javascript and Java.
Internally, it is using iOS UIWebView for the implementation, it is not the rework of the JavaFX WebView.
It looks like calling the googleyolo javascript object doesn't work with chrome extensions, probably because it's using an iframe with redirect under the hood, that extensions do not like.
Am I right in thinking chrome extensions are not supported? If yes, does anyone know if there is a plan to support them?
That’s correct. Currently the API expects the calling page to not run inside an extension. We may change this in the future. However you can accomplish what you want to do via a chrome tab launch to a well known page which the extension can inject content scripts into, and notify via chrome cross tab messaging after sign in.
I'm working on a project where we are using React Web and React Native. I already implemented a React Web component which allows you to load 3D models from OBJ, MTL and image files, once the model is loaded you can edit it, attach 3D labels on it and stuff, and finally save your edited 3D model back into the server, and my implementation uses THREE.js behind the scenes.
Now, the next step is to be able to retrieve these files from the server and render the edited 3D Model within a React Native app (mobile). So my question is: how should I go about doing this? I was thinking of using some embedded web view for react native so that I could reuse as much code as possible from the React Web component, and then somehow implement some sort of communication between the web view and the native app but I'm not very sure about how to actually implement this.
I've done some research so far and what I found is the following:
Native WebView for React and A bridge between webview and native app
By reading those pages I got a sense that what I want to do might be doable but I am still not really sure about how to actually implement this. How do I make the React Web component live inside a Webview, and then how do I make the injected code interact with the inner workings of my web component inside the WebView?
If my intended approach turns out not being feasible, is there any alternative approaches to render a 3D model natively in a React Native app, hopefully with a high level of abstraction comparable to that of THREE.js (some sort of THREE-like library for React Native)?
Expo, the framework in which an app is created via create-react-native-app has a GLView which provides access native OpenGL.
There's a tutorial for using Three.js in expo.
It's not proper for you to use webview to render complex contents, such as 3D models, it not well support among devices.
Though I've not write some react native app, but I've write an android app.
In the App, I tryed to use webview to render the stlloader demo of three.js projects, but with no success. And I also found mobile can render some simple 3D scene, here the webview render ability is lower than the mobile browser. Finally I use crosswalk an web engine which can added to the app. I use XWalkView of crosswalk to replace webview to render the 3D models. Here is the answer of mine about the process.
To use crosswalk in react native app, reference this:
https://github.com/iwater/react-native-crosswalk-android
https://github.com/jordansexton/react-native-webview-crosswalk
Hope it helps.
I implemented Three.js Module in HTML file. HTML file is responsible for rendering 3D Model [Here is the link to understand the same].
Now you can use react-native-wkwebview-reborn to load the html page on your device.
<WKWebView
ref={(wbref) => {
this.webview = wbref;
}}
source={{uri: 'http://localhost:8080/index.html'}}
onLoadStart={this.onLoadStart}
onLoad={this.onLoad}
onLoadEnd={this.onLoadEnd}
onError={this.onError}
renderError={this.renderError}
onMessage={this.onMessage}
scalesPageToFit
bounces={false}
scrollEnabled={false}
/>
HTML to React-Native
To post anything from your HTML file to react-native you need to postMessage().
From your HTML
window.webkit.messageHandlers.reactNative.postMessage(JSON.stringify({key: "sendMessageToReactNative"}));
window.webkit.messageHandlers.reactNative.postMessage() calls onMessage={this.onMessage} of react-native-wkwebview-reborn method.
To React-Native
onMessage = (e) => {
const message = JSON.parse(e.nativeEvent.data);
console.log(message);
};
React-Native to HTML
From your React-Native
//on some action like button click and etc..
this.webview.postMessage(JSON.stringify({key: "sendMessageToHTML"}));
In your HTML
document.addEventListener('message', function(e) {
let message = JSON.parse(e.data);
console.log(message);
})
I am building hybrid for ios using cardova. intially what cardova is doing , it is loading index.html in webview. I just want the same index.html to load in my native webview instead of cardova webview where i can use all the cardova features.
How can i go for this , what the steps for it.
Why i need this because we have some pages completly in native and 80% in hybrid. So within html i can't call my native page right but within webview i can call native also and html also. How should i do this.
You can embed a CordovaWebView into your native application. In this way you can build a native application that then also uses your Cordova hybrid pages. Check out the docs here: http://cordova.apache.org/docs/en/3.2.0/guide_platforms_ios_webview.md.html#iOS%20WebViews
You will still need to use a CordovaWebView and not the native browser or WebView though because of all of the hooks and overrides that have been made to the WebView. (You may be able to take a look at the CordovaWebView files and duplicate that but it seems like more work that you'd want to do.)
I have a site which uses microsoft mvc 3 on the server side, jQuery Mobile on the client side and I want to combine it with PhoneGap and produce executes for Android and iOS.
Is it possible?
How?
Thanks
Yes, it is possible.
If you must use Phonegap, there are a couple of things to do:
First, you must create a project corresponding to each platform , following these instructions. Once you do that, you basically copy all the client side code (js, html, css) to the www folder of your project. This is one of the reasons, the app could load faster, since it's reading its resources from the local filesystem, and not receiving them from an http connection each time.
Second, you must find a way to provide your server side data to your app. If you are already using REST services or RPC methods to populate your website, then that's done, but if not, you must start by building them, and then calling them from your client (through ajax calls from jQUery most likely), and then rendering them through javascript (you can use the multiple templating libraries out there or just plain javascript, I recommend the latter only if the UI updates are minimal).
As you can see, the second part requires quite a little bit more work. Especially if you haven't built web services before.
The other option ,which does not require phonega/cordova is to use an embedded webview. Then you wouldn't have to do anything. It would work similarly to a browser (Loading the remote URL of your site), with the added advantage of being inside and android/ios app, and you could add other views or communicate with the embedded webview using native code. If you are planning to load html files from the filesystem and not from your server, you would have to do the same thing you have to do with phonegap.
It happened to me, if you have a web app depending on server code I would go with a WebView based app, and not a Cordova app.
It's really simple to create those webviews apps for Android or IPhone.
Here you have an example for building a webview based app on android
Here you have an example for building a webview based app on IOS
Hope it helps.
If you want to reuse your site you'll need a webview that browses it.
Phonegap wouldn't be needed if you use this approach, but the application will not be as responsive as a native app, and the IPhone moderators may reject your app for that reason (it happened to me).
Another approach would be that you recreate your site as a pure Javascript application and only communicate with your servers to execute some REST Services. In this case Apache Cordova makes sense.