automatic - offline mode for webViewer not working

[smakintel]

Hi Mat,


offline mode

following code is in index.php page

$(function() {
var viewerElement = document.getElementById('viewer');
var myWebViewer = new PDFTron.WebViewer({
type: "html5,Silverlight,flash",
enableOfflineMode: true,
streaming: false
}, viewerElement);



});

as you can see I already enabled - offiline mode

enableOfflineMode: true,

when i visit , from mobile it automatically redirects to html5/MobileReaderControl.html and shows the document I load there using
following code directly in MobileReaderControl.html
--

$(document).on('viewerLoaded', function() {

var originalLoadDocument = readerControl.loadDocument('../../xod-folder/TODAY-04032015.xod','230115');


readerControl.loadDocument = function(doc) {
if (myXMLTestingFunction(doc)) {
console.log("show error");
} else {
originalLoadDocument.apply(this, arguments);
}
};

});


by right it should automatically enable offline mode (it did) but when i disable internet connection and try to view pages , no luck , pleas ehelp

Regards,

James

[Matt Parizeau]

Hi James,

When offline mode is enabled using the enableOfflineMode parameter this doesn't automatically download the entire file, however it adds some additional elements to the UI that allow it to be downloaded. In the mobile viewer if you press the menu button (three horizontal lines) you should see a button to download the file and then switch to offline mode. Once you've downloaded the file and switched to offline mode then you can disable your internet connection and continue to view the document.

If you want to have it more automatic and allow downloading of the files beforehand you can take a look at the offline library sample. This sample actually allows you to view documents even when opening the URL from a completely offline state if the user had previously visited the page.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat,

thanks for the reply,

I'm trying to enable offline mode directly on MobileReaderControl.html file

I tried to use readerControl.enableOfflineMode=true

but it was not working

can you please help

Regards,

[Matt Parizeau]

If you want to enable it all the time and you're not using WebViewer.js then you could make a small modification to MobileReaderControl.js. Find the initializeReaderControl function and at the line with new ReaderControl change it to new ReaderControl(annotationsEnabled, true) so that the offline parameter is always true.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat ,

