Inform the user if we switch to SW mode (untested)

kiwix · Oct 16, 2022 · f3b0009 · f3b0009
1 parent 472b6ab
commit f3b0009
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/www/index.html b/www/index.html
@@ -666,6 +666,13 @@ <h3>Expert settings</h3>
                         <a id="swModeLink" href="#contentInjectionModeDiv" class="alert-link">switch to Service Worker mode</a>
                         if your platform supports it. &nbsp;[<a id="stop" href="#expertSettingsDiv" class="alert-link">Permanently hide</a>]
                     </div>
+                    <div id="switchedToServiceWorkerModeAsDefault" style="display:none;" class="kiwix-alert alert-warning alert-dismissible fade show">
+                        <button type="button" class="close" data-hide="alert">&times;</button>
+                        We've switched you to ServiceWorker mode (that is now the default mode).
+                        It supports more types of ZIM files and is much more sustainable.
+                        If you have problems in this ServiceWorker mode, you can switch back to the (now deprecated) jQuery mode. In this case, please report the problems to us (see About section)
+                        &nbsp;[<a id="acknowledgeServiceWorkerModeAsDefault" href="#" class="alert-link">Acknowledge</a>]
+                    </div>
                 </div>
                 <iframe id="articleContent" class="articleIFrame" src="article.html"></iframe>
             </article>

diff --git 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
@@ -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,