PhoneGap / Apache Cordova (mobile app launcher)

[leosimas]

I tested it on a Phonegap Project. Couldn't make it work yet. Does it support mobile platforms? Or maybe one day it will?

[whmccoy]

Hi Leonardo,

I'm aware of at least one company who has successfully built a native application using Readium JS via Phonegap (focused on cloud distribution of content). If you posted here and/or on the readium forum ( http://idpf.org/forums/readium) more about what specific issues you've encountered you might get a response (I am not sure that the company has publicly launched the solution).

OTOH if you are intending to make a general native app reading system that supports arbitrary EPUB content and offline use then that use case is exactly what Readium SDK is optimized for, providing more mobile optimization for things like incremental resource extraction from a ZIP archive and the ability to integrate DRM systems. In fact one might imagine to create a Phonegap project that supports a native HTML UX over Readium SDK (a Phonegap "Launcher"). There are multiple paths to explore here and the Chrome App configuration of Readium JS does imply that a full native reading system is feasible without Readium SDK but the "job" we are collectively trying to do with Readium JS is not full native mobile/tablet/desktop optimization.

And while at the present time there's a difference in the licensing arrangements - the BSD license for Readium JS being free and the commecial-friendly license to Readium SDK requiring a financial commitment to Readium Foundation - given the overall costs of developing quality native applications is multiple person-years of effort we think that the license fee should not be a major consideration in deciding to use Readium JS vs. Readium SDK, especially given that all but $5K of that fee can be waived if 3 person months of useful contributions are made.

Anyway I'd be happy to discuss about this further with you

Cheers,

--Bill bmccoy@readium.org

On Wed, Jun 25, 2014 at 8:38 PM, Leonardo notifications@github.com wrote:

I tested it on a Phonegap Project. Couldn't make it work yet. Does it support mobile platforms? Or maybe one day it will?

— Reply to this email directly or view it on GitHub https://github.com/readium/readium-js-viewer/issues/57.

[danielweck]

Technical note: cdvfile:// URL scheme (similar to Chrome's filesystem://) https://github.com/apache/cordova-plugin-file/blob/master/doc/plugins.md

[marcelomiura]

I'm having some issues trying to make it work on Android (4.4). I made it work with older versions of Readium. I updated the viewer and is no longer working. I have no errors on the log. Debugging the code, I found that the function onload of the iframe is not been called after setting the src with the blob data. In the browser it's working normally. @danielweck, my problem has something to do with your note?

[danielweck]

@marcelomiura do you mean https://github.com/readium/SDKLauncher-Android (using native C++ readium-sdk + readium-shared-js) on the develop branches? (I tested it and it works on my 4.4.4 KitKat device)

Or do you mean https://github.com/readium/readium-js-viewer (using readium-js + readium-shared-js) running in Android's Chromium-based browser?

...or do you mean a custom-built PhoneGap / Apache Cordova launcher app?

[marcelomiura]

Sorry @danielweck! I'm working with readium-js-viewer inside of a webview with Apache Cordova, running on Android 4.4.4.

[danielweck]

No problems @marcelomiura So you are utilising what we call the "cloud reader" configuration of ReadiumJS, but it is integrated in a Cordova wrapper. Well, I use the cloud reader for testing simple EPUBs, so I know it works (develop branch, but I think that master is fine too). I say "simple" EPUBs because most of our recent+current effort has been focused on the Chrome extension and the native ReadiumSDK launcher apps, so the "cloud reader" has known caveats. However the basics should work.

[marcelomiura]

I'm testing on the develop branch. (Master has some problems with layout) I had some trouble with the i18n directory too. The "_" of the directory "_locales" broke the reader. As I said, it seems that the callback onload of the iframe is not been called after setting the src with the blob data (https://github.com/readium/readium-js-viewer/blob/master/lib/Readium.js#L29003). Any suggestions?

[danielweck]

