Add dependencies needed for warc2zim archive reading

.github/workflows/CI.yml

@@ -67,7 +67,7 @@ jobs:
         env:
           GITHUB_ACTION: ${{ github.event_name }}
         run: npm run test-e2e-chrome
-
+        
       # Disabling Edge tests for now, as they are very flaky on Linux, but pass fine on Windows
       # - name: End-to-end tests on Edge (Linux)
       #   env:
@@ -100,7 +100,7 @@ jobs:
           BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
           BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
         run: npx http-server --silent -p 8099 &
-
+          
       - name: Run BrowserStack tests on Firefox Legacy 56 / Win10
         if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
         env:
@@ -150,7 +150,7 @@ jobs:
         uses: browserstack/github-actions/setup-local@master
         with:
           local-testing: stop
-
+        
   tests-windows:
     if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
     runs-on: windows-latest
@@ -182,7 +182,7 @@ jobs:
         env:
           GITHUB_ACTION: ${{ github.event_name }}
         run: npx start-server-and-test 'http-server --silent' 8080 'npx mocha ./tests/e2e/runners/edge/microsoftEdge.e2e.runner.js --retries 2'
-
+  
       - name: End-to-end tests on Firefox (Windows)
         env:
           GITHUB_ACTION: ${{ github.event_name }}

service-worker.js

@@ -25,6 +25,9 @@
 
 /* global chrome */
 
+// Import the wabac.js Service Worker for reading warc2zim / Zimit-based archives
+self.importScripts('www/js/lib/wabac.js');
+
 /**
  * App version number - ENSURE IT MATCHES VALUE IN init.js
  * DEV: Changing this will cause the browser to recognize that the Service Worker has changed, and it will
@@ -138,6 +141,11 @@
     'www/js/lib/zimArchiveLoader.js',
     'www/js/lib/zimDirEntry.js',
     'www/js/lib/zimfile.js',
+    // Test files for loading wabac and wombat
+    'www/js/lib/load.js',
+    'www/js/lib/wabac.js',
+    'www/js/lib/wombat.js',
+    'www/topFrame.html',
     'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
     'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map',
     'node_modules/bootstrap/dist/css/bootstrap.min.css',
@@ -226,15 +234,58 @@
 // For PWA functionality, this should be true unless explicitly disabled, and in fact currently it is never disabled
 let fetchCaptureEnabled = true;
 
+/**
+ * Handle custom commands sent from app.js
+ */
+self.addEventListener('message', function (event) {
+    if (event.data.action) {
+        if (event.data.action === 'init') {
+            // On 'init' message, we initialize the outgoingMessagePort and enable the fetchEventListener
+            fetchCaptureEnabled = true;
+        } else if (event.data.action === 'disable') {
+            // On 'disable' message, we delete the outgoingMessagePort and disable the fetchEventListener
+            fetchCaptureEnabled = false;
+        }
+        var oldValue;
+        if (event.data.action.assetsCache) {
+            // Turns caching on or off (a string value of 'enable' turns it on, any other string turns it off)
+            oldValue = useAssetsCache;
+            useAssetsCache = event.data.action.assetsCache === 'enable';
+            if (useAssetsCache !== oldValue) console.debug('[SW] Use of assetsCache was switched to: ' + useAssetsCache);
+        }
+        if (event.data.action.appCache) {
+            // Enables or disables use of appCache
+            oldValue = useAppCache;
+            useAppCache = event.data.action.appCache === 'enable';
+            if (useAppCache !== oldValue) console.debug('[SW] Use of appCache was switched to: ' + useAppCache);
+        }
+        if (event.data.action === 'getCacheNames') {
+            event.ports[0].postMessage({ app: APP_CACHE, assets: ASSETS_CACHE });
+        }
+        if (event.data.action.checkCache) {
+            // Checks and returns the caching strategy: checkCache key should contain a sample URL string to test
+            testCacheAndCountAssets(event.data.action.checkCache).then(function (cacheArr) {
+                event.ports[0].postMessage({ type: cacheArr[0], name: cacheArr[1], description: cacheArr[2], count: cacheArr[3] });
+            });
+        }
+    }
+});
+
 /**
  * Intercept selected Fetch requests from the browser window
  */