thanks for your guidance , I have enabled the automatic offline option ( if (queryParams.getBoolean('startOffline')) {) as you said,

now I managed to implement automatic download option for the current document,

Should I make any changes in MobileReaderControl.js in order to automatically load offline version from (indexdb/websql) when i view in offline mode, 

as of now I could only see first 3-4 pages are being fetched (may be it could be pre fetched by default) , when i swipe to remaining pages in could only see loading icon

really appreciate your help on this asap , thanks

attached screen shot of index db storage and code which i used to store document offline

Regards,

Kava

[Matt Parizeau]

Thanks for attaching your code. Since you're skipping using WebViewer.js you'll need to set the startOffline variable to true yourself. If you look in MobileReaderControl.js in the loadDocument function you'll see that it checks if readerControl.startOffline is true then it will use the WebDBPartRetriever. This part retriever will load from the offline database.

So before you call loadDocument just have readerControl.startOffline = true; As long as the document is actually downloaded then this should just work.

By the way there's one thing in your code that might not be behaving the way you expect it to. When you have var originalLoadDocument = readerControl.loadDocument(docInfo.location, docInfo.id) you're actually calling the loadDocument function and assigning undefined

to originalLoadDocument (since loadDocument doesn't return anything). I would expect the code might look something like the following instead:

// originalLoadDocument is the actual loadDocument function not the result of calling it
var originalLoadDocument = readerControl.loadDocument;

readerControl.loadDocument = function(doc) {
    if (myXMLTestingFunction(doc)) {
        console.log("show error");
    } else {
        originalLoadDocument.apply(this, arguments);
    }
};

readerControl.loadDocument('../../xod-folder/magazine-04032015.xod','230115');

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat,

Thnaks againf or the advise and guidance,

I enabled as instructed by you,

now I'm getting this error

Error reading part Annots.xfdf: Part Annots.xfdf not found in the offline databaseCoreControls.js:403 h.nlCoreControls.js:29 e.Events.triggerCoreControls.js:379 (anonymous function)CoreControls.js:402 e.get.f.onsuccess

Uncaught Error: Error loading document: true

in CoreControls.js:780

I'm also not sure about first 4 items in screenshot 

I don't want to use annotation feature for this project

Regards,

kava

[Matt Parizeau]

Hi Kava,

Annots.xfdf is found in all XOD files even if there are no annotations initially. The first four items are just parts that are found in the XOD file.

It's strange that you see Annots.xfdf in your screenshot but the error says that it's not found. Can you try clearing your cache and offline databases and try again. The offline data is stored separately depending on the documentId that you specify (so that you're able to save more than one document at a time). So make sure that if you save with a certain documentId that you reload with the same one.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat,

thanks for the prompt reply,

Currently I have been using WebViewer\lib\html5\ReaderControl.html ReaderControl.html  (which is part of sample files) for my mobile platform project

i modified MobileReaderControl.js to load dynamic content along with XOD file

is it advisable to use WebViewer\lib\html5\ReaderControl.html this as sample project for my development, 

I understand that I should have used webviewer.js , but I already put lot of effort to modify ReaderControl.html according to my project and also my key implementation (solution) is part of MobileReaderControl.js

what do you suggest, what are the pros and cons of this direct approach 

also planning to integrate ReaderControl.html as UIwebviewer for android and ios 

Regards,

Kava

[Matt Parizeau]

Hi Kava,

ReaderControl.html is intended to be used on desktop devices (or more generally devices that have a mouse). MobileReaderControl.html is intended to be used on mobile devices. What WebViewer.js allows you to do is specify one html page with your document location and then it will automatically choose whether to load ReaderControl.html or MobileReaderControl.html depending on the device that is viewing.

For customizations we generally advise that if they're simple enough then you can make them using WebViewer.js. If they're more complicated then you can use a config file to run custom JavaScript and if you need very fine control then you can edit (Mobile)ReaderControl directly. Even if you make customizations directly like you've done you can still use WebViewer.js to automatically direct your users to the mobile/desktop viewer depending on where they're viewing from.

The benefit of editing the file directly is that you can customize anything you want. The downside is that it will be trickier to upgrade to new WebViewer versions because you'll have to merge your changes manually.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi MAt,

Thanks for your advise and guidance 

Sorry I'm using MobileReaderControl.html only , I mistakenly mentioned ReaderControl.html

I already tested with WebViewer.js , it does automatically directs based on device (whether mobile or desktop)

anyway still I couldn't figure out why Annots.xfdf not found error is showing when it try to load from offline db (I'm testing with chrome browser)

Shall I attach the complete code of my MobileReaderControl.html file for your review

Regards,

Kava

[Matt Parizeau]

Hi Kava,

If you could attach MobileReaderControl.html, MobileReaderControl.js and any other custom code you have that would be very helpful. Also if you could post the exact steps you take to reproduce the issue that would be helpful as well.

Thanks,

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat,

thanks for your prompt reply

I have attached MobileReaderControl.html (names as index.php) , MobileReaderControl.js , I have marked index.php with comment to indicate custom Code (just few lines of custom code to set starting page , load xod and download offline )

appreciate your support

Regards,

kava

[Matt Parizeau]

Hi Kava,

Thanks for sending your files. So the problem is occurring because you need to set the document id on readerControl when loading from the offline database. You'll notice that in storeOffline it creates a new Document object with the id. When readerControl tries to load the document it doesn't know the id of the document to look for in the offline database and so you see the error that the part isn't found.

I updated some of your code to behave how I would expect. Basically if the document is loaded it will load the document immediately from the offline database. If it isn't loaded then it will load the document normally and save to the offline database in the background. When it has finished saving it will switch to using the offline database.

var library = [
    {
        id: "230315",
        location: "myfile.xod"
    }
];

$(document).on('viewerLoaded', function() {
    readerControl.pageDisplay = readerControl.pageDisplayModes.Single;
    readerControl.setPageMode();

    var docInfo = library[0];
    readerControl.doc_id = docInfo.id;
 
    // check whether we've already downloaded this document
    checkDownloaded(docInfo.id, function(isDownloaded) {
        if (isDownloaded) {
            readerControl.startOffline = true;
            readerControl.loadDocument();
        } else {
            readerControl.loadDocument(docInfo.location);
            storeOffline(docInfo, function(err) {
                if (err) {
                    console.log('Error');
                } else {
                    var doc = readerControl.docViewer.GetDocument();
                    doc.SetOfflineModeEnabled(true);
                }
            });
        }
    });
});
   
function checkDownloaded(id, onComplete) {
    var doc = new CoreControls.Document(id);
    doc.InitOfflineDB(function() {
        onComplete(doc.IsDownloaded());
    });
}

function storeOffline(docInfo, onComplete) {  
    console.log('inside storeOffline');
   
    var cacheHinting = CoreControls.PartRetrievers.CacheHinting;
    var partRetriever = new CoreControls.PartRetrievers.HttpPartRetriever(docInfo.location, cacheHinting.CACHE);

    var doc = new CoreControls.Document(docInfo.id);
    doc.LoadAsync(partRetriever, function(err) {
        if (err) {
            onComplete(err);
            return;
        }

        doc.InitOfflineDB(function() {
            doc.StoreOffline(function() {
                onComplete();
                console.log('offline db initialized');
            });
        });
    });
}

Then in MobileReaderControl.js in the loadDocument function just remove the code that sets window.readerControl.startOffline since we're setting it in the above code.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat,

Thanks for the reply 

I implemented the solution (modified code as you suggested) , when I executed it works fine for first time (I could see offline database is stored)

When I execute 2nd time it's showing error in MobileReaderControl.js (tested with mobile and desktop - iPad safari and Chrome shows the same error) - when it tried to load from offlineDB

attached screenshot for your reference

Appreciate your support

Regards,

Kava

On Saturday, 28 March 2015 03:32:27 UTC+8, Matt Parizeau wrote:

Hi Kava,

The in MobileReaderControl.js in the loadDocument function just remove the code that sets window.readerControl.startOffline since we're setting it in the above code.

...

[Matt Parizeau]

Hi Kava,

In the loadDocument function you'll need to remove the line with window.readerControl.startOffline because the query parameter won't be there on your page and we already set that value to true in the code that I previously sent. Basically we want to make sure we use the WebDBPartRetriever if the document has already been downloaded.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Matt,

thanks ,it works well now , I have some questions

1. How is the house keeping done (for XOD files stored offline)- lets say I have unique Id of DATE for each xod files - each size 12MB to 15MB

    what is the built in house keeping mechanism to clear old dates lets say last 7 days

  may be piece of code to delete from offline db by ID when DOM loaded

2. I placed custom html content for some of the pages in MobileReaderControl (I'm dynamically replacing pages in XOD with custom HTML) -it works fine

    will it store my custom html page when it store in offline db 

appreciate your support and prompt reply

Regards,

kava

[Matt Parizeau]

Hi Kava,

1. You can delete the offline database using the indexedDB deleteDatabase function:

window.indexedDB.deleteDatabase(xod_id_here);

2. The offline database will only store all of the underlying XOD file data and doesn't know anything about any custom content that you've added. If you're dynamically loading things from your server for certain pages then you'll need to store that offline yourself in some way so that it can be retrieved later.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Mat,

thanks for the reply, we will do the housekeeping from our end

we are  facing some issues when viewing in offline with ipad and iphone

Regards,

kava

[Matt Parizeau]

Hi Kava,

As far as I understand, Safari on mobile devices can only store up to 50 MB in their offline database (see http://www.html5rocks.com/en/tutorials/offline/quota-research/#toc-safari) so unfortunately there doesn't seem to be much you can do about that.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Matt,

Thanks for the reply,

do you think using appCache manifest file to store xod file in iOS devices help to solve thi issue

Regards,

Kava

[Matt Parizeau]

Hi Kava,

From what I've read it seems like AppCache also has a limit in Mobile Safari (50MB?), but you could give it a shot and see if it helps.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[kava]

Hi Matt,

Hope you are doing well,

We are facing one issue docpub utility (linux),

I couldn't find forum for docpub, so I'm posting this here 

I recently converted some set of PDFs to HTML for our client , When I open the output HTML I could see "diamond symbol" is replaced with certain letters (in my case all "O" alphabet and some symbols (Star, bullet) has been replaced with diamond symbol)

see the attached screenshot for more information.

Note: I don't think it is font specific issue as some of the pages using the same font was fine.

Could you share from your docpub knowledge base why this happens and how it can be avoided.

Regards,

Kava

[Matt Bojey]

Hi,

Can you send the file to us to take a look at?

Thanks.