cralpha / react-native-wkwebview Goto Github PK

Even with using sendCookies, different instances of WKWebView do not share cookies as the react-native WebWiew does. Using sendCookies works for most cookies but for some reason it does not work for session cookies set by the server.

See:
http://stackoverflow.com/questions/33156567/getting-all-cookies-from-wkwebview/34190447#34190447
http://stackoverflow.com/questions/25797972/cookie-sharing-between-multiple-wkwebviews
http://stackoverflow.com/questions/39772007/wkwebview-persistent-storage-of-cookies

Hi,

First off, thanks for all the hard work. This module looks really promising!

Now over to the issue; for some reason it does not seem to work properly with HTTP POST requests. More specifically the POST-body seems to be missing from the request.

Basically what I've done is drop this module in place of the old WebView. The only change in my code is doing import WKWebView from 'react-native-wkwebview-reborn'; and replacing my old WebView with WKWebView.

Setting the following as source on the old WebView works;

source={
        method: 'POST',
        body: `samlResponse=${encodeURIComponent(saml)}`,
        uri: authUrl
       }

But it fails on this WKWebView module.

What I'm trying to do is POST an authentication SAML to a certain URL. Just setting a breakpoint in the code I can see that the properties are set on source:

But for some reason, the samlResponse is empty on the receiving endpoint. I've also checked with Charles Proxy that the POST-body is empty.

Seems like this might be a general problem with WKWebView though:

• look here
• and here

when use postMessage, I received twice onMessasge, how to avoid this case?

usr play three website'ex: http://xxx.com/gamex.html',

i want remove one cache .so ,i use clearCacheForSingleFile, like this:

clearCacheForSingleFile('http://xxx.com/gamex.html'); ???

it's not work fine~ how i do ,pls help ~ _ ~

btw:
how set cache mode in crosswalk ? tytyty

Hi,

Is there any way to take a screenshot of web page inside the react-native-wkwebview and save it as jpg, etc?

Similar as what phantomJS offers.

Thanks!

WebView does not see any cookies from Safari. This is bug?

Additional Information

React Native version: 0.36.1
Platform: iOS

I ran a test to compare react-native's built-in WebView with react-native-wkwebview's WKWebView. The WebView executes the injected script, and the WKWebView does not appear to.

Sample code:

'use strict';

import React, {
	Component
} from 'react';
import {
	Text,
	WebView,
	View
} from 'react-native';
import Styles from './styles';
import WKWebView from 'react-native-wkwebview';


export default class Scene extends Component {
	
	render() {
		let js = `alert('test');`;
		
		return (
			<View style={Styles.SCENE}>
				
				<WKWebView style={Styles.BROWSER}
					source={{uri: `http://localhost:3000`}}
					messagingEnabled={true}
					onMessage={this.onMessage}
					injectedJavaScript={js}
				/>
				
			</View>
		);
	}
	
};

When I render a WebView, the javascript alert appears once the web page has loaded. When I render a WKWebView, the javascript alert never appears. Unless WKWebView has some kind of setting that suppresses alert, this seems prove that WKWebView's support for the injectedJavaScript prop is broken.

npm shows version 1.7.0. Git repo shows 1.6.0

Can you push the latest changes please?

As far as I understood, straining memory with WKWebView should terminate individual processes, but not crash the whole app.

Instantiating blank (ie uri: undefined) WKWebViews causes no issues. It depends on available memory how many views can a device handle. First gen. App on first iPad mini crashes already with 3 instances of WKWebView.

I tried various techniques of removing unused web views or unloading their content (ie setting their source to { uri: undefined }), however was not able to avoid the crashes.

Is there something missing in the native bridge (for example response to didReceiveMemoryWarning)? Or am I missing something? Thank you!

Reference gist: https://gist.github.com/tomasc/6e0efe94c388f293b60da1d191a1e89e

<WKWebView
ref="chart"
scrollEnabled = {false}
style={{
backgroundColor: 'red',
height: this.props.height || 400,
}}
/>

Is there currently a JS option to disable the link preview as seen here?

https://developer.apple.com/documentation/webkit/wkwebview/1415000-allowslinkpreview

when i use the js to update cookie in WKWebView, but when use react-native-cookieManager to read it is still old.

