From e0edfeeb00e9fa2d56939ac3d5877042f6df6d60 Mon Sep 17 00:00:00 2001 From: Mossroy Date: Thu, 4 Aug 2022 12:45:40 +0200 Subject: [PATCH 01/36] First step to switch to SW mode by default --- www/index.html | 48 ++++++++++++++++++++++++------------------------ www/js/app.js | 6 ++++-- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/www/index.html b/www/index.html index a5f069081..f1538479d 100644 --- a/www/index.html +++ b/www/index.html @@ -299,27 +299,15 @@

Downloading and storing large archives

↑ Back to Contents

-

JQuery and ServiceWorker Modes

+

ServiceWorker and JQuery Modes

Depending on your browser or framework, this app may be capable of running in two different modes, which we call - "JQuery Mode" and "ServiceWorker Mode" for short. There is a toggle under Compatibility Settings in Configuration. + "ServiceWorker Mode" and "JQuert Mode" for short. There is a toggle under Compatibility Settings in Configuration. Here is a technical explanation of what these modes do:

↑ Back to Contents

@@ -568,18 +568,18 @@

Compatibility settings

Content injection mode

See About (Technical Information) for an explanation of the difference between these modes:

-
- -
+
+
+
diff --git a/www/js/app.js b/www/js/app.js index 7fc0bab1b..a837ef26f 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -94,10 +94,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys params['openExternalLinksInNewTabs'] = settingsStore.getItem('openExternalLinksInNewTabs') ? settingsStore.getItem('openExternalLinksInNewTabs') === 'true' : true; // A parameter to access the URL of any extension that this app was launched from params['referrerExtensionURL'] = settingsStore.getItem('referrerExtensionURL'); + // A parameter to keep track of the fact that the user has been informed of the switch to SW mode by default + params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] = settingsStore.getItem('infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'); // A parameter to set the content injection mode ('jquery' or 'serviceworker') used by this app params['contentInjectionMode'] = settingsStore.getItem('contentInjectionMode') || - // Defaults to jquery in extensions, and serviceworker if accessing as a PWA - ((/^https?:$/i.test(window.location.protocol) && isServiceWorkerAvailable()) ? 'serviceworker' : 'jquery'); + // Defaults to serviceworker mode when the API is available + (isServiceWorkerAvailable() ? 'serviceworker' : 'jquery'); // A parameter to circumvent anti-fingerprinting technology in browsers that do not support WebP natively by substituting images // directly with the canvas elements produced by the WebP polyfill [kiwix-js #835]. NB This is only currently used in jQuery mode. params['useCanvasElementsForWebpTranscoding']; // Value is determined in uiUtil.determineCanvasElementsWorkaround(), called when setting the content injection mode From 7194ee9e0fc35d792780bab22f4d7cca68b4ff22 Mon Sep 17 00:00:00 2001 From: Mossroy Date: Fri, 5 Aug 2022 20:57:05 +0200 Subject: [PATCH 02/36] Inform the user if we switch to SW mode (untested) --- www/index.html | 7 +++++++ www/js/app.js | 16 +++++++++++++++- www/js/lib/uiUtil.js | 22 ++++++++++++++++++++++ 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/www/index.html b/www/index.html index f1538479d..af1e141d4 100644 --- a/www/index.html +++ b/www/index.html @@ -666,6 +666,13 @@

Expert settings

switch to Service Worker mode if your platform supports it.  [Permanently hide] + diff --git a/www/js/app.js b/www/js/app.js index a837ef26f..ffa6ff2c2 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -95,7 +95,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // A parameter to access the URL of any extension that this app was launched from params['referrerExtensionURL'] = settingsStore.getItem('referrerExtensionURL'); // A parameter to keep track of the fact that the user has been informed of the switch to SW mode by default - params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] = settingsStore.getItem('infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'); + // If no contentInjectionMode has already been stored in the user preferences, it means we don't need to inform the user (we did not change its prefered mode) + params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] = settingsStore.getItem('infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault') || !settingsStore.getItem('contentInjectionMode'); // A parameter to set the content injection mode ('jquery' or 'serviceworker') used by this app params['contentInjectionMode'] = settingsStore.getItem('contentInjectionMode') || // Defaults to serviceworker mode when the API is available @@ -170,6 +171,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys switchHomeKeyToFocusSearchBar(); document.getElementById('bypassAppCacheCheck').checked = !params.appCache; document.getElementById('appVersion').innerHTML = 'Kiwix ' + params.appVersion; + // We check here if we have to warn the user that we switched to ServiceWorkerMode + if (isServiceWorkerAvailable() && !params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] && settingsStore.getItem('contentInjectionMode') === 'jquery') { + // It's too early to show the div, because we might need to switch to configuration section first + // And it's the last moment we can detect this need (before the injectionMode is changed) + // So we need to put that info in a variable, that will be read later + var needsToGiveInfoForContentInjectionModeSwitchToServiceWorker = true; + params.contentInjectionMode = 'serviceworker'; + } setContentInjectionMode(params.contentInjectionMode); // Define globalDropZone (universal drop area) and configDropZone (highlighting area on Config page) @@ -1506,6 +1515,11 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys if(! isDirEntryExpectedToBeDisplayed(dirEntry)){ return; } + + // Inform the user about content injection mode switch, if necessary + if (needsToGiveInfoForContentInjectionModeSwitchToServiceWorker) { + uiUtil.displayInjectionModeChangeWarning(); + } // We put the ZIM filename as a prefix in the URL, so that browser caches are separate for each ZIM file iframeArticleContent.src = "../" + selectedArchive._file.name + "/" + dirEntry.namespace + "/" + encodedUrl; diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index 60f809776..748fca513 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -268,6 +268,27 @@ define(rqDef, function(settingsStore) { }); } } + + /** + * Displays a Bootstrap warning alert with information about the injection mode change + */ + var injectionModeWarningSetup = false; + function displayInjectionModeChangeWarning() { + var alertInjectionMode = document.getElementById('switchedToServiceWorkerModeAsDefault'); + alertInjectionMode.style.display = 'block'; + if (!injectionModeWarningSetup) { + // We are setting up the injection mode switch warning for the first time + injectionModeWarningSetup = true; + alertInjectionMode.querySelector('button[data-hide]').addEventListener('click', function() { + alertInjectionMode.style.display = 'none'; + }); + document.getElementById('acknowledgeServiceWorkerModeAsDefault').addEventListener('click', function () { + alertInjectionMode.style.display = 'none'; + params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] = true; + settingsStore.setItem('infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault', true); + }); + } + } /** * Displays a Bootstrap alert box at the foot of the page to enable saving the content of the given title to the device's filesystem @@ -655,6 +676,7 @@ define(rqDef, function(settingsStore) { deriveZimUrlFromRelativeUrl: deriveZimUrlFromRelativeUrl, removeUrlParameters: removeUrlParameters, displayActiveContentWarning: displayActiveContentWarning, + displayInjectionModeChangeWarning: displayInjectionModeChangeWarning, displayFileDownloadAlert: displayFileDownloadAlert, checkUpdateStatus: checkUpdateStatus, checkServerIsAccessible: checkServerIsAccessible, From 6d0e45cf855efc6f5cc81b3d8d617d926ddc0c63 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 08:20:00 +0100 Subject: [PATCH 03/36] Clean up some typos and better formatting --- www/index.html | 52 +++++++++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/www/index.html b/www/index.html index af1e141d4..7ff728ec5 100644 --- a/www/index.html +++ b/www/index.html @@ -302,33 +302,32 @@

Downloading and storing large archives

ServiceWorker and JQuery Modes

