Using WebViewer offline

In this document
chevron_rightGetting started

WebViewer provides support for downloading XOD documents for offline viewing. Once a document has been downloaded it will be able to viewed without an Internet connection.

An example use case might be a user that downloads a document, loses their connection on the train but can still continue viewing the entire document. Offline mode makes use of IndexedDB or WebSQL depending on the browser. It can also make use of the HTML5 application cache to allow for (re)loading of the page completely offline.

Internet Explorer 9 does not support any of these technologies and therefore is not able to support offline mode.
Offline mode is not currently supported by WebViewer with PDFNetJS.

Getting started

The default viewer has a sample of this which can be enabled by setting the enableOfflineMode option in the WebViewer constructor.

The functions for offline mode are provided on the Document object. Before any other offline mode functions can be called you must call initOfflineDB(onComplete). You can pass in a callback function that will be called when the database has been initialized.

If you want to check if a document has already been downloaded you just need to create a new Document object with the docId passed in. For example:

var doc = new CoreControls.Document(id);
doc.initOfflineDB(function() {
  console.log(doc.isDownloaded());
});

If you want to use any other offline mode functions outside of the viewer then you'll want to first load the document using loadAsync and then call initOfflineDB. For example:

var cacheHinting = CoreControls.PartRetrievers.CacheHinting;
var partRetriever = new CoreControls.PartRetrievers.StreamingPartRetriever(fileLocation, cacheHinting.CACHE);

var doc = new CoreControls.Document(id);
doc.loadAsync(partRetriever, function(err) {
  if (err) {
    console.log(err);
    return;
  }

  doc.initOfflineDB(function() {
    // call offline mode functions here
  });
});

Downloading a document

To begin downloading a document call its storeOffline(onComplete, onProgress) function. The onComplete callback is called when the document has finished being downloaded or the download has been cancelled. The onProgress callback is called on each update in progress of the download. The fraction downloaded so far is passed in as a parameter.

doc.storeOffline(function() {
  console.log('document stored');
}, function(progress) {
  console.log('percent complete: ' + (progress * 100));
})

To programmatically cancel an ongoing download you can call the cancelOfflineModeDownload() function. It will cancel any ongoing HTTP requests for parts of the document. This could be hooked up to a button as shown in offlineReady() in ReaderControl.js.

Enabling offline viewing

To actually enable offline viewing of a document you must call it's setOfflineModeEnabled(enabled) function.

Passing in true will enable offline mode, that is, the document will be read from the offline database. Passing in false will disable it and the document will be read from the server. You can call the getOfflineModeEnabled() function to get the current state.

You will probably not want to enable offline viewing until the document has finished downloading or has been downloaded previously. To check this you can call a document's isDownloaded() function.

Loading completely offline

There is an offline library sample showing how to download and view multiple documents offline.

It uses the HTML5 application cache, so the page can be reloaded later on even without an Internet connection. It also uses WebViewer's startOffline option which allows the document to begin in offline mode and load the document from the offline database.