[Workflow][Android] Provide an option to never load JS from cache

[ide]

Currently RN Android loads JS from a cache if it can't reach the bundle server. This is for teams working on hybrid apps since not everyone is running a packager. But when you're doing RN development you want to always be loading the most recent version of the code, so some option to never load from cache would be good.

[Wingie]

I'd like to take this up, (but i'm just starting out and would like some guidance)
i'm facing #2747 and i think this might be related to it.. would like to do some investigating.

i've just started diving into the code. i think the relevant code is handled by JSBundleLoader's createCachedBundleFromNetworkLoader. looking further loadScriptFromNetworkCached seems to be a native jni method? as it does react::loadScriptFromFile to actually load the bundle.

There is a comment ... loader expect JS bundle to be prefetched and stored in local file. We do that to avoid passing large strings between java and native code and avoid allocating memory in java to fit whole JS bundle in it.

I had a doubt as to where is the prefetching actually happening? and can the application be notified that the bundle on file has changed so it can update itself.
i guess this is how the autoreload would be working, but for me if i enable that - its happening continuously i.e. even without me changing any index.android.js code; so i want to debug and see why that is happening.

[qbig]

/**
   * This loader is recommended one for release version of your app. In that case local JS executor
   * should be used. JS bundle will be read from assets directory in native code to save on passing
   * large strings from java to native memory.
   */
  public static JSBundleLoader createFileLoader(
      final Context context,
      final String fileName) {
    return new JSBundleLoader() {
      @Override
      public void loadScript(ReactBridge bridge) {
        if (fileName.startsWith("assets://")) {
          bridge.loadScriptFromAssets(context.getAssets(), fileName.replaceFirst("assets://", ""));
        } else {
          bridge.loadScriptFromFile(fileName, fileName);
        }
      }

      @Override
      public String getSourceUrl() {
        return fileName;
      }
    };
  }

  /**
   * This loader is used when bundle gets reloaded from dev server. In that case loader expect JS
   * bundle to be prefetched and stored in local file. We do that to avoid passing large strings
   * between java and native code and avoid allocating memory in java to fit whole JS bundle in it.
   * Providing correct {@param sourceURL} of downloaded bundle is required for JS stacktraces to
   * work correctly and allows for source maps to correctly symbolize those.
   */
  public static JSBundleLoader createCachedBundleFromNetworkLoader(
      final String sourceURL,
      final String cachedFileLocation) {
    return new JSBundleLoader() {
      @Override
      public void loadScript(ReactBridge bridge) {
        bridge.loadScriptFromFile(cachedFileLocation, sourceURL);
      }

      @Override
      public String getSourceUrl() {
        return sourceURL;
      }
    };
  }

  /**
   * This loader is used when proxy debugging is enabled. In that case there is no point in fetching
   * the bundle from device as remote executor will have to do it anyway.
   */
  public static JSBundleLoader createRemoteDebuggerBundleLoader(
      final String sourceURL) {
    return new JSBundleLoader() {
      @Override
      public void loadScript(ReactBridge bridge) {
        bridge.loadScriptFromFile(null, sourceURL);
      }

      @Override
      public String getSourceUrl() {
        return sourceURL;
      }
    };
  }

Hi @ide . Based on the code above, can we just add an checkbox in the dev popup menu, 'load from cached [x'] and use 'null' for cachedFileLocation when we set to 'never load from cache'?

[satya164]

@qbig Probably the checkbox should go into the developer settings screen. Up for sending a pull request? ;)

[qbig]

@satya164 yup:)

[qbig]

@ide @satya164 could you help me out with this ? Seems that if I just naively passing 'null' as 'cachedFileLocation', it won't work for JSCExecutor, while it's fine for ProxyExecutor. @ide You mentioned that if RN cannot reach the dev server, it would try to read from the bundle. Is that part of the cpp native code : ?

public native void loadScriptFromFile(@Nullable String fileName, @Nullable String sourceURL);

