React Native WebView pre-render for faster performance - how to do it?

Question

In React Native, when using the WebView component, it starts to load the external content at the moment when the component will be rendered.

To increase performance in the application, I have tried to pre-fetch the external HTML so that it is ready when the component will be rendered. It seems like it is only an actual call to the render method will cause the loading to start and this is only controlled by what is rendered on the screen. I suppose React Native has no concept of shadow DOM that could be used to call the render method a head of time. Trying to manipulate the lifecycle methods does also not work and is probably not a correct way of doing it either?

I have also tried to do a fetch() of the external HTML-content, with the right user-agent in the header, and pass the responseText to the WebComponent. This sometimes works for some sites of sources, but for others i run into ACAP (Automated Content Access Protocol) issues, to this is not the preferred solution.

Is there a way to pre-fetch external HTML content to a WebView component so that it displays faster?

Answer 1

fetch method runs on react side, fetch keep cache but that available for react apis and there component. WebView has there own caching concept. It's a browser. Caching of fetch will not avaialble for WebView. For faster loading by pre loaded data, You should fetch data by WebView instance of fetch api.

You can create a hidden WebView by setting width and height 0 and load your site on that. This will load your site on ViewView and keep cache, that will available for next time loading.

Here is a sample

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  WebView,
  Alert,
  ActivityIndicator,
} from 'react-native';

// const url = 'https://github.com/facebook/react-native'
// const url = 'https://in.yahoo.com/?p=us'
const url = 'https://www.facebook.com/'

class TestWebView extends Component {
  render() {
    var renderTime = Date.now();

    return (
      <WebView
        source={{uri: url}}
        style={{marginTop: 20, flex: 1}}
        onLoad={() => {
          Alert.alert('On load event', `Loading time : ${Date.now() - renderTime}`)
        }}
      />
    );
  }
}

export default class App extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      isLoaded: false,
    }
  }

  render() {

    if (this.state.isLoaded) {
      return (
        <TestWebView />
      )
    }

    return (
      <View style={styles.container}>
        <View style={{height: 0, width: 0}}>
          <WebView
            source={{uri: url}}
            onLoad={() => {
              this.setState({isLoaded: true})
            }}
          />
        </View>
        <ActivityIndicator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

I test this. After first time loaded data on WebView, It reduce 70% loading on actual WebView where we want to show to user.