Although undocumented, the UIWebView Component implements a postMessage command to communicate also from react native into the webview.

It would be great after having the onMessage prop in place to have a communication channel for the other direction as well.

When trying to use react-native-wkwebview I noticed that sometimes props fail to get passed down. I noticed that when I set a breakpoint at https://github.com/CRAlpha/react-native-wkwebview/blob/master/ios/RCTWKWebView/RCTWKWebView.m#L57 sendCookies wasn't being set and tracing it further back, the only props set were source and style.

Here's the initial jsx:

    if (!this.state.loadedCookie) {
      return null;
    }

    if (!this.state.loggedIn && this.state.loadedCookie) {
      return (
        <View style={{marginTop: 20}}>
          <Text>Email</Text>
          <TextInput style={inputStyle} onChangeText={this.changeEmail} />
          <Text>Password</Text>
          <TextInput style={inputStyle} onChangeText={this.changePassword} />
          <Button title="Submit" onPress={this.submitLogin}>Submit</Button>
        </View>
      )
    }
    <WKWebView
        source={{url: URL_STRING}}
        ref={ref => { this.web = ref; }}
        sendCookies={true}
        style={{marginTop: 20}}
      />

It started working when I added more props:

<WKWebView
        source={{url: URL_STRING}}
        onProgress={(progress) => console.log(progress)}
        automaticallyAdjustContentInsets={true}
        ref={ref => { this.web = ref; }}
        sendCookies={true}
        style={{marginTop: 20}}
        automaticallyAdjustContentInsets={true}
        startInLoadingState={true}
      />

Additionally, when I turned on hot reloading, and changed the URL_STRING, it would refresh properly with all props set. I'm wondering if someone with more experience contributing to this can help me figure out what's causing this to fail. But as far as I can tell there seems to be some race condition on initial load.

I'm using react-native-cookies for my cookie manager. I'm running react-native on my mac OS:10.12.2 through the xcode simulator. Thanks

Is it possible to enable a navbar like the one shown below?

Within the createWebViewWithConfiguration implementation. The WkNavigationAction.request.URL always seems to be an empty string when I'm trying to open an external URL. I'm still investigating the source of the issue, but it seems that there's a pretty good chance that the issue is in this module so I've created the issue in case someone else has dealt with this. Thanks.

Note: this is not an issue with target="_blank" I've seen plenty of answers on that, but the issue is that the URL isn't even being populated.

I need to debug the webview, is there a way to see the console logs from the WebView?

We are experiencing an issue in our app. We are still building with Xcode 8.3.3 so we aren't explicitly targeting iOS 11. However, when we upload a beta to TestFlight, we check how it works in different iOS versions, and that includes the upcoming, still in beta, iOS 11.

Only on iOS 11, we see a crash when we restart the React/ReactNative portion of the app. The ReactNative framework releases all components in order to get these recreated. In the particular case of this project, we are getting a low-level crash as RCTWKWebViewManager gets destroyed.

