Epub.js - Phonegap not working because of blob URI

Question

I'm using Epub.js library to render a .epub file in a Phonegap project.

The file gets fetched and unzipped correctly, but then the screen is displayed blank if running in WebView (Works perfect in Desktop and in android browser (Chrome app)).

Debugging, I see that the iframe where the epub should be loaded doesn't work, as iframe.onload never gets called. The URL he's trying to access is blob:file%3A///85a6ce73-2b5f-430e-a908-26a7d3d830e4, so I'm guessing that could be the reason... Cordova doesn't accept blob URI schemes.

However, I don't know any workaround... I'm completely stuck there.

Answer 1

I got the solution. The answer to all "Cordova doesn't accept URI" is always "Whitelist"

With the whitelist plugin I had in my config file:

<access origin="*" />

However, debugging i saw that the blob:/file://...uri was getting blocked in shouldAllowNavigation. Then I tried with:

<access origin="*" />
<allow-navigation origin="*" />

But! it still didn't work. Debugging a bit more, I saw that the WhitelistPlugin if you add a *it doesn't allow everything, but only http://, https://and data:. Finally, adding:

<access origin="*" />
<allow-navigation href="*" />
<allow-navigation href="blob:*" />

Fixed the issue for me.

Also, just in case it's helpful for someone, while I was testing, I tried downloading the .epub file from a server and extracting it in the filesystem (/data/data/package/...) and accessing it from there. For some reason, accessing local files with XHR Requests returns status: 0, like it failed, but the response is there. I had to edit epub.js file EPUBJS.core.requestmethod to accept responses if this.response is set (instead of expecting this.statusto be 200).