Implement WebViewer Offline Using Service Worker and localforage

1var viewerElement = document.getElementById('viewer');
2
3var files = [
4  '/files/webviewer-demo-annotated.xod',
5  '/files/webviewer-demo-annotated.pdf',
6  '/files/legal-contract.docx',
7];
8
9WebViewer({
10  path: '/public/lib',
11  preloadWorker: WebViewer.WorkerTypes.ALL,
12}, viewerElement).then(instance => {
13  var store = localforage.createInstance({ name: 'store' });
14  var documentsDiv = document.getElementById('documents');
15
16  files.forEach(function(file) {
17    var list = document.createElement('li');
18    var div = document.createElement('div');
19    var button = document.createElement('button');
20    var fileName = file.split('/').slice(-1)[0];
21
22    div.innerHTML = fileName;
23    button.innerHTML = 'Open';
24    button.onclick = function() {
25      if (button.innerHTML === 'Open') {
26        store
27          .getItem(fileName)
28          .then(function(blob) {
29            blob.name = fileName;
30            instance.UI.loadDocument(blob, { filename: fileName });
31          });
32      } else {
33        fetch(file)
34          .then(function(response) {
35            return response.blob();
36          })
37          .then(function(blob) {
38            store.setItem(fileName, blob);
39            button.innerHTML = 'Open';
40          })
41          .catch(() => {
42            console.log('Error fetching the file');
43          });
44      }
45    };
46
47    list.appendChild(div);
48    list.appendChild(button);
49
50    documentsDiv.appendChild(list);
51
52    // Change button text to Open if the file is cached, otherwise set the text to Download
53    store.keys().then(function(keys) {
54      if (keys.indexOf(fileName) === -1) {
55        button.innerHTML = 'Download';
56      }
57    });
58  });
59});
60
61// Register service worker
62if ('serviceWorker' in navigator) {
63  navigator.serviceWorker.register('/serviceWorker.js')
64    .then(function(registration) {
65      if (registration.installing) {
66        console.log('Service worker installing');
67      } else if (registration.waiting) {
68        console.log('Service worker installed');
69      } else if (registration.active) {
70        console.log('Service worker active');
71      }
72    }).catch(function(err) {
73      console.log('ServiceWorker registration failed: ', err);
74    });
75} else {
76  alert('This browser does not support service worker.');
77}
78
79
80
81
82
83// WPA app installer
84const Installer = function(root) {
85  let promptEvent;
86
87  const install = function(e) {
88    if(promptEvent) {
89      promptEvent.prompt();
90      promptEvent.userChoice
91        .then(function(choiceResult) {
92          // The user actioned the prompt (good or bad).
93          // good is handled in
94          promptEvent = null;
95          root.classList.remove('available');
96        })
97        .catch(function(installError) {
98          // Boo. update the UI.
99          promptEvent = null;
100          root.classList.remove('available');
101        });
102    }
103  };
104
105  const installed = function(e) {
106    promptEvent = null;
107    // This fires after onbeforinstallprompt OR after manual add to homescreen.
108    root.classList.remove('available');
109  };
110
111  const beforeinstallprompt = function(e) {
112    promptEvent = e;
113    promptEvent.preventDefault();
114    root.classList.add('available');
115    return false;
116  };
117
118  window.addEventListener('beforeinstallprompt', beforeinstallprompt);
119  window.addEventListener('appinstalled', installed);
120
121  root.addEventListener('click', install.bind(this));
122  root.addEventListener('touchend', install.bind(this));
123};
124
125
126window.addEventListener('load', function() {
127  const installEl = document.getElementById('installer');
128  const installer = new Installer(installEl);
129
130  var headerElement = document.getElementsByTagName('header')[0];
131  var asideElement = document.getElementsByTagName('aside')[0];
132
133  var menuButton = document.createElement('div');
134  menuButton.className = 'menu';
135  menuButton.onclick = function() {
136    if (asideElement.style.display === 'block') {
137      asideElement.style.display = 'none';
138    } else {
139      asideElement.style.display = 'block';
140    }
141  };
142
143
144  var div = document.createElement('div');
145  menuButton.appendChild(div);
146  menuButton.appendChild(div.cloneNode());
147  menuButton.appendChild(div.cloneNode());
148
149  headerElement.appendChild(menuButton);
150})
151