Depending on your browser or framework, this app may be capable of running in two different modes, which we call - "ServiceWorker Mode" and "JQuert Mode" for short. There is a toggle under Compatibility Settings in Configuration. + "ServiceWorker Mode" and "JQuery Mode" for short. There is a toggle under Compatibility Settings in Configuration. Here is a technical explanation of what these modes do:

  • - ServiceWorker Mode: This is the default mode. As its name implies, it requires that the browser or framework be capable of - installing a Service Worker, which is most usually the case. It works by intercepting the browser or framework's Fetch calls (network requests) - and supplying the requested content from the ZIM. This mode requires no DOM traversal, and the content is - read and supplied as-is from the archive. Dynamic content (e.g. JavaScript) and proprietary UIs are fully - supported in this mode. It can feel initially a little slower while commonly used assets are being cached, - but it soon equals JQuery mode in speed, at least in modern browsers. However, older browsers such as IE11 are - incompatible with this mode, and the app must be running in a secure context (https:, localhost, - or certain browser extensions). While this mode is not natively supported in Mozilla (Firefox) browser - extensions, we provide a functional workaround by re-launching the extension as a Progressive Web App (PWA). - Note that this mode cannot run with the file: protocol (but only IE11 and old Edge allow the app to run - by launching index.html from the file system). + ServiceWorker Mode: This is the default mode. As its name implies, it requires that the browser or + framework be capable of installing a Service Worker, which is usually the case in modern browsers. It works + by intercepting the browser or framework's Fetch calls (network requests) and supplying the requested content + from the ZIM. This mode requires no DOM traversal, and the content is read and supplied as-is from the archive. + Dynamic content (e.g. JavaScript) and proprietary UIs are fully supported in this mode. It can feel initially a + little slower while commonly used assets are being cached, but it soon equals JQuery mode in speed, at least in + modern browsers. However, older browsers such as IE11 are incompatible with this mode, and the app must be running + in a secure context (https:, localhost, or certain browser extensions). While this mode + is not natively supported in Mozilla (Firefox) browser extensions, we provide a functional workaround by re-launching + the extension as a Progressive Web App (PWA). Note that this mode cannot run with the file: protocol + (but only IE11 and old Edge allow the app to run by launching index.html from the file system).
  • - JQuery Mode: This mode is deprecated (and does not in fact require JQuery). It should however be fine - for everyday use with Wikipedia / WikiMedia archives. It is a way of inserting articles extracted from the - ZIM into the DOM (browser document) by injecting the content into an iframe or tab. We then use - native DOM methods, or sometimes JQuery, to parse the article's HTML and insert required assets - (images, stylesheets, event listeners for hyperlinks, etc.). On old devices, DOM traversal can be slow, - but it is compensated for because we do not extract or run JavaScript assets (which would be technically - extremely complicated). As a result, for WikiMedia archives this mode is usually quite fast. On the downside, - ZIMs that have a proprietary dynamic UI (such as Gutenberg or TED talks) are only partially supported in this - mode: the UI does not work, but articles can be searched for and loaded from the search bar. This mode is - compatible with older browsers and frameworks. + JQuery Mode: This mode is deprecated (and does not in fact require JQuery). It should, however, be fine + for everyday use with Wikipedia / WikiMedia archives with non-dynamic content. It is a way of inserting articles + extracted from the ZIM into the DOM (browser document) by injecting the content into an iframe or tab. We then use + native DOM methods, or sometimes JQuery, to parse the article's HTML and insert required assets (images, stylesheets, + event listeners for hyperlinks, etc.). On old devices, DOM traversal can be slow, but it is compensated for because + we do not extract or run JavaScript assets (which would be technically extremely complicated). As a result, for + WikiMedia archives this mode is usually quite fast. On the downside, ZIMs that have a proprietary dynamic UI (such as + Gutenberg or TED talks) are only partially supported in this mode: the UI does not work, but articles can be searched + for and loaded from the search bar. This mode is compatible with older browsers and frameworks.

@@ -576,7 +575,7 @@

Compatibility settings

-
From 84128407f22b0114b238652141429ee3a1f9fc6b Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 13:26:30 +0100 Subject: [PATCH 04/36] Simplify variable naming --- www/js/app.js | 11 +++++------ www/js/lib/uiUtil.js | 4 ++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index ffa6ff2c2..646954ae1 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -96,7 +96,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys params['referrerExtensionURL'] = settingsStore.getItem('referrerExtensionURL'); // A parameter to keep track of the fact that the user has been informed of the switch to SW mode by default // If no contentInjectionMode has already been stored in the user preferences, it means we don't need to inform the user (we did not change its prefered mode) - params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] = settingsStore.getItem('infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault') || !settingsStore.getItem('contentInjectionMode'); + params['injectionModeChangeAlertDisplayed'] = settingsStore.getItem('injectionModeChangeAlertDisplayed') || !settingsStore.getItem('contentInjectionMode'); // A parameter to set the content injection mode ('jquery' or 'serviceworker') used by this app params['contentInjectionMode'] = settingsStore.getItem('contentInjectionMode') || // Defaults to serviceworker mode when the API is available @@ -172,12 +172,11 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys document.getElementById('bypassAppCacheCheck').checked = !params.appCache; document.getElementById('appVersion').innerHTML = 'Kiwix ' + params.appVersion; // We check here if we have to warn the user that we switched to ServiceWorkerMode - if (isServiceWorkerAvailable() && !params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] && settingsStore.getItem('contentInjectionMode') === 'jquery') { + if (isServiceWorkerAvailable() && !params['injectionModeChangeAlertDisplayed'] && !settingsStore.getItem('contentInjectionMode')) { // It's too early to show the div, because we might need to switch to configuration section first // And it's the last moment we can detect this need (before the injectionMode is changed) // So we need to put that info in a variable, that will be read later - var needsToGiveInfoForContentInjectionModeSwitchToServiceWorker = true; - params.contentInjectionMode = 'serviceworker'; + var displayInjectionModeChangeAlert = true; } setContentInjectionMode(params.contentInjectionMode); @@ -1517,8 +1516,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } // Inform the user about content injection mode switch, if necessary - if (needsToGiveInfoForContentInjectionModeSwitchToServiceWorker) { - uiUtil.displayInjectionModeChangeWarning(); + if (displayInjectionModeChangeAlert) { + uiUtil.displayInjectionModeChangeAlert(); } // We put the ZIM filename as a prefix in the URL, so that browser caches are separate for each ZIM file diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index 748fca513..b82fda0c9 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -273,7 +273,7 @@ define(rqDef, function(settingsStore) { * Displays a Bootstrap warning alert with information about the injection mode change */ var injectionModeWarningSetup = false; - function displayInjectionModeChangeWarning() { + function displayInjectionModeChangeAlert() { var alertInjectionMode = document.getElementById('switchedToServiceWorkerModeAsDefault'); alertInjectionMode.style.display = 'block'; if (!injectionModeWarningSetup) { @@ -676,7 +676,7 @@ define(rqDef, function(settingsStore) { deriveZimUrlFromRelativeUrl: deriveZimUrlFromRelativeUrl, removeUrlParameters: removeUrlParameters, displayActiveContentWarning: displayActiveContentWarning, - displayInjectionModeChangeWarning: displayInjectionModeChangeWarning, + displayInjectionModeChangeAlert: displayInjectionModeChangeAlert, displayFileDownloadAlert: displayFileDownloadAlert, checkUpdateStatus: checkUpdateStatus, checkServerIsAccessible: checkServerIsAccessible, From d5a2ada504e97c0f2bea79a8313f7ca896786f93 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 14:21:06 +0100 Subject: [PATCH 05/36] Complete variable name simplification --- www/js/lib/uiUtil.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index b82fda0c9..e4a2a7999 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -284,8 +284,8 @@ define(rqDef, function(settingsStore) { }); document.getElementById('acknowledgeServiceWorkerModeAsDefault').addEventListener('click', function () { alertInjectionMode.style.display = 'none'; - params['infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault'] = true; - settingsStore.setItem('infoGivenForContentInjectionModeSwitchToServiceWorkerByDefault', true); + params.injectionModeChangeAlertDisplayed = true; + settingsStore.setItem('injectionModeChangeAlertDisplayed', true); }); } } From b7a7e29d62cb76d9e6b18ce8b28de368dd5f03ee Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 14:21:34 +0100 Subject: [PATCH 06/36] Edit switching logic --- www/js/app.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 646954ae1..7525a4bde 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -95,8 +95,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // A parameter to access the URL of any extension that this app was launched from params['referrerExtensionURL'] = settingsStore.getItem('referrerExtensionURL'); // A parameter to keep track of the fact that the user has been informed of the switch to SW mode by default - // If no contentInjectionMode has already been stored in the user preferences, it means we don't need to inform the user (we did not change its prefered mode) - params['injectionModeChangeAlertDisplayed'] = settingsStore.getItem('injectionModeChangeAlertDisplayed') || !settingsStore.getItem('contentInjectionMode'); + params['injectionModeChangeAlertDisplayed'] = settingsStore.getItem('injectionModeChangeAlertDisplayed'); // A parameter to set the content injection mode ('jquery' or 'serviceworker') used by this app params['contentInjectionMode'] = settingsStore.getItem('contentInjectionMode') || // Defaults to serviceworker mode when the API is available @@ -172,11 +171,15 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys document.getElementById('bypassAppCacheCheck').checked = !params.appCache; document.getElementById('appVersion').innerHTML = 'Kiwix ' + params.appVersion; // We check here if we have to warn the user that we switched to ServiceWorkerMode - if (isServiceWorkerAvailable() && !params['injectionModeChangeAlertDisplayed'] && !settingsStore.getItem('contentInjectionMode')) { + // This is only needed if the Service Worker mode is available, but the user's settings are stuck on jQuery mode, + // and the user has not already been alerted about the switch to Service Worker mode by default + if (isServiceWorkerAvailable() && params.contentInjectionMode === 'jquery' && !params.injectionModeChangeAlertDisplayed) { // It's too early to show the div, because we might need to switch to configuration section first // And it's the last moment we can detect this need (before the injectionMode is changed) // So we need to put that info in a variable, that will be read later var displayInjectionModeChangeAlert = true; + // Attempt to upgrade user to Service Worker mode (will happen in the line after this enclosure) + params.contentInjectionMode = 'serviceworker'; } setContentInjectionMode(params.contentInjectionMode); From ee68e2b8ab5f0ab249b68439e6095d7e58a66676 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 15:33:20 +0100 Subject: [PATCH 07/36] Remove bootstrap code and use systemAlert --- www/index.html | 8 -------- www/js/app.js | 35 ++++++++++++++++++++++++----------- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/www/index.html b/www/index.html index 7ff728ec5..cd60108bc 100644 --- a/www/index.html +++ b/www/index.html @@ -665,14 +665,6 @@

