Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moving the webview brigde to React-Native Core #109

Closed
alinz opened this issue Jun 23, 2016 · 94 comments
Closed

Moving the webview brigde to React-Native Core #109

alinz opened this issue Jun 23, 2016 · 94 comments

Comments

@alinz
Copy link
Owner

alinz commented Jun 23, 2016

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.

@stereodenis
Copy link
Contributor

@alinz it is good idea! But could you check PRs?)

@goldenice
Copy link

goldenice commented Jun 23, 2016

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

@alinz
Copy link
Owner Author

alinz commented Jun 23, 2016

@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.

@stereodenis
Copy link
Contributor

@alinz #90

@fungilation
Copy link
Contributor

You have my vote. But approve pending PRs pretty please

@Naoto-Ida
Copy link

+1

2 similar comments
@Hamiltontx
Copy link

+1

@bbay
Copy link

bbay commented Jul 4, 2016

+1

@tslater
Copy link

tslater commented Jul 7, 2016

Is there a PR for the react-native core?

@alinz
Copy link
Owner Author

alinz commented Jul 7, 2016

working on it. should be send to them by couple of days.

@huangciyin
Copy link

+1

@alinz
Copy link
Owner Author

alinz commented Jul 14, 2016

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.

@CaoLiang1991
Copy link

+1

1 similar comment
@starlight36
Copy link

+1

@stereodenis
Copy link
Contributor

@alinz we're waiting))

@imlooke
Copy link

imlooke commented Jul 18, 2016

+1

3 similar comments
@benlinton
Copy link

+1

@ackdav
Copy link

ackdav commented Jul 19, 2016

+1

@HectorFL
Copy link

+1

@dfejgelis
Copy link

RN 0.30 is here :)

@fungilation
Copy link
Contributor

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
.

@ackdav
Copy link

ackdav commented Jul 22, 2016

doesnt seem like it...? -> release notes

@jd327
Copy link

jd327 commented Jul 27, 2016

+1

1 similar comment
@jzimmek
Copy link

jzimmek commented Jul 28, 2016

+1

@cbcye
Copy link

cbcye commented Aug 2, 2016

+1 for this feature

@kinergy
Copy link

kinergy commented Aug 2, 2016

+1

3 similar comments
@Roman-K93
Copy link

+1

@avishayil
Copy link

+1

@Fasani
Copy link

Fasani commented Aug 10, 2016

+1

@naltimari
Copy link

@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

@sidevesh
Copy link

sidevesh commented May 5, 2017

@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 ?

@naltimari
Copy link

@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

@sidevesh
Copy link

sidevesh commented May 6, 2017

@naltimari okay thanks!!

@aqnaruto
Copy link

thankyou great work, does this support cache?

@vvavepacket
Copy link

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.

@yanhaijing
Copy link

+1

1 similar comment
@jariwalabhavesh
Copy link

+1

@markeins
Copy link

markeins commented Sep 6, 2017

Hi, so any news when this will be merged into core?

@hughlang
Copy link

+1

1 similar comment
@neiker
Copy link

neiker commented Nov 14, 2017

+1

@NaveenDK
Copy link

@alinz , just wondering if we could use this with expo react native? Thanks

@hbarylskyi
Copy link

hbarylskyi commented Jan 23, 2018

The core WebView component has communication features now

@fungilation
Copy link
Contributor

No it doesn't. Core has a f'ed up version with .postMessage that gets overrided by websites in the wild, rendering it useless.

noahmalmed pushed a commit to noahmalmed/mobile that referenced this issue Feb 12, 2018
Eventually this functionality will get moved into core: alinz/react-native-webview-bridge#109. But leaving it out for now.
@sunny635533
Copy link

+1

2 similar comments
@bhargavb07
Copy link

+1

@alihesari
Copy link

+1

@jamonholmgren
Copy link

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. ❤️

@fungilation
Copy link
Contributor

fungilation commented Sep 29, 2018

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.

@jamonholmgren
Copy link

@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.

@fungilation
Copy link
Contributor

I started an issue at react-native-webview/react-native-webview#66 to discuss this further.

@kirill578
Copy link

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

@alinz
Copy link
Owner Author

alinz commented Mar 25, 2019

@kirill578 why your project is better than this? Are you supporting all features? if then can you send us PR to make it better?

@kirill578
Copy link

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.

@zuhairnaqi
Copy link

I found solution here is a link to stackoverflow
https://stackoverflow.com/a/58708882/11013049

@alinz
Copy link
Owner Author

alinz commented Nov 6, 2019

Going to close this

@alinz alinz closed this as completed Nov 6, 2019
Repository owner locked and limited conversation to collaborators Nov 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests