Can't load epub from android webview (local storage)

[Djullin]

Hello ! I would like to create an app displaying an epub located inside my app assets folder. I succeed to open an epub from an url (http) but I failed when I tried to open it from the asset folder.

Here is my code :

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.setWebChromeClient(new WebChromeClient());
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setAllowContentAccess(true);
    webView.getSettings().setAllowFileAccessFromFileURLs(true);
    webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
    webView.loadUrl("file:///android_asset/readium/reader.html?epub=epub_content/myBook");
}

I wonder if I need to run this from a webserver while Readium use XMLHttpRequest but I may be wrong. Can you help me ?

[danielweck]

could you please provide a console dump (debug messages from readium-js-viewer)

[Djullin]

Hi Daniel,

Thank you for your time !

How can I do that ?

When I open the html file in chrome, I have these messages (one for each _locales json file) :

XMLHttpRequest cannot load file:///C:/Users/****/AndroidStudioProjects/test/app/src/main/assets/readium/i18n/_locales/de/messages.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

and this :

Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at Strings.js:49 at Object.execCb (require.js:1635) at Module.check (require.js:871) at Module. (require.js:1112) at require.js:129 at require.js:1155 at each (require.js:57) at Module.emit (require.js:1154) at Module.check (require.js:925)

[Djullin]

I just tried to open the reader.html file in firefox and it worked (using file:///) so I wonder if the problem is related to Chrome.

ps : I hard-coded the path to the epub in ReadiumViewerLite.js in order to exclude any parameters issues.

[Djullin]

Still investigating, it seems that this line in ReadiumViewerLite.js is the source of the problem :

require(['jquery', 'EpubReader'], function($, EpubReader)

[NicolasdeTiesenhausen]

Hello,

I'm not very good on android but i think if you have a bit of time you should look at : https://github.com/lucasferreira/react-native-webview-android/blob/master/android/src/main/java/com/burnweb/rnwebview/RNWebView.java

he wrote a webview library for react-native. It is java code and i can make my ( local) readium work with his library so maybe by looking the java code of the library you may found out a solution.

I hope it may help you.

[danielweck]

Sorry I cannot provide a straight-forward answer either, as the cloud reader app from readium-js-viewer was really only designed for web use, via HTTP(S). I hope you find a solution for file:// in Android, and please let us know how it goes! Regards, Daniel

[Djullin]

Thank you for your help.

I think the problem is that require.js loads javascript files asynchronously and this is not allowed in Chrome (and by extension, by the Webview engine based on Chrome). I think that because I can make it works on Firefox but not on Chrome using "files:///" :

"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

Maybe there is an other way to load all the javascript files without using data-main ?

When I use this, require.js is well loaded, but not ReadiumViewerLite.js. I tried to loads them using "normal" way () but nothing works.

It's so frustrating because readium has everything I need to render my epub and I think I'm very close to make it works :p