Expert settings

switch to Service Worker mode if your platform supports it.  [Permanently hide] - diff --git a/www/js/app.js b/www/js/app.js index 7525a4bde..2659a02d7 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -174,12 +174,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // This is only needed if the Service Worker mode is available, but the user's settings are stuck on jQuery mode, // and the user has not already been alerted about the switch to Service Worker mode by default if (isServiceWorkerAvailable() && params.contentInjectionMode === 'jquery' && !params.injectionModeChangeAlertDisplayed) { - // It's too early to show the div, because we might need to switch to configuration section first - // And it's the last moment we can detect this need (before the injectionMode is changed) - // So we need to put that info in a variable, that will be read later - var displayInjectionModeChangeAlert = true; - // Attempt to upgrade user to Service Worker mode (will happen in the line after this enclosure) + // Attempt to upgrade user to Service Worker mode params.contentInjectionMode = 'serviceworker'; + } else if (params.contentInjectionMode === 'serviceworker') { + // User is already in SW mode, so we will never need to display the upgrade alert + params.injectionModeChangeAlertDisplayed = true; + settingsStore.setItem('injectionModeChangeAlertDisplayed', true, Infinity); } setContentInjectionMode(params.contentInjectionMode); @@ -584,6 +584,23 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys iframeContentWindow.removeEventListener('keydown', focusPrefixOnHomeKey); } } + + /** + * Checks whether we need to display an alert that the default Content Injection Mode has now been switched to Service Worker Mode + */ + function checkAndDisplayInjectionModeChangeAlert() { + if (!params.injectionModeChangeAlertDisplayed && isServiceWorkerAvailable() && isServiceWorkerReady()) { + uiUtil.systemAlert('

We have switched you to ServiceWorker mode (this is now the default). ' + + 'It supports more types of ZIM archives and is much more robust.

' + + '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + + 'In that case, please report the problems you experienced to us (see About section).

', + 'Change of default content injection mode' + ); + params.injectionModeChangeAlertDisplayed = true; + settingsStore.setItem('injectionModeChangeAlertDisplayed', true, Infinity); + } + } + /** * Displays or refreshes the API status shown to the user */ @@ -638,9 +655,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys decompAPIStatusDiv.innerHTML = 'Decompressor API: ' + apiName; // Add a warning colour to the API Status Panel if any of the above tests failed apiStatusPanel.classList.add(apiPanelClass); - // Set visibility of UI elements according to mode document.getElementById('bypassAppCacheDiv').style.display = params.contentInjectionMode === 'serviceworker' ? 'block' : 'none'; + // Check to see whether we need to alert the user that we have switched to Service Worker mode by default + if (!params.injectionModeChangeAlertDisplayed) setTimeout(checkAndDisplayInjectionModeChangeAlert, 1500); } /** @@ -1518,11 +1536,6 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys return; } - // Inform the user about content injection mode switch, if necessary - if (displayInjectionModeChangeAlert) { - uiUtil.displayInjectionModeChangeAlert(); - } - // We put the ZIM filename as a prefix in the URL, so that browser caches are separate for each ZIM file iframeArticleContent.src = "../" + selectedArchive._file.name + "/" + dirEntry.namespace + "/" + encodedUrl; } else { From 27fb93cd85cb2f816de97ba0a54b6c7eaba1694f Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 16:39:28 +0100 Subject: [PATCH 08/36] Change variable descriptor and add preliminary support for moz-extension --- www/js/app.js | 22 ++++++++++++---------- www/js/lib/uiUtil.js | 4 ++-- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 2659a02d7..e53e0a6d8 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -95,7 +95,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // A parameter to access the URL of any extension that this app was launched from params['referrerExtensionURL'] = settingsStore.getItem('referrerExtensionURL'); // A parameter to keep track of the fact that the user has been informed of the switch to SW mode by default - params['injectionModeChangeAlertDisplayed'] = settingsStore.getItem('injectionModeChangeAlertDisplayed'); + params['defaultModeChangeAlertDisplayed'] = settingsStore.getItem('defaultModeChangeAlertDisplayed'); // A parameter to set the content injection mode ('jquery' or 'serviceworker') used by this app params['contentInjectionMode'] = settingsStore.getItem('contentInjectionMode') || // Defaults to serviceworker mode when the API is available @@ -171,15 +171,17 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys document.getElementById('bypassAppCacheCheck').checked = !params.appCache; document.getElementById('appVersion').innerHTML = 'Kiwix ' + params.appVersion; // We check here if we have to warn the user that we switched to ServiceWorkerMode - // This is only needed if the Service Worker mode is available, but the user's settings are stuck on jQuery mode, - // and the user has not already been alerted about the switch to Service Worker mode by default - if (isServiceWorkerAvailable() && params.contentInjectionMode === 'jquery' && !params.injectionModeChangeAlertDisplayed) { + // This is only needed if the Service Worker mode is available, or we are in a Firefox Extension that supports Service Worker + // outside of the extension environment, AND the user's settings are stuck on jQuery mode, AND the user has not already been + // alerted about the switch to Service Worker mode by default + if ((isServiceWorkerAvailable() || isMessageChannelAvailable() && /^moz-extension:/i.test(window.location.protocol)) + && params.contentInjectionMode === 'jquery' && !params.defaultModeChangeAlertDisplayed) { // Attempt to upgrade user to Service Worker mode params.contentInjectionMode = 'serviceworker'; } else if (params.contentInjectionMode === 'serviceworker') { // User is already in SW mode, so we will never need to display the upgrade alert - params.injectionModeChangeAlertDisplayed = true; - settingsStore.setItem('injectionModeChangeAlertDisplayed', true, Infinity); + params.defaultModeChangeAlertDisplayed = true; + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); } setContentInjectionMode(params.contentInjectionMode); @@ -589,15 +591,15 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys * Checks whether we need to display an alert that the default Content Injection Mode has now been switched to Service Worker Mode */ function checkAndDisplayInjectionModeChangeAlert() { - if (!params.injectionModeChangeAlertDisplayed && isServiceWorkerAvailable() && isServiceWorkerReady()) { + if (!params.defaultModeChangeAlertDisplayed && isServiceWorkerAvailable() && isServiceWorkerReady()) { uiUtil.systemAlert('

We have switched you to ServiceWorker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

' + '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

', 'Change of default content injection mode' ); - params.injectionModeChangeAlertDisplayed = true; - settingsStore.setItem('injectionModeChangeAlertDisplayed', true, Infinity); + params.defaultModeChangeAlertDisplayed = true; + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); } } @@ -658,7 +660,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // Set visibility of UI elements according to mode document.getElementById('bypassAppCacheDiv').style.display = params.contentInjectionMode === 'serviceworker' ? 'block' : 'none'; // Check to see whether we need to alert the user that we have switched to Service Worker mode by default - if (!params.injectionModeChangeAlertDisplayed) setTimeout(checkAndDisplayInjectionModeChangeAlert, 1500); + if (!params.defaultModeChangeAlertDisplayed) setTimeout(checkAndDisplayInjectionModeChangeAlert, 1500); } /** diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index e4a2a7999..e19382b3d 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -284,8 +284,8 @@ define(rqDef, function(settingsStore) { }); document.getElementById('acknowledgeServiceWorkerModeAsDefault').addEventListener('click', function () { alertInjectionMode.style.display = 'none'; - params.injectionModeChangeAlertDisplayed = true; - settingsStore.setItem('injectionModeChangeAlertDisplayed', true); + params.defaultModeChangeAlertDisplayed = true; + settingsStore.setItem('defaultModeChangeAlertDisplayed', true); }); } } From c0c92e046780096fb9acd9d682e0c86ab390adf8 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 17:11:10 +0100 Subject: [PATCH 09/36] Conditional messaging for FF extension --- www/js/app.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index e53e0a6d8..374b67ff7 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -592,7 +592,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys */ function checkAndDisplayInjectionModeChangeAlert() { if (!params.defaultModeChangeAlertDisplayed && isServiceWorkerAvailable() && isServiceWorkerReady()) { - uiUtil.systemAlert('