-self.addEventListener('fetch', function (event) {
+// self.addEventListener('fetch', handleZIMFetchEvent);
+
+function handleZIMFetchEvent (event) {
     // Only handle GET or POST requests (POST is intended to handle video in Zimit ZIMs)
     if (!/GET|POST/.test(event.request.method)) return;
     var rqUrl = event.request.url;
     // Filter out requests that do not match the scope of the Service Worker
     if (/\/dist\/(www|[^/]+?\.zim)\//.test(rqUrl) && !/\/dist\//.test(self.registration.scope)) return;
+    if (/(^|\/)A\/load\.js$/.test(rqUrl)) {
+        // Intercept and change the path of load.js, to load if from our custom copy, instad of that provided by the ZIM file
+        rqUrl = rqUrl.replace(/^(.+?\/)[^/]+\.zim\/[CA/]+/, '$1www/js/lib/');
+    }
     var urlObject = new URL(rqUrl);
     // Test the URL with parameters removed
     var strippedUrl = urlObject.pathname;
@@ -249,7 +300,7 @@
         fromCache(cache, rqUrl).then(function (response) {
             // The response was found in the cache so we respond with it
             return response;
-        }, function () {
+        }).catch(function () {
             // The response was not found in the cache so we look for it in the ZIM
             // and add it to the cache if it is an asset type (css or js)
             // YouTube links from Zimit archives are dealt with specially
@@ -268,7 +319,7 @@
                 });
             } else {
                 // It's not an asset, or it doesn't match a ZIM URL pattern, so we should fetch it with Fetch API
-                return fetch(event.request).then(function (response) {
+                return fetch(rqUrl).then(function (response) {
                     // If request was successful, add or update it in the cache, but be careful not to cache the ZIM archive itself!
                     if (!regexpExcludedURLSchema.test(event.request.url) && !/\.zim\w{0,2}$/i.test(strippedUrl)) {
                         event.waitUntil(updateCache(APP_CACHE, rqUrl, response.clone()));
@@ -278,9 +329,31 @@
                     console.debug('[SW] Network request failed and no cache.', error);
                 });
             }
+            // var oldValue;
+            // if (event.data.action.assetsCache) {
+            //     // Turns caching on or off (a string value of 'enable' turns it on, any other string turns it off)
+            //     oldValue = useAssetsCache;
+            //     useAssetsCache = event.data.action.assetsCache === 'enable';
+            //     if (useAssetsCache !== oldValue) console.debug('[SW] Use of assetsCache was switched to: ' + useAssetsCache);
+            // }
+            // if (event.data.action.appCache) {
+            //     // Enables or disables use of appCache
+            //     oldValue = useAppCache;
+            //     useAppCache = event.data.action.appCache === 'enable';
+            //     if (useAppCache !== oldValue) console.debug('[SW] Use of appCache was switched to: ' + useAppCache);
+            // }
+            // if (event.data.action === 'getCacheNames') {
+            //     event.ports[0].postMessage({ app: APP_CACHE, assets: ASSETS_CACHE });
+            // }
+            // if (event.data.action.checkCache) {
+            //     // Checks and returns the caching strategy: checkCache key should contain a sample URL string to test
+            //     testCacheAndCountAssets(event.data.action.checkCache).then(function (cacheArr) {
+            //         event.ports[0].postMessage({ type: cacheArr[0], name: cacheArr[1], description: cacheArr[2], count: cacheArr[3] });
+            //     });
+            // }
         })
     );
-});
+}
 
 /**
  * Handle custom commands sent from app.js
@@ -302,28 +375,6 @@
             // This is because the app may be running as a PWA, and still needs to be able to fetch assets even in jQuery mode
             fetchCaptureEnabled = false;
         }
-        var oldValue;
-        if (event.data.action.assetsCache) {
-            // Turns caching on or off (a string value of 'enable' turns it on, any other string turns it off)
-            oldValue = useAssetsCache;
-            useAssetsCache = event.data.action.assetsCache === 'enable';
-            if (useAssetsCache !== oldValue) console.debug('[SW] Use of assetsCache was switched to: ' + useAssetsCache);
-        }
-        if (event.data.action.appCache) {
-            // Enables or disables use of appCache
-            oldValue = useAppCache;
-            useAppCache = event.data.action.appCache === 'enable';
-            if (useAppCache !== oldValue) console.debug('[SW] Use of appCache was switched to: ' + useAppCache);
-        }
-        if (event.data.action === 'getCacheNames') {
-            event.ports[0].postMessage({ app: APP_CACHE, assets: ASSETS_CACHE });
-        }
-        if (event.data.action.checkCache) {
-            // Checks and returns the caching strategy: checkCache key should contain a sample URL string to test
-            testCacheAndCountAssets(event.data.action.checkCache).then(function (cacheArr) {
-                event.ports[0].postMessage({ type: cacheArr[0], name: cacheArr[1], description: cacheArr[2], count: cacheArr[3] });
-            });
-        }
     }
 });
 
@@ -356,7 +407,7 @@
                 var headers = new Headers();
                 if (contentLength) headers.set('Content-Length', contentLength);
                 // Set Content-Security-Policy to sandbox the content (prevent XSS attacks from malicious ZIMs)
-                headers.set('Content-Security-Policy', "default-src 'self' data: blob: about: chrome-extension: moz-extension: https://browser-extension.kiwix.org https://kiwix.github.io 'unsafe-inline' 'unsafe-eval'; sandbox allow-scripts allow-same-origin allow-modals allow-popups allow-forms allow-downloads;");
+                // headers.set('Content-Security-Policy', "default-src 'self' data: blob: about: chrome-extension: moz-extension: https://browser-extension.kiwix.org https://kiwix.github.io 'unsafe-inline' 'unsafe-eval'; sandbox allow-scripts allow-same-origin allow-modals allow-popups allow-forms allow-downloads;");
                 headers.set('Referrer-Policy', 'no-referrer');
                 if (contentType) headers.set('Content-Type', contentType);
 

www/index.html

@@ -741,7 +741,7 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                         [<a id="stop" data-i18n="alert-activecontentwarning-part4" href="#expertSettingsDiv" class="alert-link">Permanently hide</a>]
                     </div>
                 </div>
-                <iframe id="articleContent" class="articleIFrame" src="article.html" referrerpolicy="no-referrer" sandbox="allow-same-origin allow-scripts allow-modals allow-forms allow-popups allow-downloads"></iframe>
+                <iframe id="articleContent" class="articleIFrame" src="article.html" referrerpolicy="no-referrer" sandbox="allow-same-origin allow-scripts allow-modals allow-forms allow-popups allow-downloads allow-presentation"></iframe>
             </article>
             <footer id="footer">
                 <!-- Bootstrap alert box -->