@marcelomiura in your Cordova wrapper implementation, what is the initial URI scheme used to reference an HTML document coming from the exploded EPUB archive? (e.g. file://PATH/TO/FILE or http://SERVER:PORT/PATH/TO/FILE, or cdvfile:// ?)

Some technical pointers:

Firstly, the "cloud reader" does not use the "basic iframe loader": https://github.com/readium/readium-js-viewer/blob/develop/extend_require_config.js#L20

...unlike the Chrome extension: https://github.com/readium/readium-js-viewer/blob/develop/chrome-app/extended-config.js#L21

Side note: the "basic iframe loader" utilises a normal URI that references a file location, and the "onload" event is subsequently triggered: https://github.com/readium/readium-shared-js/blob/develop/js/views/iframe_loader.js

Instead, the "cloud reader" (which is used by your Cordova wrapper) makes use of the "iIframe zip loader": https://github.com/readium/readium-js/blob/develop/epub-modules/Readium.js#L38

https://github.com/readium/readium-js/blob/develop/epub-modules/epub-fetch/src/models/iframe_zip_loader.js

The key aspect here is that the URI contents are prefetched as plain text, then fed to the _loadIframeWithDocument function, then an in-memory binary Blob URI is created and passed to the iframe@src (which subsequently triggers the "onload" event).

The reason for prefetching the HTML content is so that we can insert functionality into it prior to loading the DOM, see the fetchContentDocument function (MathJax and navigator.epubReadingSystem injection).

Also note that the "shouldConstructDomProgrammatically" boolean is true when (1) there are obfuscated fonts (in which case we have to decrypt them, and load every CSS etc. in memory), or (2) when a zip archive is loaded directly instead of an exploded EPUB. I don't think any of these two conditions affect you.

Let me know what you think / discover.

[marcelomiura]

I tryed it both ways:

• index.html - library
• simpleviewer.html?epub=epub_content/mybook - Simple viewer (I'm testing with Moby dick)

Yes, I understood the reason. Actually, loading it in memory is going to help me a lot because I need to implement DRM rules. But for now, I'm just trying to open a simple exploded epub in the readium-js-viewer. But no success until now.

The iframe is been setted with the Blob URI (blob:file%3A///5c497bf2-77c8-4fbe-b077-6ffe833e2801), but the onload callback is not been triggered.

[danielweck]

By the way, using index.html or simpleviewer.html is fine (especially for testing / debugging), but for a deployed application you can also build a minified / optimised package by invoking "grunt cloudReader" (the output goes into the "./build/cloud-reader" folder).

Regarding the "onload" failure, have you tried reading an EPUB remotely on your Android device using the default browser (not the Chrome app, but it is Chromium-based on KitKat anyway), when the server is running on your desktop machine? (e.g. http://IP_ADDRESS:8080/index.html?epub=epub_content/etc.)

[marcelomiura]

Oh, cool! I didn't know about this grunt task! Thank you! When I was working with the cloud reader before, I wrote my own task to otimize the files.

I tryed on chrome mobile browser using the same files (cordova serve), it works! With Cordova wrapper, no success yet.

[danielweck]

Nice to hear that!

Now, perhaps the Cordova wrapper doesn't trigger the iframe "onload" event because the document markup is never actually loaded? To check this, use the Web Inspector and verify the DOM contents in the iframe. If it's there, what about linked resources such as images, CSS, etc.?

If it's all there, then I suggest you add a setTimeout() to artificially trigger the iframe's "onload" callback, as a temporary measure to verify that everything else works correctly (you can use "var onlyOnceCallback = _.once(callback);" to ensure the "onload" callback is not called more than once).

[marcelomiura]

Yeah, the content is not been loaded. Debugging the application, the document data (string format) is there, but I guess that something is going bad is with the window.URL.createObjectURL or at the time to construct the Blob. (no errors on console)

[danielweck]

You could try adjusting this code: https://github.com/readium/readium-js/blob/develop/epub-modules/epub-fetch/src/models/iframe_zip_loader.js#L72

var documentDataUri = window.URL.createObjectURL(
      new Blob([contentDocumentData], {'type': contentType})
);

Perhaps check that the Blob content is valid, then maybe use window.webkitURL instead of window.URL, also try to feed the result directly into window.location.href (rather than the iframe)...I'm not familiar with Cordova though, so sorry if my suggestions are off the mark.

[marcelomiura]

Yeah, this was the part of code that I was trying to modify. webkitURL and BlobBuilder didn't work too.

I found a workaround. The treatment for IE worked for me. I guess it has something to do with constructing the Object URL for the Blob, from a file on Cordova wrapper, and not a local server.

Anyway, I appreciate your attention!

[danielweck]

Interesting to hear that iframe.contentWindow.document.open/write/close() is a workable approach for Cordova as well as Internet Explorer. We'll keep that in mind. In your opinion, could we use a "browser sniffing" routine for Cordova?

var isCordova = window.cordova && window.device && window._cordovaNative;

[marcelomiura]

I guess it would be great! But I'm not sure about this objects that you meant.

We can also look for http on the document.URL:

var isLocalFile = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;

[danielweck]

Note that there is an ApacheCordova feature branch here:

https://github.com/readium/readium-js-viewer/tree/feature/ApacheCordova

This is a simple wrapper around the "cloud reader" which ; unlike the Chrome extension ; features a static ebook library: EPUBs cannot be added / removed, there is just a predefined list of ebooks bundled / embedded into the app itself ... no real user-level backend storage.

Also, the main focus of this branch was to test Cordova's support for Windows 8.1 "universal modern apps". Support for iOS and Android should be trivial though, as these platforms can be added as regular build targets (out-of-the-box support from the Cordova toolchain).

[danielweck]

Follow-up to my above comment ( https://github.com/readium/readium-js-viewer/issues/57#issuecomment-100696995 ):

Windows 10 ApacheCordova support via WinJS is likely to continue, as Microsoft seems to be putting lots of emphasis on their "continuity" software design approach.

I need to update the feature/ApacheCordova branch to the latest RequireJS refactoring though.

[alaghusun60]

Hello, How we use https://github.com/readium/readium-js-viewer/tree/feature/ApacheCordova for android and ios phonegap. What are steps we need to follow. Whether any application already working well using phonegap on android or ios? https://github.com/readium/readium-js-viewer/blob/feature/ApacheCordova/apache-cordova/www/index.html. there is lot of js file. Which is not available. for example

[alaghusun60]

I know this working well as sdklauncher ios or sdklauncher android. But i need this in phonegap

[danielweck]

The ApacheCordova feature branch is an experiment. It is now out of date, as the main codebase has evolved since then. Also, the Windows 10 Cordova tooling in the newer Visual Studio has been updated. The iOS and Android versions can theoretically be built from the same source tree as the Windows 8/10 version, as per Apache Cordova's multi-platform target system. Also note that this feature branch demonstrates how to integrate the Readium cloud reader (without changes) into a native wrapper. It is by no means a complete implementation (e.g. there is no read/write ebook library like the one in the Readium Chrome app / extension).

[alaghusun60]

Hello, what way to integrate epub through phonegap. Can we use sdklauncher android javascript code part alone to work in phonegap? Then what are necessary things to do for that

[danielweck]

@alaghusun60 as I explained in the comment above your message, support for Apache Cordova is experimental, and uses the Readium cloud reader (ReadiumJS only, no native C++ ReadiumSDK). Contributions are welcome, please let us know if you update the current feature branch, or if you start a new implementation from scratch. Thank you!

[alaghusun60]

danielweck, I want know how we can integrate readium with windows mobile.

[alaghusun60]

danielweck, Any method we have to do for windows sdk launcher

[alaghusun60]

Hello, Can we able to do readium in windows phone

On Tue, Sep 8, 2015 at 1:07 PM, Daniel Weck notifications@github.com wrote:

@alaghusun60 https://github.com/alaghusun60 as I explained in the comment above your message, support for Apache Cordova is experimental, and uses the Readium cloud reader (ReadiumJS only, no native C++ ReadiumSDK). Contributions are welcome, please let us know if you update the current feature branch, or if you start a new implementation from scratch. Thank you!

— Reply to this email directly or view it on GitHub https://github.com/readium/readium-js-viewer/issues/57#issuecomment-138462501 .

[danielweck]

@alaghusun60 here is a good starting point: https://www.visualstudio.com/en-us/features/cordova-vs.aspx

[alaghusun60]

Hello, Yes how wen can do radium in windows phone

On Mon, Nov 2, 2015 at 6:20 PM, Daniel Weck notifications@github.com wrote:

@alaghusun60 https://github.com/alaghusun60 here is a good starting point: https://www.visualstudio.com/en-us/features/cordova-vs.aspx

— Reply to this email directly or view it on GitHub https://github.com/readium/readium-js-viewer/issues/57#issuecomment-153008536 .

[danielweck]

Basic Electron (desktop) and Apache Cordova (mobile) ReadiumJS app launchers are available in this feature branch (experimental!): https://github.com/readium/readium-js-viewer/tree/feature/electron#hybrid-application-frameworks-desktop-and-mobile However, only Android has been tested (not iOS), and the HTML5 FileSystem local storage backend fails anyway due to Web Worker limitations in Cordova (we would need to rewrite the FS abstraction layer to support multiple backends, such as another Cordova "file" plugin). Electron works well, but it's really just a demonstration of hybrid app design based on the standard ReadiumJS app launcher (no native or NodeJS functionality is actually used, it is a straight port of the Chrome reader).

[alaghusun60]

Hello, Whether radium sdklauncher android and iOS we implement the text search for entire books

On Thu, Jan 7, 2016 at 5:00 PM, Daniel Weck notifications@github.com wrote:

Basic Electron (desktop) and Apache Cordova (mobile) ReadiumJS app launchers are available in this feature branch (experimental!): https://github.com/readium/readium-js-viewer/tree/feature/electron#hybrid-application-frameworks-desktop-and-mobile However, only Android has been tested (not iOS), and the HTML5 FileSystem local storage backend fails anyway due to Web Worker limitations in Cordova (we would need to rewrite the FS abstraction layer to support multiple backends, such as another Cordova "file" plugin). Electron works well, but it's really just a demonstration of hybrid app design based on the standard ReadiumJS app launcher (no native or NodeJS functionality is actually used, it is a straight port of the cloud / web reader).

— Reply to this email directly or view it on GitHub https://github.com/readium/readium-js-viewer/issues/57#issuecomment-169635718 .

[alaghusun60]

Dear readium groups How to implement text search over entire book on readium. Which version previosly integrated. I checked all version. Still i cant find that features

On Tue, Apr 19, 2016 at 12:55 PM, Alaghu Sun alaghusun60@gmail.com wrote:

Hello, Whether radium sdklauncher android and iOS we implement the text search for entire books

On Thu, Jan 7, 2016 at 5:00 PM, Daniel Weck notifications@github.com wrote:

Basic Electron (desktop) and Apache Cordova (mobile) ReadiumJS app launchers are available in this feature branch (experimental!): https://github.com/readium/readium-js-viewer/tree/feature/electron#hybrid-application-frameworks-desktop-and-mobile However, only Android has been tested (not iOS), and the HTML5 FileSystem local storage backend fails anyway due to Web Worker limitations in Cordova (we would need to rewrite the FS abstraction layer to support multiple backends, such as another Cordova "file" plugin). Electron works well, but it's really just a demonstration of hybrid app design based on the standard ReadiumJS app launcher (no native or NodeJS functionality is actually used, it is a straight port of the cloud / web reader).

— Reply to this email directly or view it on GitHub https://github.com/readium/readium-js-viewer/issues/57#issuecomment-169635718 .

[danielweck]

@alaghusun60 please do not hijack issues with unrelated questions. Feel free to interact in the correct discussion thread, for example: https://github.com/readium/readium-js/issues/17