Offline support for miniapp chunks

[ra1nj]

Previously we were using cache in repack4.0, and if a device is offline , it can still load the miniapp script from local.
But after upgrade to repack5.0+moduleFederation2.0 , it seems the cache is not working , the app will always fetch the miniapp's mf-manifest.json file online, if the device is offline, it will throw a error like:

[Error: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: Failed to get manifest. #RUNTIME-003

So how to achieve offline support for miniapp ?

[jbroma]

hi @ra1nj,

currently our ResolverPlugin (a runtime plugin for MF2) is hard to extend and limited in funcionality - it does not allow for configuring local fallbacks like that on its own. We're working on adding hooks to ScriptManager in 5.1 so that you will be able to do this without overriding the plugin.

If you want to achieve the desired behaviour right now you have to to disable the default ResolverPlugin (see https://rsdoctor.dev/blog/release/release-note-1_0#next-steps), copy the ResolverPlugin implementation into your own repo and customize the resolver behaviour there.

[ra1nj]

Hi @jbroma ,
Thanks for the answer, i checked the ResolverPlugin , it added ScriptManager resolver in afterResolve hook.
But after i added some breakpoints then i found the afterResolve will only be called after the mf-manifest.json was successfully fetched, if the mf-manifest.json couldn't be fetched , the app will directly throw a error .
I found that i'm able to use the errorLoadRemote hook to handle the error, but inside the error handler , i am now using a simple fallback screen like this:

            if (args.lifecycle === 'onLoad') {
                // return args;
                return () => FallbackScreen;
            } else if (args.lifecycle === 'beforeRequest') {
                return args;
            }

Is there a way to load the script bundle previously cached in the app file sandbox ? i tried with this but not working:

const scriptId = args.id.split('/')[0];
const bundleId = RNDeviceInfo.getBundleId();
const fileSystemUrl = `file://${RNFS.LibraryDirectoryPath}/${bundleId}/scripts/${scriptId}.script.bundle`;
console.log('fileSystemUrl:',fileSystemUrl);
nativeScriptManager.loadScript(scriptId,{url:fileSystemUrl,absolute:true});

[ra1nj]

I finally manage to make it work like this : module-federation/core#3452 (comment)

yourRuntimePlugin: ()=> FederationRuntimePlugin = function () {
            name:'your-runtime-pugin',
            async fetch(manifestUrl, requestInit) {
                let res;
                try {
                    const resJSON = await fetch(manifestUrl, {
                        ...requestInit,
                    });
                    res = await resJSON.json();
                    await LocalStorage.setValue({
                        key: manifestUrl,
                        data: res,
                    });
                } catch (e) {
                    console.log('fetch manifest failed:', res);
                }

                return fetch(manifestUrl, {...requestInit});
            },
            async errorLoadRemote(args) {
                console.warn('errorLoadRemote:', args);
                
                if (args.lifecycle == 'afterResolve') {
                    const cachedManifest = await LocalStorage.getValue({
                        key: args.id
                    });
                    return cachedManifest;
                }
           }
}

[ElielC]

If i may, i have one question.

When i try to use AsyncStorage inside a runtime plugin a get an error, are you using another library to store the manifest?

[jbroma]

@ElielC runtime plugins get initialised very early in runtime. Importing AsyncStorage before RN finishes initializing might be causing that runtime error - try using inline require("AsyncStorage") instead of ESM import for AsyncStorage