We have switched you to ServiceWorker mode (this is now the default). ' + + uiUtil.systemAlert('

We have switched you to Service Worker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

' + '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

', @@ -946,12 +946,17 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // DEV: See explanation below for why we access localStorage directly here var PWASuccessfullyLaunched = localStorage.getItem(params.keyPrefix + 'PWA_launch') === 'success'; var allowInternetAccess = settingsStore.getItem('allowInternetAccess') === 'true'; - var message = 'To enable the Service Worker, we need one-time access to our secure server ' + - 'so that the app can re-launch as a Progressive Web App (PWA).

' + - 'The PWA will be able to run offline, but will auto-update periodically when online ' + - 'as per the Service Worker spec.

' + - 'You can switch back any time by returning to JQuery mode.

' + - 'WARNING: This will attempt to access the following server:
' + params.PWAServer + '
'; + var message = params.defaultModeChangeAlertDisplayed ? + '

We are switching you to Service Worker mode (this is now the default). ' + + 'It supports more types of ZIM archives and is much more robust.

We ' : '

To enable the Service Worker, we '; + message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA).

' + + '

The PWA will be able to run offline, but will auto-update periodically when online ' + + 'as per the Service Worker spec.

'; + message += (params.defaultModeChangeAlertDisplayed ? + '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + + 'In that case, please report the problems you experienced to us (see About section).

' : + '

You can switch back any time by returning to JQuery mode.

') + + '

WARNING: This will attempt to access the following server:
' + params.PWAServer + '

'; var launchPWA = function () { uiUtil.spinnerDisplay(false); var uriParams = '?contentInjectionMode=serviceworker&allowInternetAccess=true'; From ce65bf9ed4532e6043f324b1d49afcdd8b1b62b7 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 17:11:38 +0100 Subject: [PATCH 10/36] Deal with default mode change alert if FF extension has launched PWA --- www/js/init.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/www/js/init.js b/www/js/init.js index 5a7dce2c0..a8ca913bd 100644 --- a/www/js/init.js +++ b/www/js/init.js @@ -39,6 +39,8 @@ params['keyPrefix'] = 'kiwixjs-' if (/PWA_launch=/.test(window.location.search)) { var match = /PWA_launch=([^&]+)/.exec(window.location.search); localStorage.setItem(params.keyPrefix + 'PWA_launch', match[1]); + // If we have successfully launched the PWA, we can prevent future default mode change alerts + if (match[1] === 'success') localStorage.setItem(params.keyPrefix + 'defaultModeChangeAlertDisplayed', true); console.warn('Launch of PWA has been registered as "' + match[1] + '" by the extension. Exiting local code.'); } else { From 7b5bac1582335919404bf0252dc1f1fe1bcf2d88 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 17:21:36 +0100 Subject: [PATCH 11/36] Deal with case where use cancels switch to SW mode --- www/js/app.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 374b67ff7..16c70cb04 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -950,8 +950,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys '

We are switching you to Service Worker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

We ' : '

To enable the Service Worker, we '; message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA).

' + - '

The PWA will be able to run offline, but will auto-update periodically when online ' + - 'as per the Service Worker spec.

'; + '

The PWA will be able to run offline, but will auto-update periodically when online as per the Service Worker spec.

'; message += (params.defaultModeChangeAlertDisplayed ? '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

' : @@ -1006,8 +1005,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys if (response) { checkPWAIsOnline(); } else { + // User cancelled, so wants to stay in JQuery mode setContentInjectionMode('jquery'); settingsStore.setItem('allowInternetAccess', false, Infinity); + // We should not bother user with the default mode change alert again + params.defaultModeChangeAlertDisplayed = true; + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity) } }); } From c24e3db383da69a0a7a09c00e530be6d2ced588b Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 17:42:14 +0100 Subject: [PATCH 12/36] Fix inverted messaging instructions! --- www/js/app.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 16c70cb04..ec9aafc46 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -946,15 +946,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // DEV: See explanation below for why we access localStorage directly here var PWASuccessfullyLaunched = localStorage.getItem(params.keyPrefix + 'PWA_launch') === 'success'; var allowInternetAccess = settingsStore.getItem('allowInternetAccess') === 'true'; - var message = params.defaultModeChangeAlertDisplayed ? - '

We are switching you to Service Worker mode (this is now the default). ' + - 'It supports more types of ZIM archives and is much more robust.

We ' : '

To enable the Service Worker, we '; + var message = params.defaultModeChangeAlertDisplayed ? '

To enable the Service Worker, we ' : + ('

We are switching you to Service Worker mode (this is now the default). ' + + 'It supports more types of ZIM archives and is much more robust.

We '); message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA).

' + '

The PWA will be able to run offline, but will auto-update periodically when online as per the Service Worker spec.

'; - message += (params.defaultModeChangeAlertDisplayed ? - '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + - 'In that case, please report the problems you experienced to us (see About section).

' : - '

You can switch back any time by returning to JQuery mode.

') + + message += (params.defaultModeChangeAlertDisplayed ? '

You can switch back any time by returning to JQuery mode.

' : + ('

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + + 'In that case, please report the problems you experienced to us (see About section).

')) + '

WARNING: This will attempt to access the following server:
' + params.PWAServer + '

'; var launchPWA = function () { uiUtil.spinnerDisplay(false); From c5ed6b156e0b96f1d5bb36dcc6c47e0b1f4ff632 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 17:52:15 +0100 Subject: [PATCH 13/36] Set PWA server to development PWA --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index ec9aafc46..f17d4f44b 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -74,7 +74,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys params['appVersion'] = '3.6-WIP'; // **IMPORTANT** Ensure this is the same as the version number in service-worker.js // The PWA server (currently only for use with the Mozilla extension) params['PWAServer'] = 'https://moz-extension.kiwix.org/current/'; // Include final slash! - // params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages + params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages // params['PWAServer'] = 'http://localhost:8080/'; // DEV: Uncomment this line (and adjust) for local testing // A parameter to determine the Settings Store API in use params['storeType'] = settingsStore.getBestAvailableStorageAPI(); From 897e024409f8d02539322564b4d81bd28ed3be55 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 18:33:17 +0100 Subject: [PATCH 14/36] Add messaging for when SW mode is unsupported --- www/js/app.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index f17d4f44b..9b6fe96f7 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -591,13 +591,22 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys * Checks whether we need to display an alert that the default Content Injection Mode has now been switched to Service Worker Mode */ function checkAndDisplayInjectionModeChangeAlert() { + var message; if (!params.defaultModeChangeAlertDisplayed && isServiceWorkerAvailable() && isServiceWorkerReady()) { - uiUtil.systemAlert('

We have switched you to Service Worker mode (this is now the default). ' + + message = ['

We have switched you to Service Worker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

' + '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

', - 'Change of default content injection mode' - ); + 'Change of default content injection mode']; + } else if (!params.defaultModeChangeAlertDisplayed && params.contentInjectionMode === 'jquery') { + message = ['

Your browser or platform does not appear to support Service Worker mode, which is now the default for this app.

' + + '

You can continue to use the app in the (now deprecated) JQuery mode, but please note that this mode only works well with ' + + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or (for now) Stackexchange.

' + + '

If you are able, we strongly recommend that you update your browser to a version that supports Service Worker mode.