Crashed: com.facebook.react.JavaScript
0  WebKit                         0x1918d5590 <redacted> + 464
1  WebKit                         0x1918d53dc <redacted> + 28
2  WebKit                         0x1919c9514 <redacted> + 224
3  WebKit                         0x191a6f1d8 <redacted> + 36
4  Alchemy                        0x100747120 -[RCTWKWebViewManager .cxx_destruct] (RCTWKWebViewManager.m:16)
5  libobjc.A.dylib                0x181f3eef4 object_cxxDestructFromClass(objc_object*, objc_class*) + 148
6  libobjc.A.dylib                0x181f4c638 objc_destructInstance + 88
7  libobjc.A.dylib                0x181f4c690 object_dispose + 16
8  Alchemy                        0x1006d1638 -[RCTModuleData .cxx_destruct] (RCTModuleData.mm:23)
9  libobjc.A.dylib                0x181f3eef4 object_cxxDestructFromClass(objc_object*, objc_class*) + 148
10 libobjc.A.dylib                0x181f4c638 objc_destructInstance + 88
11 libobjc.A.dylib                0x181f4c690 object_dispose + 16
12 CoreFoundation                 0x1829b3108 <redacted> + 112
13 CoreFoundation                 0x182a5a344 <redacted> + 212
14 CoreFoundation                 0x1829b3b40 <redacted> + 52
15 Alchemy                        0x1006cbedc __30-[RCTBatchedBridge invalidate]_block_invoke_2 (RCTBatchedBridge.m:728)
16 Alchemy                        0x1006c7274 -[RCTJSCExecutor executeBlockOnJavaScriptQueue:] (RCTJSCExecutor.mm:800)
17 Foundation                     0x183418a50 <redacted> + 340
18 CoreFoundation                 0x1829d4358 <redacted> + 24
19 CoreFoundation                 0x1829d42d8 <redacted> + 88
20 CoreFoundation                 0x1829d3b60 <redacted> + 204
21 CoreFoundation                 0x1829d1738 <redacted> + 1048
22 CoreFoundation                 0x1828f22d8 CFRunLoopRunSpecific + 436
23 Alchemy                        0x1006c4278 +[RCTJSCExecutor runRunLoopThread] (RCTJSCExecutor.mm:211)
24 Foundation                     0x183418860 <redacted> + 996
25 libsystem_pthread.dylib        0x18265832c <redacted> + 308
26 libsystem_pthread.dylib        0x1826581f8 _pthread_start + 310
27 libsystem_pthread.dylib        0x182656c38 thread_start + 4

We are not trying to build the project using Xcode 9 Beta. Maybe rebuilding everything for iOS 11 would fix the issue. That would imply the adapt of our Swift 3 logic to Swift 4 (which we plan to do at some point anyway). However, as there aren't guarantees that that would fix the issue, we prefer to contact the team and see if you guys have noticed this issue as well, have a better understanding of how it happens, how can be avoided.

Hello,
Im using the CRAlpha react native wkwebview,
I have a fixed set of URLs, which the user can select and which should be displayed in the webview.
It takes a very long time for the webview to display the URLs, it seems to load all the page before displaying anything, so I just see the activity wheel until the whole page is loaded.

Note: the first page load is especially slow compared to the rest.

I'd like for there to be partial loading of the page, or even a convenient way to pre load/cache URLs

Thanks a lot for your work and commitment in implementing this library.

Are you planning active supporting and maintaining it, as I can see there a couple of pull request pending merge and release.

See facebook/react-native#321 (comment)

Also solves RN core's currently lousy implementation of 2 way data communication too, between RN and webview: facebook/react-native#10941 (comment)

I linked the library with rnpm link and I always get one of two errors when trying to build. It fails on "#import <React/RCTView.h>" in RCTWKWebView.h or "#import <React/RCTViewManager.h>" in RCTWKWebViewManager.h.

