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.

Sign up for GitHub

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

Jump to bottom

Consider replacing iOS WKWebView with react-native-wbkwebview #105

Closed
KoenLav opened this issue Oct 21, 2018 · 8 comments
Closed

Consider replacing iOS WKWebView with react-native-wbkwebview #105

KoenLav opened this issue Oct 21, 2018 · 8 comments
Labels
discussion A discussion relevant to react-native-webview

Comments

@KoenLav
Copy link

KoenLav commented Oct 21, 2018

It doesn't seem like a good idea to redo all the work that has already been done here:

https://github.com/CRAlpha/react-native-wkwebview

We should probably get in touch with the author and see if they want to merge their efforts into this repository (or provide it as a submodule).

They have already implemented some of the changes I proposed in another PR (notably removing window.postMessage integration) as well: CRAlpha/react-native-wkwebview@29588d4

PR: #104

@insraq @ruoyu-unity
@KoenLav KoenLav mentioned this issue Oct 21, 2018
Closed
@Titozzz
Copy link
Collaborator

Titozzz commented Oct 21, 2018

We already got in touch with them:
CRAlpha/react-native-wkwebview#191

I think it is also good to note this:
https://facebook.github.io/react-native/blog/2018/08/27/wkwebview

I think it's better to keep the whole code in one place. This package has been designed with the community participating in mind.

However, I would not want to force everyone to use a new version of the WKWebview, as it is supposed to be react-native's webview extracted on which we will iterate, and probably take back some parts from all the existing repository.
As a quick example, the solution to the bridge CRAlpha/react-native-wkwebview@29588d4 is not necessarly what we would implement over here.

I'm open to discuss this ! 😄

@KoenLav
Copy link
Author

KoenLav commented Oct 21, 2018

@Titozzz good to see! I didn't catch that.

I agree it would ideally be kept in one place, and it seems the author of the old package is willing to make that happen, so that's great!

With regard to the new iOS WebView; I assumed this repository would already be up to date with the new WKWebView from React Native?

It definitely seems sensible to extract the WKWebView from React Native first and then apply a selection of the fixes from react-native-wkwebview on top of that; I just noticed that some issues in this repository could already be fixed by changes made in that package, so thought I'd open up a wider discussion.

Maybe we can include a note about checking pre-existing WebView packages for fixes to issues in the issue reporting guidelines (which aren't setup yet)?

@Titozzz
Copy link
Collaborator

Titozzz commented Oct 21, 2018

Okay sorry I was not clear, webview HAS BEEN extracted! Nothing will probably be merged on react-native side. (or would need to be it critical and would get pulled here too). I like the idea of adding the comment to check other packages to our non existing template (we really need one) ❤️ .

I'll keep this issue opened as a reminder !

@jamonholmgren jamonholmgren added the discussion A discussion relevant to react-native-webview label Nov 7, 2018
@Titozzz Titozzz closed this as completed Feb 1, 2019
@Titozzz

This comment has been minimized.

Sign in to view
Titozzz added a commit that referenced this issue Feb 1, 2019
@Titozzz
feat(Android/iOS postMessage): refactoring the old postMessage implem…
f3bdab5 
…entation (#303)

fixes #29
fixes #272
fixes #221
fixes #105
fixes #66

BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
Titozzz pushed a commit that referenced this issue Feb 1, 2019
@semantic-release-bot
chore(release): 5.0.0 [skip ci]
2d80402 
# [5.0.0](v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](#303)) ([f3bdab5](f3bdab5)), closes [#29](#29) [#272](#272) [#221](#221) [#105](#105) [#66](#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
@Titozzz
Copy link
Collaborator

Titozzz commented Feb 1, 2019

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@indapublic
Copy link

Hello. I'm using react-native-wkwebview in my project and once thing because I can't replace it with react-native-webview is not possible to share cookies between fetch/react-native-cookies and react-native-webview (look at sendCookies property). Was it done? Probably I do something wrong?

@jamonholmgren
Copy link
Member

@indapublic We are working on it in #175 -- once we release that, you should be able to share cookies between the two.

@indapublic
Copy link

@jamonholmgren Oh, glad to hear it! Thanks

phuongwd pushed a commit to phuongwd/react-native-webview that referenced this issue Apr 29, 2020
@Titozzz
feat(Android/iOS postMessage): refactoring the old postMessage implem…
be13c51 
…entation (react-native-webview#303)

fixes react-native-webview#29
fixes react-native-webview#272
fixes react-native-webview#221
fixes react-native-webview#105
fixes react-native-webview#66

BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
phuongwd pushed a commit to phuongwd/react-native-webview that referenced this issue Apr 29, 2020
@semantic-release-bot
chore(release): 5.0.0 [skip ci]
1b59143 
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([react-native-webview#303](react-native-webview#303)) ([f3bdab5](react-native-webview@f3bdab5)), closes [react-native-webview#29](react-native-webview#29) [react-native-webview#272](react-native-webview#272) [react-native-webview#221](react-native-webview#221) [react-native-webview#105](react-native-webview#105) [react-native-webview#66](react-native-webview#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
jaynilson added a commit to jaynilson/reactNative_service_USA that referenced this issue Sep 11, 2024
@jaynilson
chore(release): 5.0.0 [skip ci]
e6ed4a0 
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01)

### Features

* **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](react-native-webview/react-native-webview#303)) ([f3bdab5](react-native-webview/react-native-webview@f3bdab5)), closes [#29](react-native-webview/react-native-webview#29) [#272](react-native-webview/react-native-webview#272) [#221](react-native-webview/react-native-webview#221) [#105](react-native-webview/react-native-webview#105) [#66](react-native-webview/react-native-webview#66)

### BREAKING CHANGES

* **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way.

Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data).

Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that:

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

Huge thanks to @jordansexton and @KoenLav!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion A discussion relevant to react-native-webview
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@indapublic @jamonholmgren @Titozzz @KoenLav