Recommendations for developing webview content on Android?

I’ve got a webview component that loads some html and javascript. The html + javascript is fairly large, and is compiled using webpack into a single page (html, javascript and css is all in one document). I’m having trouble figuring out a reasonably efficient approach to developing my web content, and could use some advice.

My webview is loaded like so:

      <WebView
        ref={inputRef}
        source={
          Platform.OS === 'ios'
            ? require('../../assets/dist/index.html')
            : { uri: 'file:///android_asset/index.html' }
        }

        style={{ height: 300 }}
        javaScriptEnabled
      />

This works on both platforms, the content is loaded and displayed as expected. The trouble comes with developing and making changes to that content.

On IOS, it’s ideal — any changes I make to index.html are automatically detected, and cause the webview to reload with the new content.

However, on Android, the only way I can see changes to ‘index.html’ is completely rebuild and redeploy the app, which makes things really difficult. I’m sure this is due to the require vs uri approaches necessary for the two platforms, but I’m not sure how to automatically deploy updates to android_assets, or if that’s even possible without rebuilding?

I could also pass the index.html content as a raw string (i.e. using source={{ html: myHtml }}) but would this impact performance if myHtml is really large?

Is there a good way to configure Android webviews to see content changes without a complete rebuild?

Answer

For what it’s worth, I ended solving this (somewhat) by running a local http server on my development machine and pointing the android web view to that:

  const sourceUri = isEmulator
    ? 'http://10.0.2.2:9000/dist/index.html'
    : 'file:///android_asset/dist/index.html';

    return (
      <WebView
        source={
          Platform.OS === 'ios' ? require('../../assets/dist/index.html') : { uri: sourceUri }
        }
        ...
      />

It doesn’t refresh automatically on change, but at least I can reload the webview without a full rebuild.