This issue will probably take some time. We are not actively working on it (since we don't really use this). So any contribution is welcome. This will address some of the issues in PR #49.

1. sendCookie should actually synchronize the cookies from NSHTTPCookieStorage to document.cookie. This will enable AJAX requests to share the cookie. You can simply use document.cookie = newCookie; to set/update cookies.
2. Add a new prop like updateCookie to force an update from Set-Cookie header to NSHTTPCookieStorage. I believe Set-Cookie will eventually end up in NSHTTPCookieStorage, it's just a matter of when.
3. Maybe also expose webView:decidePolicyForNavigationResponse:decisionHandler: and WKUserScript.

Firstly, thank you for the work on this library - given the performance issues with UIWebView, I'm surprised this hasn't been merged into React Native as the default.

I was wondering whether there is a specific reason for not supporting mediaPlaybackRequiresUserAction (and/or mediaTypesRequiringUserActionForPlayback on iOS 10)? No problems if it just hasn't been added yet, but I figured it would be worth checking why it isn't currently available before I spend time implementing it or looking for workarounds.

Hi

I was wondering what the approach should be for modifying immutable properties of WKWebView, specifically it's configuration.

I want to enable the allowsInlineMediaPlayback, however it's part of the WKWebView's WKWebViewConfiguration, which is a readonly copy property, so we cannot modify it after WKWebView has been initialized.

For my specific purposes I'm going to fork and hard code it, but how would I go about exposing this properly to ReactNative?

Thanks

Element type is invalid: expected a string for built-in components or a class/function but got: undefined. Check the render method of WKWebview

I'm using the RN 0.39 version on the branch 0.5.0-for-RN0.39

This is how I loaded it:

import WKWebView from 'react-native-wkwebview-reborn';

<WKWebView
                    ref="webview"
                    onProgress={(progress) => console.log(progress)}
                    sendCookies={true}
                    source={{
                        uri: gameUri,
                        headers: {
                            'Authorization': `${token_type} ${access_token}`,
                            'Accept': 'text/html; charset=utf-8',
                            'rooplay-installid': installId
                        },
                        method: 'get'
                    }}
                    automaticallyAdjustContentInsets={true}
                    style={webView}
                    bounces={false}
                    startInLoadingState={true}
                />

ExceptionsManager.js:71Warning: Native component for "RCTWKWebView" does not existreactConsoleErrorHandler @ ExceptionsManager.js:71printWarning @ warning.js:36warning @ warning.js:60requireNativeComponent @ requireNativeComponent.js:52(anonymous function) @ WKWebView.ios.js:391loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ index.js:3loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ WebViewPage.ios.js:17loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ GameCell.js:11loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ HotPage.js:10loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ HomePage.js:9loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ WelcomePage.js:13loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ index.ios.js:13loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:116_require @ require.js:107(anonymous function) @ require-0.js:1executeApplicationScript @ debuggerWorker.js:40(anonymous function) @ debuggerWorker.js:65

So, I have an iOS app that has multiple WebViews in it. I wanted to replace the UIWebView in it, with this great WKWebView component. But I'm not sure it fulfills my needs.

When I login on the site, inside the WebView, I get an HttpOnly session cookie.
If I then display another WebView, with the same site, will it have the cookie? If I restart the app, will it have the cookie?

From my initial testing, it appears that cookies are not stored and shared at all. Is this the case? And if so, are there any plans on adding this?

According to the docs it says "Try replacing your existing WebView with WKWebView and it should work in most cases."

This works:
<WebView source={{uri: 'https://www.google.se/'}} />

This doesn't. It shows a white page with a red color on the left side, why is this?
<WKWebView source={{uri: 'https://www.google.se/'}} />

i did import WKWebView from 'react-native-wkwebview-reborn'; and also added the files to Libraries in Xcode. I have react native 0.43.2.

• test url:

    https://share.iclient.ifeng.com/shareNews?fromType=vampire&forward=1&aid=sub_24943526
      （after opening click play video）

• my code:

    _onShouldStartLoadWithRequest = (navigator) => {
        let scheme = navigator.url.split('://')[0]
        if (scheme === 'http' || scheme === 'https') {
            return true;
        }
        // intercept an invalid url: comifengnewsclient://call?type=doc&id 
       // return false not work, i got a 'NSURLErrorDomain'
        return false;
    }

Hi everyone,

More than a year ago, we have created this component as some of our webview pages (mostly some charts) have performance issues with UIWebView. Even though we don't have lots of interactions between webview and react native code, we have implemented the "bridge" functionality. As time goes by it's got much more feature requests and PRs. However, since we do not use them in our own code base, this results in following problems:

1. We cannot (battle) test those PRs in our own test infrastructure, and we are not comfortable merging them without testing.
2. Since we don't use those features, dealing with PRs has low priorities, resulting in a long backlog.

Thus we are looking to add more contributors to this project to move it forward. If you are interested, please do let us know in this thread. We will add you as the collaborators first. And then we can figure out a better governance of this project.

Hey! Good to see someone is taking this on since I don't use it now. I don't have any issue with having the project be a fork or not. However, per this comment the original MIT license and copyright notice must be preserved. Specifically:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

You're not obligated in any way to maintain a fork, or even link to the original if you don't want to, but the terms of the license require that the original license be distributed with the software. Just add your own copyright line to it as well, like this. It seems like you're more actively developing this than I am, but I'll happily pull request any updates I end up making in my own code.

I'm reopening this issue. Testing a non-alert scenario doesn't appear to work, and neither of the debugging techniques I've tried produce positive results.

On the native side, I inject a piece of JS code like this:

let js = "window.globalVariable = 'tom rules';";

return (
	<WKWebView
		source={{ uri: `file://${FS.MainBundlePath}/dist/index.html` }}
		injectedJavaScript={js}
	/>
);

Then, inside dist/index.html, I have this js:

console.log('window.globalVariable=' + window.globalVariable);

After launching the simulator, I attach Safari's debugger, and I inspect the document. The code I wanted to inject doesn't appear anywhere in the source. Thinking that maybe the injection is accomplished in a moar magical way, I click the reload button I've put in the web page (it does `window.location='./index.html'), and watch to see the console.log statement. I see this output:

window.globalVariable=undefined

At this point, I have yet to see a test case in which the injectedJavaScript prop has any effect. Any tips? How have you folks validated that it works?

I'm seeing the following error when using a require'd HTML resource as the source:

Possible Unhandled Promise Rejection (id: 0):
In this environment the sources for assign MUST be an object.This error is a performance optimization and not spec compliant.

Looks like it's due to this assign:

    var source = Object.assign({}, this.props.source || {} , { 
      sendCookies: this.props.sendCookies,
      customUserAgent: this.props.customUserAgent
    });

At this point this.props.source is an integer from the packager, and the babel version of assign doesn't like that.

https://developer.apple.com/reference/webkit/wkwebview/1414981-stoploading

Would be nice to support toggling this property, so that back/forward gestures work: https://developer.apple.com/reference/webkit/wkwebview/1414995-allowsbackforwardnavigationgestu

I'll put together a PR for this when I have some time if someone else doesn't get to it first. :)

