search

readium / readium-js-viewer

👁 ReadiumJS viewer: default web app for Readium.js library
BSD 3-Clause "New" or "Revised" License
550 stars 186 forks source link

Can not make readium-js working on Android webview (while working well on iOS webview) #628

Open hz0324 opened 7 years ago

hz0324 commented 7 years ago

We are trying to use Readiumjs to make a ePub reader for android and ios. Our plan is to use React Native and the Webview to write the app.

The WebView will host a single page web app and using the ReadiumJS as the core. Basically, the core code are as below: tim 20170713231428

This works very well on iOS webview, but having some undebugable problems on Android. The most obvious problem is : The iframe is attached to designated DIV, but its document is empty. At meanwhile, the TOC rendered correctly. We also fount that, it never reaches the ReadiumSDK.Events.CONTENT_DOCUMENT_LOADED event callback.

I have tried to load the cloud reader (https://readium.firebaseapp.com ) inside the webview, it has the same problem. I really don't know how to solve it, please help.

I have made some screenshots showing you guys the problem. They are from Chrome remote debug tool, showing the console for a real Android device's webview.

Here are the whole console info ( three sreenshots): tim 20170713230951

tim 20170713231001

tim 20170713231007

This one shows the correct TOC content: tim 20170713231029

This one shows the empty document under iframe: tim 20170713231115

FYI, the two devices below have the sample problem

  1. Samsung Note 4, with Android 6.0.1
  2. OnePlus 3T, with Android 7.1.1

The cloud reader is also working on the newest Chrome for Android, here is the screenshot. screenshot_20170713-233514

danielweck commented 7 years ago

Related? https://github.com/readium/readium-js-viewer/issues/599

danielweck commented 7 years ago

Please try the following fix from this Pull Request: https://github.com/readium/readium-js/pull/73 (in fact, to make things simpler in your tests, just force var isIE = true;, and check the results)

NicolasdeTiesenhausen commented 7 years ago

Hello,

I don't know if that issue is related to mine ( #599 ) but i found out a solution that worked for me so maybe i can help.

there were two problem :

we used code like this 

<html id="simpleViewer">

 <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="refresh" content="0; url=reader.html?epub=epub_content/Book">

      <link href="images/readium_favicon.png" rel="shortcut icon"/>

      <link href="images/readium-touch-icon.png" rel="apple-touch-icon"/>

    </head>

 </html>

I found out that android was not supporting ( or i don't success to make it work ) the parameter " ?epub=epub_content/Book"

So i had to modify manually the readium-js-viewer_all_LITE.js script to directly have the path to "epub_content/MyBook" without js searching it through url parameter

the mixedContentMode props from react-native webview doesn't solve my problem...

the only solution i found to make it works is to use 3rth party library : https://github.com/lucasferreira/react-native-webview-android

making a if condition( Platform.os == 'android' ) { // use android webview library } else { // use normal webview }

I don't know if all of this may help you but it is how i success to make works readium on my react-native app ( android ).

danielweck commented 7 years ago

Thank you for the tips regarding the ReactNative webview!

llemeurfr commented 7 years ago

Note that is you are willing to write a complete "receipe" for embedding Readium JS in a React Native app, useful for other developers, we'll be happy to host your post on www.edrlab.org.