[qbig]

  /**
   * This loader is used when bundle gets reloaded from dev server. In that case loader expect JS
   * bundle to be prefetched and stored in local file. We do that to avoid passing large strings
   * between java and native code and avoid allocating memory in java to fit whole JS bundle in it.
   * Providing correct {@param sourceURL} of downloaded bundle is required for JS stacktraces to
   * work correctly and allows for source maps to correctly symbolize those.
   */
  public static JSBundleLoader createCachedBundleFromNetworkLoader(
      final String sourceURL,
      final String cachedFileLocation) {
    return new JSBundleLoader() {
      @Override
      public void loadScript(ReactBridge bridge) {
        bridge.loadScriptFromFile(cachedFileLocation, sourceURL);
      }

      @Override
      public String getSourceUrl() {
        return sourceURL;
      }
    };
  }

@ide
Does this piece of code has anything to do with 'if failed, load from cache' as you mentioned? The comment on top seems to be talking about something else.

[ide]

It's been awhile since I looked at the code but I think you were right that this logic may be in C++. There is a native JNI function that takes both a URL and file path and loads JS -- I believe that function may be loading the JS from the file path if the URL cannot be reached.

[qbig]

Sorry ..@ide I was totally wrong. It seems that it has nothing to do with the native cpp code.
in DevSupportManager.java

public boolean hasUpToDateJSBundleInCache() {
    if (mIsDevSupportEnabled && mDevServerHelper.getShouldUseCachedBundle() && mJSBundleTempFile.exists()) {
      try {
        String packageName = mApplicationContext.getPackageName();
        PackageInfo thisPackage = mApplicationContext.getPackageManager()
            .getPackageInfo(packageName, 0);
        if (mJSBundleTempFile.lastModified() > thisPackage.lastUpdateTime) {
          // Base APK has not been updated since we donwloaded JS, but if app is using exopackage
          // it may only be a single dex that has been updated. We check for exopackage dir update
          // time in that case.
          File exopackageDir = new File(
              String.format(Locale.US, EXOPACKAGE_LOCATION_FORMAT, packageName));
          if (exopackageDir.exists()) {
            return mJSBundleTempFile.lastModified() > exopackageDir.lastModified();
          }
          return true;
        }
      } catch (PackageManager.NameNotFoundException e) {
        // Ignore this error and just fallback to loading JS from assets
        FLog.e(ReactConstants.TAG, "DevSupport is unable to get current app info");
      }
    }
    return false;
  }

[qbig]

https://developer.apple.com/library/tvos/documentation/JavaScriptCore/Reference/JSBase_header_reference/index.html#//apple_ref/c/func/JSEvaluateScript

The redbox is because I attempted to passing null as cachedFileLocation, which is used for script, when passing to JSC. But that does not work because sourceURL is merely used for exceptions.

But it works for ProxyExecutor, as ProxyExecutor(Chrome) prefer * sourceURL* and don't require script at all.

So although the interface is the same, the 2 implementation of Executor behave quite different. On top of that, the redbox information is kinda misleading. So maybe another issue for that as well.

[mkonicek]

@ide What do you want the behavior to be if the packager is not running? Added comments to this PR: #4738

[ide]

@mkonicek my desired behavior (during development) is to show a redbox saying that we couldn't download the bundle. This way if the packager is running but your phone can't connect to it (for example, if you are on a different WiFi LAN) there is no chance of loading a cached bundle by accident.

For Facebook's case where not everyone is not programming with RN yet, I think what you want is a custom JS loader that checks a flag (ex: in shared preferences) for whether you are developing with RN or not. If the flag is false, then load a JS bundle published by a CI bot and enable bundle caching. If the flag is true, then always load from packager -- never cache.

[qbig]

#4738 tackle this by changing "Dev Setting“， are you suggesting to change the behaviour otherwise ? (set flag in MainActivity or allowing both ways to change the flag) @ide @mkonicek