The native WebView supports postMessage for communication between the embedded web page and the native app.

WKWebView has vastly better performance, but doesn't appear to support postMessage. For us, that's a deal-breaker. I'm investigating workarounds, but am not optimistic (I'm neither an Obj-C nor Java dev).

Please add support for postMessage.

how to work with react-native-webview-bridge

My build fails - probably because I use Expo...

Any chance for pod support?

Hi,

While the react-native-wkwebview loads the iframe content elements correctly, I cannot get the iframe elements by issuing evaluateJavaScript js code:

var ifrm = document.getElementById("iframeID");
var ifrmContent = (ifrm.contentWindow || ifrm.contentDocument);

ifrmContent.document throws js error.

How to work around this (cors)?

Thanks!

hello! thanks for your code!(sorry!forgive my English skill...)
I used RCTWKWebview for a long time and run well.But nowadays i use ten or more canvas component in my page .When I quickly slide the page it will be white screen and no response on iPhone7Plus(but iPhone6/7 runs well)
When i look for some in Xcode's console, I found this mistake:
wk unable to acquire assertion for process 0.
There seems to be a problem with memory or CPU rendering，I can't find the reason, I hope if you see can help guide，really thanks very much!!

We have to replace every header. Duplicate interface definition for class 'RCTBridge'.

The module is not working in React Native 0.40.0: facebook/react-native#11725.

Since @jordansexton is not maintaining his version anymore, maybe this repo should be in charge of the npm package?

source={{uri:this.state.uri}}
webview can setState({uri:'javascript:alert(1)'})
wkwebview can not
how could i do

Page jump headers is missing Encountered a similar problem?

Rather than having to link things ourselves (as mentioned in the readme), this package should use rnpm.

If you agree, I'd be happy to submit a pull request for this.

Hi!

Is there a reason why javaScriptEnabled is not supported?

Thanks!

react-native's official WebView uses userAgent as the property name for customization the user agent header (Android only though). see http://facebook.github.io/react-native/releases/0.43/docs/webview.html#useragent

So just wondering is there any special reason to use a different property name?

Wouldn't it better to keep the property names consistent?

Thank you.

When you try to use this link it fails with error below:

https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&isMobile=true&key=XXX&env=tartan&product=connect&selectAccount=true&clientName=Test

Same thing happens on slideshare links as well:
http://www.slideshare.net/branchmetrics/the-2016-mobile-growth-handbook-64218146

Reference: facebook/react-native#9037

WebView shouldn't trigger onLoadingError if the URL scheme itself is not supported, just like Safari.

Any ideas on how to resolve this? Also here is the code they provide using in WKWebView: https://github.com/plaid/link/blob/master/examples/wkwebview/wkwebview/LinkViewController.swift