', + 'Service Worker mode unsupported']; + } + if (message) { + uiUtil.systemAlert(message[0], message[1]); params.defaultModeChangeAlertDisplayed = true; settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); } From 65fa5467e39fd08e88fad6fdf2e52226f200319d Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 20:59:32 +0100 Subject: [PATCH 15/36] Add some handling for reverting to jQuery mode --- www/js/app.js | 4 ++-- www/js/init.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 9b6fe96f7..ba99fa56e 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -139,7 +139,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } // If we are in the PWA version launched from an extension, send a 'success' message to the extension if (params.referrerExtensionURL && ~window.location.href.indexOf(params.PWAServer)) { - var message = '?PWA_launch=success'; + var message = '?PWA_launch=' + (isServiceWorkerAvailable() ? 'success' : 'nosw'); // DEV: To test failure of the PWA, you could pause on next line and set message to '?PWA_launch=fail' // Note that, as a failsafe, the PWA_launch key is set to 'fail' (in the extension) before each PWA launch // so we need to send a 'success' message each time the PWA is launched @@ -824,7 +824,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else if (value === 'serviceworker') { var protocol = window.location.protocol; // Since Firefox 103, the ServiceWorker API is not available any more in Webextensions. See https://hg.mozilla.org/integration/autoland/rev/3a2907ad88e8 and https://bugzilla.mozilla.org/show_bug.cgi?id=1593931 - // Previously, the API was available, but failed to register (which we could trap a fews lines below). + // Previously, the API was available, but failed to register (which we could trap a few lines below). // So we now need to suggest a switch to the PWA if we are inside a Firefox Extension and the ServiceWorker API is unavailable. // Even if some older firefox versions do not support ServiceWorkers at all (versions 42, 43, 45ESR, 52ESR, 60ESR and 68ESR, based on https://caniuse.com/serviceworkers). In this case, the PWA will not work either. if (protocol === 'moz-extension:' && !isServiceWorkerAvailable()) { diff --git a/www/js/init.js b/www/js/init.js index a8ca913bd..e70a7ef6a 100644 --- a/www/js/init.js +++ b/www/js/init.js @@ -39,8 +39,8 @@ params['keyPrefix'] = 'kiwixjs-' if (/PWA_launch=/.test(window.location.search)) { var match = /PWA_launch=([^&]+)/.exec(window.location.search); localStorage.setItem(params.keyPrefix + 'PWA_launch', match[1]); - // If we have successfully launched the PWA, we can prevent future default mode change alerts - if (match[1] === 'success') localStorage.setItem(params.keyPrefix + 'defaultModeChangeAlertDisplayed', true); + // If we have successfully launched the PWA (even if there was no SW mode available), we prevent future default mode change alerts + if (match[1] !== 'fail') localStorage.setItem(params.keyPrefix + 'defaultModeChangeAlertDisplayed', true); console.warn('Launch of PWA has been registered as "' + match[1] + '" by the extension. Exiting local code.'); } else { From f2b203ae6d76162a6c5ee19c5b03d2941c10b5ba Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 21:44:46 +0100 Subject: [PATCH 16/36] Attempt to jump straight back to jQuery mode --- www/js/app.js | 11 ++++++++--- www/js/init.js | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index ba99fa56e..f5fc3f89a 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -139,7 +139,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } // If we are in the PWA version launched from an extension, send a 'success' message to the extension if (params.referrerExtensionURL && ~window.location.href.indexOf(params.PWAServer)) { - var message = '?PWA_launch=' + (isServiceWorkerAvailable() ? 'success' : 'nosw'); + var message = '?PWA_launch=success'; // DEV: To test failure of the PWA, you could pause on next line and set message to '?PWA_launch=fail' // Note that, as a failsafe, the PWA_launch key is set to 'fail' (in the extension) before each PWA launch // so we need to send a 'success' message each time the PWA is launched @@ -147,7 +147,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys frame.id = 'kiwixComm'; frame.style.display = 'none'; document.body.appendChild(frame); - frame.src = params.referrerExtensionURL + '/www/index.html'+ message; + frame.src = params.referrerExtensionURL + '/www/index.html' + message; // Now remove redundant frame. We cannot use onload, because it doesn't give time for the script to run. setTimeout(function () { var kiwixComm = document.getElementById('kiwixComm'); @@ -832,7 +832,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { if (!isServiceWorkerAvailable()) { uiUtil.systemAlert('The ServiceWorker API is not available on your device. Falling back to JQuery mode', 'ServiceWorker API not available').then(function () { - setContentInjectionMode('jquery'); + if (params.referrerExtensionURL) { + var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery'; + window.location.href = params.referrerExtensionURL + '/www/index.html' + uriParams; + } else { + setContentInjectionMode('jquery'); + } }); return; } diff --git a/www/js/init.js b/www/js/init.js index e70a7ef6a..05215dcf8 100644 --- a/www/js/init.js +++ b/www/js/init.js @@ -40,7 +40,7 @@ if (/PWA_launch=/.test(window.location.search)) { var match = /PWA_launch=([^&]+)/.exec(window.location.search); localStorage.setItem(params.keyPrefix + 'PWA_launch', match[1]); // If we have successfully launched the PWA (even if there was no SW mode available), we prevent future default mode change alerts - if (match[1] !== 'fail') localStorage.setItem(params.keyPrefix + 'defaultModeChangeAlertDisplayed', true); + if (match[1] === 'success') localStorage.setItem(params.keyPrefix + 'defaultModeChangeAlertDisplayed', true); console.warn('Launch of PWA has been registered as "' + match[1] + '" by the extension. Exiting local code.'); } else { From 3809b3be009a2151690479059054aee83b3152a8 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 21:45:44 +0100 Subject: [PATCH 17/36] Make clear it is an attempt --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index f5fc3f89a..9fde19170 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -961,7 +961,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys var PWASuccessfullyLaunched = localStorage.getItem(params.keyPrefix + 'PWA_launch') === 'success'; var allowInternetAccess = settingsStore.getItem('allowInternetAccess') === 'true'; var message = params.defaultModeChangeAlertDisplayed ? '

To enable the Service Worker, we ' : - ('

We are switching you to Service Worker mode (this is now the default). ' + + ('

We shall attempt to switch you to Service Worker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

We '); message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA).

' + '

The PWA will be able to run offline, but will auto-update periodically when online as per the Service Worker spec.

'; From 56791b302255b98fc91f633a0f65ff3dfc09cf0e Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 21:54:26 +0100 Subject: [PATCH 18/36] Attempt to prevent loop --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index 9fde19170..44bbad1bf 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -833,7 +833,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys if (!isServiceWorkerAvailable()) { uiUtil.systemAlert('The ServiceWorker API is not available on your device. Falling back to JQuery mode', 'ServiceWorker API not available').then(function () { if (params.referrerExtensionURL) { - var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery'; + var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery&defaultModeChangeAlertDisplayed=true'; window.location.href = params.referrerExtensionURL + '/www/index.html' + uriParams; } else { setContentInjectionMode('jquery'); From f6f4a6a91c11d7d2d26b75f8f27b0e05d8549396 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 22:12:41 +0100 Subject: [PATCH 19/36] Use same messaging as in local app --- www/js/app.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index 44bbad1bf..e371958c8 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -831,7 +831,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys launchMozillaExtensionServiceWorker(); } else { if (!isServiceWorkerAvailable()) { - uiUtil.systemAlert('The ServiceWorker API is not available on your device. Falling back to JQuery mode', 'ServiceWorker API not available').then(function () { + var message = + '

Your browser or platform does not appear to support Service Worker mode, which is now the default for this app.

' + + '

You can continue to use the app in the (now deprecated) JQuery mode, but please note that this mode only works well with ' + + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or (for now) Stackexchange.

' + + '

If you are able, we strongly recommend that you update your browser to a version that supports Service Worker mode.

'; + uiUtil.systemAlert(message, 'ServiceWorker API not available').then(function () { if (params.referrerExtensionURL) { var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery&defaultModeChangeAlertDisplayed=true'; window.location.href = params.referrerExtensionURL + '/www/index.html' + uriParams; From 548ab1e07b5adde16a7db1dc6152f39975c8a203 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 22:36:06 +0100 Subject: [PATCH 20/36] Simplify some messaging --- www/js/app.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index e371958c8..c452d8d5e 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -599,10 +599,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys 'In that case, please report the problems you experienced to us (see About section).

', 'Change of default content injection mode']; } else if (!params.defaultModeChangeAlertDisplayed && params.contentInjectionMode === 'jquery') { - message = ['

Your browser or platform does not appear to support Service Worker mode, which is now the default for this app.

' + - '

You can continue to use the app in the (now deprecated) JQuery mode, but please note that this mode only works well with ' + - 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or (for now) Stackexchange.

' + - '

If you are able, we strongly recommend that you update your browser to a version that supports Service Worker mode.

', + message = ['

Your browser does not appear to support Service Worker mode, which is now the default for this app.

' + + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + + '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

', 'Service Worker mode unsupported']; } if (message) { @@ -832,10 +832,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { if (!isServiceWorkerAvailable()) { var message = - '

Your browser or platform does not appear to support Service Worker mode, which is now the default for this app.

' + - '

You can continue to use the app in the (now deprecated) JQuery mode, but please note that this mode only works well with ' + - 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or (for now) Stackexchange.

' + - '

If you are able, we strongly recommend that you update your browser to a version that supports Service Worker mode.

'; + '

Your browser does not appear to support Service Worker mode, which is now the default for this app.

' + + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + + '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

'; uiUtil.systemAlert(message, 'ServiceWorker API not available').then(function () { if (params.referrerExtensionURL) { var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery&defaultModeChangeAlertDisplayed=true'; @@ -969,10 +969,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys ('

We shall attempt to switch you to Service Worker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

We '); message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA).

' + - '

The PWA will be able to run offline, but will auto-update periodically when online as per the Service Worker spec.

'; - message += (params.defaultModeChangeAlertDisplayed ? '

You can switch back any time by returning to JQuery mode.

' : - ('

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + - 'In that case, please report the problems you experienced to us (see About section).

')) + + '

If available, the PWA will work offline, but will auto-update periodically when online as per the ' + + 'Service Worker spec.

You can switch back any time by returning to JQuery mode.

' + '

WARNING: This will attempt to access the following server:
' + params.PWAServer + '

'; var launchPWA = function () { uiUtil.spinnerDisplay(false); From ca331b3b5350d186a433eb5ceb5f2f56549ee8dc Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 22:39:55 +0100 Subject: [PATCH 21/36] Neater --- www/js/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index c452d8d5e..2a4f01cf5 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -968,8 +968,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys var message = params.defaultModeChangeAlertDisplayed ? '

To enable the Service Worker, we ' : ('

We shall attempt to switch you to Service Worker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

We '); - message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA).

' + - '

If available, the PWA will work offline, but will auto-update periodically when online as per the ' + + message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA). ' + + 'If available, the PWA will work offline, but will auto-update periodically when online as per the ' + 'Service Worker spec.

You can switch back any time by returning to JQuery mode.

' + '

WARNING: This will attempt to access the following server:
' + params.PWAServer + '

'; var launchPWA = function () { From e8ee442d67f458163d32835f36e02a4cc05765c9 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 22:45:11 +0100 Subject: [PATCH 22/36] Make it clear mode was tested --- www/js/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 2a4f01cf5..84fd7e881 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -599,7 +599,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys 'In that case, please report the problems you experienced to us (see About section).

', 'Change of default content injection mode']; } else if (!params.defaultModeChangeAlertDisplayed && params.contentInjectionMode === 'jquery') { - message = ['

Your browser does not appear to support Service Worker mode, which is now the default for this app.

' + + message = ['

Unfortunately, your browser does not appear to support Service Worker mode, which is now the default for this app.

' + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

', @@ -832,7 +832,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { if (!isServiceWorkerAvailable()) { var message = - '

Your browser does not appear to support Service Worker mode, which is now the default for this app.

' + + '

Unfortunately, your browser does not appear to support Service Worker mode, which is now the default for this app.

' + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

'; From 007a466288237443175c0235d977a5697018772c Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 22:50:19 +0100 Subject: [PATCH 23/36] Let user cancel return to local code if they wish --- www/js/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 84fd7e881..6c683cde9 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -836,8 +836,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

'; - uiUtil.systemAlert(message, 'ServiceWorker API not available').then(function () { - if (params.referrerExtensionURL) { + uiUtil.systemAlert(message, 'ServiceWorker API not available', true).then(function (response) { + if (params.referrerExtensionURL && response) { var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery&defaultModeChangeAlertDisplayed=true'; window.location.href = params.referrerExtensionURL + '/www/index.html' + uriParams; } else { From 6c02445ae8059f83c1620c453bd5e5be3755d439 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 22:59:56 +0100 Subject: [PATCH 24/36] Make button clearer --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index 6c683cde9..c70a606d0 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -836,7 +836,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

'; - uiUtil.systemAlert(message, 'ServiceWorker API not available', true).then(function (response) { + uiUtil.systemAlert(message, 'ServiceWorker API not available', true, 'Cancel', 'Use JQuery mode').then(function (response) { if (params.referrerExtensionURL && response) { var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery&defaultModeChangeAlertDisplayed=true'; window.location.href = params.referrerExtensionURL + '/www/index.html' + uriParams; From 0f15c60a9669619d4e84e8ef0fc11bc54fca82af Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 23:10:40 +0100 Subject: [PATCH 25/36] Finished testing, return to production server --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index c70a606d0..63a941791 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -74,7 +74,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys params['appVersion'] = '3.6-WIP'; // **IMPORTANT** Ensure this is the same as the version number in service-worker.js // The PWA server (currently only for use with the Mozilla extension) params['PWAServer'] = 'https://moz-extension.kiwix.org/current/'; // Include final slash! - params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages + // params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages // params['PWAServer'] = 'http://localhost:8080/'; // DEV: Uncomment this line (and adjust) for local testing // A parameter to determine the Settings Store API in use params['storeType'] = settingsStore.getBestAvailableStorageAPI(); From 150cf55ca4198d95d825cb3974dd9ad3c1195088 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 16 Oct 2022 23:26:16 +0100 Subject: [PATCH 26/36] Remove unusued code --- www/js/lib/uiUtil.js | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index e19382b3d..60f809776 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -268,27 +268,6 @@ define(rqDef, function(settingsStore) { }); } } - - /** - * Displays a Bootstrap warning alert with information about the injection mode change - */ - var injectionModeWarningSetup = false; - function displayInjectionModeChangeAlert() { - var alertInjectionMode = document.getElementById('switchedToServiceWorkerModeAsDefault'); - alertInjectionMode.style.display = 'block'; - if (!injectionModeWarningSetup) { - // We are setting up the injection mode switch warning for the first time - injectionModeWarningSetup = true; - alertInjectionMode.querySelector('button[data-hide]').addEventListener('click', function() { - alertInjectionMode.style.display = 'none'; - }); - document.getElementById('acknowledgeServiceWorkerModeAsDefault').addEventListener('click', function () { - alertInjectionMode.style.display = 'none'; - params.defaultModeChangeAlertDisplayed = true; - settingsStore.setItem('defaultModeChangeAlertDisplayed', true); - }); - } - } /** * Displays a Bootstrap alert box at the foot of the page to enable saving the content of the given title to the device's filesystem @@ -676,7 +655,6 @@ define(rqDef, function(settingsStore) { deriveZimUrlFromRelativeUrl: deriveZimUrlFromRelativeUrl, removeUrlParameters: removeUrlParameters, displayActiveContentWarning: displayActiveContentWarning, - displayInjectionModeChangeAlert: displayInjectionModeChangeAlert, displayFileDownloadAlert: displayFileDownloadAlert, checkUpdateStatus: checkUpdateStatus, checkServerIsAccessible: checkServerIsAccessible, From be101f8a885d9a3f2ed8607260454cbec2abcbe0 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Mon, 17 Oct 2022 08:43:25 +0100 Subject: [PATCH 27/36] Finesse descriptions of modes --- www/index.html | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/www/index.html b/www/index.html index cd60108bc..aae3466e4 100644 --- a/www/index.html +++ b/www/index.html @@ -306,28 +306,30 @@

ServiceWorker and JQuery Modes

Here is a technical explanation of what these modes do:
  • - ServiceWorker Mode: This is the default mode. As its name implies, it requires that the browser or - framework be capable of installing a Service Worker, which is usually the case in modern browsers. It works - by intercepting the browser or framework's Fetch calls (network requests) and supplying the requested content - from the ZIM. This mode requires no DOM traversal, and the content is read and supplied as-is from the archive. - Dynamic content (e.g. JavaScript) and proprietary UIs are fully supported in this mode. It can feel initially a - little slower while commonly used assets are being cached, but it soon equals JQuery mode in speed, at least in + ServiceWorker Mode: This is the default mode. As its name implies, it requires that the browser or framework + be capable of installing a Service Worker, which is usually the case in modern browsers. It works by intercepting + the browser or framework's Fetch calls (network requests) and supplying the requested content from the ZIM. In this + mode, the content is read and supplied as-is from the archive to the browser. Dynamic content (e.g. JavaScript) and + proprietary UIs are fully supported in this mode. However, Zimit archives are not currently supported due to + a conflict between the Kiwix JS Service Worker and the WARC Service Worker. This mode can feel initially a little + slower than JQuery mode until commonly used assets are cached, but it soon equals JQuery mode in speed, at least in modern browsers. However, older browsers such as IE11 are incompatible with this mode, and the app must be running - in a secure context (https:, localhost, or certain browser extensions). While this mode - is not natively supported in Mozilla (Firefox) browser extensions, we provide a functional workaround by re-launching + in a secure context (https:, localhost, or certain browser extensions). While this mode is + not natively supported in Mozilla (Firefox) browser extensions, we provide a functional workaround by re-launching the extension as a Progressive Web App (PWA). Note that this mode cannot run with the file: protocol (but only IE11 and old Edge allow the app to run by launching index.html from the file system).
  • - JQuery Mode: This mode is deprecated (and does not in fact require JQuery). It should, however, be fine - for everyday use with Wikipedia / WikiMedia archives with non-dynamic content. It is a way of inserting articles - extracted from the ZIM into the DOM (browser document) by injecting the content into an iframe or tab. We then use - native DOM methods, or sometimes JQuery, to parse the article's HTML and insert required assets (images, stylesheets, - event listeners for hyperlinks, etc.). On old devices, DOM traversal can be slow, but it is compensated for because - we do not extract or run JavaScript assets (which would be technically extremely complicated). As a result, for - WikiMedia archives this mode is usually quite fast. On the downside, ZIMs that have a proprietary dynamic UI (such as - Gutenberg or TED talks) are only partially supported in this mode: the UI does not work, but articles can be searched - for and loaded from the search bar. This mode is compatible with older browsers and frameworks. + JQuery Mode: This mode is now deprecated (and does not in fact require JQuery). It is retained for + compatibility with older browsers or frameworks that cannot run Service Workers. The mode has limitations which + mean that only static content can be displayed, such as that found in Wikipedia / WikiMedia archives and (for now) + Stackexchange. It is a way of inserting articles extracted from the ZIM into the DOM (browser document) by injecting + the content into an iframe or tab. We then use native DOM methods, or sometimes JQuery, to parse the article's HTML + and insert required assets (images, stylesheets, event listeners for hyperlinks, etc.). On old devices, DOM traversal + can be slow, but it is compensated for because we do not extract or run JavaScript assets (which would be technically + extremely complicated). As a result, for WikiMedia archives this mode is usually quite fast. On the downside, ZIMs + that have a proprietary dynamic UI (such as Gutenberg or TED talks) are only partially supported in this mode: the UI + does not work, but articles can be searched for and loaded from the search bar.

From ab0cf6cc41563caf0db79295cb45c65ed4ba8c3e Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Mon, 17 Oct 2022 11:03:47 +0100 Subject: [PATCH 28/36] Normalize use of "ServiceWorker Mode" --- www/js/app.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 63a941791..24dabe930 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -171,12 +171,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys document.getElementById('bypassAppCacheCheck').checked = !params.appCache; document.getElementById('appVersion').innerHTML = 'Kiwix ' + params.appVersion; // We check here if we have to warn the user that we switched to ServiceWorkerMode - // This is only needed if the Service Worker mode is available, or we are in a Firefox Extension that supports Service Worker + // This is only needed if the ServiceWorker mode is available, or we are in a Firefox Extension that supports Service Workers // outside of the extension environment, AND the user's settings are stuck on jQuery mode, AND the user has not already been - // alerted about the switch to Service Worker mode by default + // alerted about the switch to ServiceWorker mode by default if ((isServiceWorkerAvailable() || isMessageChannelAvailable() && /^moz-extension:/i.test(window.location.protocol)) && params.contentInjectionMode === 'jquery' && !params.defaultModeChangeAlertDisplayed) { - // Attempt to upgrade user to Service Worker mode + // Attempt to upgrade user to ServiceWorker mode params.contentInjectionMode = 'serviceworker'; } else if (params.contentInjectionMode === 'serviceworker') { // User is already in SW mode, so we will never need to display the upgrade alert @@ -473,7 +473,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys }); document.getElementById('bypassAppCacheCheck').addEventListener('change', function () { if (params.contentInjectionMode !== 'serviceworker') { - uiUtil.systemAlert('This setting can only be used in Service Worker mode!'); + uiUtil.systemAlert('This setting can only be used in ServiceWorker mode!'); this.checked = false; } else { params.appCache = !this.checked; @@ -588,22 +588,22 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } /** - * Checks whether we need to display an alert that the default Content Injection Mode has now been switched to Service Worker Mode + * Checks whether we need to display an alert that the default Content Injection Mode has now been switched to ServiceWorker Mode */ function checkAndDisplayInjectionModeChangeAlert() { var message; if (!params.defaultModeChangeAlertDisplayed && isServiceWorkerAvailable() && isServiceWorkerReady()) { - message = ['

We have switched you to Service Worker mode (this is now the default). ' + + message = ['

We have switched you to ServiceWorker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

' + '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

', 'Change of default content injection mode']; } else if (!params.defaultModeChangeAlertDisplayed && params.contentInjectionMode === 'jquery') { - message = ['

Unfortunately, your browser does not appear to support Service Worker mode, which is now the default for this app.

' + + message = ['

Unfortunately, your browser does not appear to support ServiceWorker mode, which is now the default for this app.

' + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + - '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

', - 'Service Worker mode unsupported']; + '

If you can, we recommend that you update your browser to a version that supports ServiceWorker mode.

', + 'ServiceWorker mode unsupported']; } if (message) { uiUtil.systemAlert(message[0], message[1]); @@ -668,7 +668,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys apiStatusPanel.classList.add(apiPanelClass); // Set visibility of UI elements according to mode document.getElementById('bypassAppCacheDiv').style.display = params.contentInjectionMode === 'serviceworker' ? 'block' : 'none'; - // Check to see whether we need to alert the user that we have switched to Service Worker mode by default + // Check to see whether we need to alert the user that we have switched to ServiceWorker mode by default if (!params.defaultModeChangeAlertDisplayed) setTimeout(checkAndDisplayInjectionModeChangeAlert, 1500); } @@ -832,10 +832,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { if (!isServiceWorkerAvailable()) { var message = - '

Unfortunately, your browser does not appear to support Service Worker mode, which is now the default for this app.

' + + '

Unfortunately, your browser does not appear to support ServiceWorker mode, which is now the default for this app.

' + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + - '

If you can, we recommend that you update your browser to a version that supports Service Worker mode.

'; + '

If you can, we recommend that you update your browser to a version that supports ServiceWorker mode.

'; uiUtil.systemAlert(message, 'ServiceWorker API not available', true, 'Cancel', 'Use JQuery mode').then(function (response) { if (params.referrerExtensionURL && response) { var uriParams = '?allowInternetAccess=false&contentInjectionMode=jquery&defaultModeChangeAlertDisplayed=true'; @@ -855,7 +855,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys if (!isServiceWorkerReady()) { $('#serviceWorkerStatus').html("ServiceWorker API available : trying to register it..."); if (navigator.serviceWorker.controller) { - console.log("Active service worker found, no need to register"); + console.log("Active Service Worker found, no need to register"); serviceWorkerRegistration = true; // Remove any jQuery hooks from a previous jQuery session $('#articleContent').contents().remove(); @@ -912,7 +912,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys initOrKeepAliveServiceWorker(); } } - // User has switched to Service Worker mode, so no longer needs the memory cache + // User has switched to ServiceWorker mode, so no longer needs the memory cache // We should empty it to ensure good memory management resetCssCache(); } @@ -966,7 +966,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys var PWASuccessfullyLaunched = localStorage.getItem(params.keyPrefix + 'PWA_launch') === 'success'; var allowInternetAccess = settingsStore.getItem('allowInternetAccess') === 'true'; var message = params.defaultModeChangeAlertDisplayed ? '

To enable the Service Worker, we ' : - ('

We shall attempt to switch you to Service Worker mode (this is now the default). ' + + ('

We shall attempt to switch you to ServiceWorker mode (this is now the default). ' + 'It supports more types of ZIM archives and is much more robust.

We '); message += 'need one-time access to our secure server so that the app can re-launch as a Progressive Web App (PWA). ' + 'If available, the PWA will work offline, but will auto-update periodically when online as per the ' + @@ -1946,7 +1946,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys /** * Code below is currently non-functional in jQuery mode, but provides an outline of how JS scripts could - * be attached to the DOM. Users who want JS support should switch to Service Worker mode if avaialable on + * be attached to the DOM. Users who want JS support should switch to ServiceWorker mode if avaialable on * their browser/OS. There is an experimental implementation of JS support in jQuery mode in the branch * . */ From fc5a459e20b8559267f418c59f792f2e751a6a47 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Mon, 17 Oct 2022 11:04:15 +0100 Subject: [PATCH 29/36] Describe SW mode before JQuery in other documentation --- www/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/www/index.html b/www/index.html index aae3466e4..bea2523a8 100644 --- a/www/index.html +++ b/www/index.html @@ -176,11 +176,11 @@

Step 1: Download some content

everything except video and audio. Larger versions without any of these qualifiers contain everything, though pictures are always compressed.

- Currently only Mediawiki-based content (for instance Wikipedia  and - Wikivoyage ), and StackExchange , have been thoroughly tested. Dynamic content (e.g. PhET) is only supported in ServiceWorker Mode - (see technical explanation below). + Dynamic content (e.g. PhET, or the proprietary User Interface in Gutenberg and TED Talks ZIMs) is supported in ServiceWorker Mode only (the default), + but not in JQuery mode (see technical explanation below). If you cannot run ServiceWorker mode, then you will most likely be limited to + static Mediawiki-based content (for instance Wikipedia  + and Wikivoyage ), and + StackExchange .

For a quick test, you can start with the @@ -664,7 +664,7 @@

Expert settings

Unable to display active content: This ZIM is not fully supported in jQuery mode.
Content may be available by searching above (type a letter of the alphabet), or else - switch to Service Worker mode + switch to ServiceWorker mode if your platform supports it.  [Permanently hide] From f558b1f38a497921dbcedf27cee6fa61b32d3a94 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sat, 22 Oct 2022 15:19:52 +0100 Subject: [PATCH 30/36] Remove delay before displaying alert --- manifest.json | 2 +- www/js/app.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index dc8548b52..5e8de5165 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Kiwix", - "version": "3.6-WIP", + "version": "3.6", "description": "Kiwix : offline Wikipedia reader", diff --git a/www/js/app.js b/www/js/app.js index 24dabe930..9cdf179c5 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -669,7 +669,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // Set visibility of UI elements according to mode document.getElementById('bypassAppCacheDiv').style.display = params.contentInjectionMode === 'serviceworker' ? 'block' : 'none'; // Check to see whether we need to alert the user that we have switched to ServiceWorker mode by default - if (!params.defaultModeChangeAlertDisplayed) setTimeout(checkAndDisplayInjectionModeChangeAlert, 1500); + if (!params.defaultModeChangeAlertDisplayed) checkAndDisplayInjectionModeChangeAlert(); } /** From 619dfd2d88243628c3421cff677493ca37978e3f Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sat, 22 Oct 2022 16:26:25 +0100 Subject: [PATCH 31/36] Update app.js --- www/js/app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/www/js/app.js b/www/js/app.js index 9cdf179c5..6e121d855 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1142,6 +1142,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { uiUtil.systemAlert("Welcome to Kiwix! This application needs at least a ZIM file in your SD-card (or internal storage). Please download one and put it on the device (see About section). Also check that your device is not connected to a computer through USB device storage (which often locks the SD-card content)", "Welcome") .then(function () { + // User will not see the alert about deprecation of jQuery mode until they have added an archive, so we make sure it is displayed next time + settingsStore.removeItem('defaultModeChangeAlertDisplayed'); $("#btnAbout").click(); var isAndroid = (navigator.userAgent.indexOf("Android") !== -1); if (isAndroid) { From 651dafd93183640921fa5975a22241bd3ba45faa Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sat, 22 Oct 2022 17:52:08 +0100 Subject: [PATCH 32/36] If user presses cancel or X or backdrop, display deprecation warning next session --- www/js/app.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 6e121d855..25150e41f 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -598,17 +598,25 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

', 'Change of default content injection mode']; + uiUtil.systemAlert(message[0], message[1]).then(function () { + params.defaultModeChangeAlertDisplayed = true; + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); + }); + } else if (!params.defaultModeChangeAlertDisplayed && params.contentInjectionMode === 'jquery') { message = ['

Unfortunately, your browser does not appear to support ServiceWorker mode, which is now the default for this app.

' + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + '

If you can, we recommend that you update your browser to a version that supports ServiceWorker mode.

', 'ServiceWorker mode unsupported']; - } - if (message) { - uiUtil.systemAlert(message[0], message[1]); - params.defaultModeChangeAlertDisplayed = true; - settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); + uiUtil.systemAlert(message[0], message[1], true, 'Cancel', 'Okay').then(function (result) { + if (result) { + // If user selected OK, then do not display again ever + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); + } + // This prevents the alert being displayed again this session + params.defaultModeChangeAlertDisplayed = true; + }); } } @@ -1142,8 +1150,6 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { uiUtil.systemAlert("Welcome to Kiwix! This application needs at least a ZIM file in your SD-card (or internal storage). Please download one and put it on the device (see About section). Also check that your device is not connected to a computer through USB device storage (which often locks the SD-card content)", "Welcome") .then(function () { - // User will not see the alert about deprecation of jQuery mode until they have added an archive, so we make sure it is displayed next time - settingsStore.removeItem('defaultModeChangeAlertDisplayed'); $("#btnAbout").click(); var isAndroid = (navigator.userAgent.indexOf("Android") !== -1); if (isAndroid) { From 10f95b3ea34724bb0b511170ebc458a89a4e065d Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 23 Oct 2022 10:11:24 +0100 Subject: [PATCH 33/36] Handle display of deprecation after SW mode registration failure --- www/js/app.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 25150e41f..aa115a9bc 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -598,26 +598,24 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys '

If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. ' + 'In that case, please report the problems you experienced to us (see About section).

', 'Change of default content injection mode']; - uiUtil.systemAlert(message[0], message[1]).then(function () { - params.defaultModeChangeAlertDisplayed = true; - settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); - }); - + uiUtil.systemAlert(message[0], message[1]).then(function () { + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); + }); } else if (!params.defaultModeChangeAlertDisplayed && params.contentInjectionMode === 'jquery') { message = ['

Unfortunately, your browser does not appear to support ServiceWorker mode, which is now the default for this app.

' + '

You can continue to use the app in the (now deprecated) JQuery mode, but note that this mode only works well with ' + 'ZIM archives that have static content, such as Wikipedia / Wikimedia ZIMs or Stackexchange.

' + '

If you can, we recommend that you update your browser to a version that supports ServiceWorker mode.

', 'ServiceWorker mode unsupported']; - uiUtil.systemAlert(message[0], message[1], true, 'Cancel', 'Okay').then(function (result) { - if (result) { - // If user selected OK, then do not display again ever - settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); - } - // This prevents the alert being displayed again this session - params.defaultModeChangeAlertDisplayed = true; - }); + uiUtil.systemAlert(message[0], message[1], true, 'Cancel', 'Okay').then(function (result) { + if (result) { + // If user selected OK, then do not display again ever + settingsStore.setItem('defaultModeChangeAlertDisplayed', true, Infinity); + } + }); } + // This prevents the alert being displayed again this session + params.defaultModeChangeAlertDisplayed = true; } /** @@ -911,6 +909,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } uiUtil.systemAlert(message, "Failed to register ServiceWorker").then(function () { setContentInjectionMode('jquery'); + // We need to wait for the previous dialogue box to unload fully before attempting to display another + setTimeout(function () { + params.defaultModeChangeAlertDisplayed = false; + settingsStore.removeItem('defaultModeChangeAlertDisplayed'); + checkAndDisplayInjectionModeChangeAlert(); + }, 1200); }); } }); From 6783426d978a98b5b50e56a16bf3c0ca1a6df066 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 23 Oct 2022 11:24:16 +0100 Subject: [PATCH 34/36] Temporarily set test server --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index aa115a9bc..2ce35c327 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -74,7 +74,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys params['appVersion'] = '3.6-WIP'; // **IMPORTANT** Ensure this is the same as the version number in service-worker.js // The PWA server (currently only for use with the Mozilla extension) params['PWAServer'] = 'https://moz-extension.kiwix.org/current/'; // Include final slash! - // params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages + params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages // params['PWAServer'] = 'http://localhost:8080/'; // DEV: Uncomment this line (and adjust) for local testing // A parameter to determine the Settings Store API in use params['storeType'] = settingsStore.getBestAvailableStorageAPI(); From 390efb1ba2f8c6d85b2f3f89bbecea8682c922cf Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 23 Oct 2022 11:50:40 +0100 Subject: [PATCH 35/36] Revert " Temporarily set test server" This reverts commit 6783426d978a98b5b50e56a16bf3c0ca1a6df066. --- www/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/app.js b/www/js/app.js index 2ce35c327..aa115a9bc 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -74,7 +74,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys params['appVersion'] = '3.6-WIP'; // **IMPORTANT** Ensure this is the same as the version number in service-worker.js // The PWA server (currently only for use with the Mozilla extension) params['PWAServer'] = 'https://moz-extension.kiwix.org/current/'; // Include final slash! - params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages + // params['PWAServer'] = 'https://kiwix.github.io/kiwix-js/'; // DEV: Uncomment this line for testing code on GitHub Pages // params['PWAServer'] = 'http://localhost:8080/'; // DEV: Uncomment this line (and adjust) for local testing // A parameter to determine the Settings Store API in use params['storeType'] = settingsStore.getBestAvailableStorageAPI(); From d738825a6c6ee0c75ef1869a0b09cc2a5c9cc47d Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Sun, 23 Oct 2022 15:22:06 +0100 Subject: [PATCH 36/36] Reinstate WIP label in manifest.json --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 5e8de5165..dc8548b52 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Kiwix", - "version": "3.6", + "version": "3.6-WIP", "description": "Kiwix : offline Wikipedia reader",