Moving the webview brigde to React-Native Core
alinz opened this issue Β· 94 comments
Hello guys,
I have decided that, it is time to move this project into core. one of the problem with maintaining this project is not be able to extend the native class and as a result I have to copy and paste the entire source code of WebView implementation of react-native. This makes it very difficult. So what I'm asking is goto this link and vote that one. If I get the confirmation from core-team I will make a PR request to WebView and I will merge this project to core.
@alinz it is good idea! But could you check PRs?)
This should be a core functionality for sure, but perhaps a more high level approach (e.g. executing arbitrary JS in the webview) would be more useful. I'm not sure how that would work on iOS, but I do know that would be easy to implement on Android. Writing your own bridging implementation (at least RN to webview) would be trivial if that kind of communication is possible
@goldenice RN's WebView has already implemented run arbitrary JS. what I want to add is the reverse one. WebVIew send a message back to RN. If you look into the implementation of WebView, you will see most of the important classes are inlined and because of that you can't extend it. That's what I want to do in core.
You have my vote. But approve pending PRs pretty please
+1
+1
+1
Is there a PR for the react-native core?
working on it. should be send to them by couple of days.
+1
Since I'm still behind and react-native 30 is just around the corner, I will delay this and release the new version of app this weekend. Extremely busy with other stuff but I will find a time this weekend and make it available for you guys.
+1
+1
@alinz we're waiting))
+1
+1
+1
+1
RN 0.30 is here :)
Is it including the bridge integrated?
On Thu, Jul 21, 2016 at 11:15 AM Diego Fejgelis notifications@github.com
wrote:
RN 0.30 is here :)
β
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#109 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoJSvvjF5Swi6t6IKt1bymr53AA2YQvks5qX7cvgaJpZM4I8_pF
.
doesnt seem like it...? -> release notes
+1
+1
+1 for this feature
+1
+1
+1
+1
+1
+1
+1
does it finished?
@musicode The core team haven't weighed in on whether they want this in React and there has been no public progress on integrating the code.
Hey @alinz have you found time to work on the pull request? If you need more hands let us know, I'd be glad to help if needed :)
Some news here #141
I wonder what a reasonable estimate would be on the above link getting merged? I need the functionality, but it would seem a waste to merge the different fixing branches from here only to have the functionality available in the main package shortly after.
RN releases every 2 weeks. So in 0.34 or 0.35?
Still not release. Last activity 7 days ago. π
There is an issue in this PR facebook/react-native#6478 which holds me back to send a PR to core. Core team still debating about the right API and I'm waiting for that. In a meantime, I was working on RPC implementation which significantly simplify the process of calling methods on both WebView and React-Native. Checkout out the v2 branch.
in terms of release, I won't release any version until WebView changes in react-native side.
@tioback yes, you can, v2 branch is being used in production at the moment and we are using RPC implementation on top of that. Please refer to the rpc example on that branch.
@alinz Is v2 ready on Android? I notice the README for v2 is a bit sparse, leaving out the instructions from master that I assume are still required. But it doesn't say how to specifically add the javascript asset files on both Xcode and Android, If it DOES work on Android, could you at least write up a little how to on where to put the js files so they can be loaded? Thanks!
@adamipc If you look at the example project, you can see that you need to add the two script files directly into your main project in Xcode. Haven't tested it in Android.
Agreed, that better documentation would help, but all in due time.
@Etheryte Thanks, you're right, the example project does show where to add stuff and I should be able to use that to figure it out (it does appear to have Android as well so I'll test for myself whether it works)
+1
I see that React Native has the 'injectedJavaScript' property/attribute included in WebView:
Does this deliver the same capability/objective as @alinz 's webview bridge? If not, how do they differ? (I'm still a coding noob)
@quadsurf The injectedJavaScript lets you run arbitrary javascript within the WebView but doesn't give you any mechanism for communicating between the WebView and your React Native code which is what the WebView Bridge adds.
@stereodenis, care to explain what you aimed to achieve by simply posting a link?
Itβs been added in 0.37.
wonderful! thanks to all for their great work!
ππ»
On Tue, Nov 8, 2016 at 6:45 AM Martin Mlostek notifications@github.com
wrote:
wonderful! thanks to all for their great work!
β
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#109 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoJShpqk5Eu0GewMIlvA7QsXEa3QnVHks5q8IsQgaJpZM4I8_pF
.
Please be considerate when replying to issues with many participants.
If you can, use the existing reaction functionality instead of adding a new comment, otherwise 40 people will get an email with just a thumbs-up emoji in their inbox.
Javascript alert not working in android react-native webviewοΌcan you update it for support js alert?
So do I need this package or is it already included in react-native? Above there are several messages indicating the project was added to core and then other messages saying it isn't yet.
@danielearwicker Did you try reading the docs?
@Etheryte yes! I'm playing with WebView right now. I'm wondering if this project has anything extra.
I'm still using this as RN's own is still stuck in the ivory tower: facebook/react-native#10941 (comment)
Unfortunately, as this package is getting orphaned with no merging of critical PRs.
Thanks for your work and kudos for the integration!
it seems the 'v2' branch was NOT added to React Native's mainline code. The 'rpc' feature is very interesting and exactly what I need.
@naltimari, almost that. They didn't merge the v2 branch "as is", however the feature is there.
You can still do the to and fro communication with the WebView.
@tioback the rpc feature allows me to return a promise to the 'caller' and then resolve it from inside the react app (passing the result of the function call); it's almost like a sync function call, which is what I want
@tioback @naltimari Could you direct me to where I can get to know more about this rpc feature? Is this something built in react native now ?
@sidevesh check the v2 branch of the project. The rpc allows you to offer an API to the webview so it can call methods from your app (that's what I'm working on). Unfortunately the v2 branch is still not compatible with RN40+, so I had to resort to use vext's fork of the master branch, and then implement an rpc-like feature in the injectScript
@naltimari okay thanks!!
thankyou great work, does this support cache?
so whats the status for this on react native 0.45 and above? was this integrated in core? i cant see on documentation that this supports android.
+1
+1
Hi, so any news when this will be merged into core?
+1
+1
The core WebView component has communication features now
No it doesn't. Core has a f'ed up version with .postMessage that gets overrided by websites in the wild, rendering it useless.
+1
+1
+1
FYI, the core WebView is being extracted into a new community-supported version here:
https://github.com/react-native-community/react-native-webview
If you'd like to help us create a really solid, cross-platform WebView, this is a great time to do it. β€οΈ
For sure. The whole RN community owes you @jamonholmgren a great deal in your spearheading effort there, consolidating contributions into a community developed WebView that doesn't suck for all platforms.
I'm not a native dev however so I can't help with the native side. What's the maturity of WKWebView in https://github.com/react-native-community/react-native-webview? Is it time yet to discuss a more robust postMessage, onMessage so ".postMessage (in WebView) wouldn't get overridden by websites in the wild"? This 2 way communication between RN and javascript within WebViews is what I need in my app, and I'll help with what I can in getting that done so I/we could migrate off react-native-webview-bridge.
https://github.com/CRAlpha/react-native-wkwebview seems to have a pretty robust API that's iOS for this RN<>WebView communication. But from what I remember when I tried using it, it had issues and just didn't work right in my app with message passing (I don't remember exactly how, it was a while ago). But if it works well now, it can be the basis of adoption for react-native-community/react-native-webview & expanding it for Android's side of WebView that would share the same RN<>WebView bridge api.
@fungilation Thanks for the kind words!! It's been my honor to work with so many amazing developers on this.
Is it time yet to discuss a more robust postMessage, onMessage so ".postMessage (in WebView) wouldn't get overridden by websites in the wild"?
I've heard this several times and I think it's something to consider for sure. I'd like to tackle it myself, in fact. I have some ideas, including one really interesting API I saw recently (I'll have to search for it again). Perhaps we could create an issue about it on the new repo.
I started an issue at react-native-webview/react-native-webview#66 to discuss this further.
I've written a wrapper the simplifies calling methods between react-native and the DOM.
check it out:
https://github.com/kirill578/react-native-webview-bridge-seamless
@kirill578 why your project is better than this? Are you supporting all features? if then can you send us PR to make it better?
The requirement for a project I am working on is to be able to reuse existing code written in react native within the webview. For example, an API call from the webview requires a token, while there is a function in the react project called generateToken() that will take care of refreshing and authenticating the user.
I was considering to use this library in the beginning, but as the requirements to reuse the code grew, the switch statement inside onBridgeMessage grew as well. the issue became bigger as I had to handle promise rejections inside onBridgeMessage. if the generateToken failed for some reason I had to serialize the exception and resend it via sendToBridge
at the end of the day it looked to me that there is bunch of boiler plate code, so the idea behind react-native-webview-bridge-seamless is to facilitate inter process function call, between react-native and the webview.
adding new code that can be reused now, is a single liner. and the library handles all the serialization of successful or unsuccessful function invocation, which will also support rejecting an invocation with a timeout.
Last but not least, it's built as a wrapper for react-native-webview maintained by react-native-community which has support for more features like photo picker, photo taking from the webview, which I believe is something we will have to use at some point.
Ideally it could become a PR for react-native-webview, to avoid multiple projects that do the same thing.
I found solution here is a link to stackoverflow
https://stackoverflow.com/a/58708882/11013049
Going to close this