Viewing documents offline with WebViewer

There are two parts to loading WebViewer in an offline scenario: loading the web resources (e.g. JS, HTML, CSS, Web Workers, etc) and loading the actual document in the viewer. Loading the resources can be accomplished using service worker, AppCache or using local resources embedded in a native app. Then using IndexedDB makes it straightforward to save and load the actual document.

In this guide, we will be using the service worker to cache and serve WebViewer files and localforage to simplify storing and retrieving documents in web storage. This guide assumes you have some basic knowledge about service workers, so you can read this guide for an overview.

To see a complete project with the code in this guide, visit this repo.

There isn't anything special about registering a service worker for WebViewer. You can follow the exact steps to register a service worker.

After the service worker has been registered, it's time to cache WebViewer files in the service worker. Depending on the type of the documents you are going to load, not every file needs to be cached. In the root folder of the sample project, You can run the following command to generate the list of files to be cached for WebViewer:

// in the root folder
node prepare-serviceworker-list.js

This will generate a list of files in a json file in the src folder, which will be used by the service worker. Optionally, you can modify the list of files in WebViewer to be cached by the service worker according to your need.

// In your service worker file
const CACHE_NAME = 'YOUR_CACHE_NAME';
// This file is cached only because we are using this library in this guide
const localforage = 'path/to/localforage.js';

var assets = [
  '/',
  '/style.css',
  '/index.js',
  '/index.html',
  `/scripts/pwacompat.min.js`,
  `/manifest.json`,
  '/images/ic_launcher-48.png',
  '/images/ic_launcher-72.png',
  '/images/ic_launcher-96.png',
  '/images/ic_launcher-144.png',
  '/images/ic_launcher-192.png',
  '/images/ic_launcher-512.png',
  'https://fonts.googleapis.com/css?family=Roboto',
  'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600',
  'https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
  '/public/lib/webviewer.min.js',
];

async function getWorkersList() {
  try {
    const response = await fetch('/service-worker-list.json');
    const jsonData = await response.json();

    return jsonData;
  } catch(err) {
    console.error('Error fetching workers list');
  }
}

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(async function(cache) {
        const { core, ui } = await getWorkersList();
        return cache.addAll([localforage].concat(
          core,
          ui,
          assets,
        ));
      }),
  );
});

WebViewer will append a query string when requesting the worker files depending on if you are using the full API . In order for the service worker to return the correct cached files we need to set the ignoreSearch.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, { ignoreSearch: true })
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

Fetching the document and storing it as a blob are easy using the fetch API and localforage.

const store = localforage.createInstance({
  name: 'store'
});
const filePath = 'path/to/your/file';
const fileName = 'fileName';

fetch(filePath)
  .then(response => response.blob())
  .then(blob => {
    store.setItem(fileName, blob);
  })
  .catch(error => {
    console.log(error);
  });

The loadDocument API supports loading a blob so all we need to do is to get the blob from the store and call the API with it.

store
  .getItem(fileName)
  .then((blob) => {
    viewerInstance.UI.loadDocument(blob, {
      filename: fileName
    });
  });

To see a complete project with the code in this guide, visit this repo.