From 8ea32e613ff6286a211d56ec9790424c357b633c Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Tue, 12 Jan 2021 11:14:02 +0000 Subject: [PATCH] Use cache.js for storing last page's HTML Former-commit-id: 0ac93628384b579884666772f06380a93427a6d9 [formerly b495a7423b90bbb3118ccc983a95995d0a1dd8ed [formerly f4b48b2fb4e3ecb29dc1c1e4ccec32978d916cee]] Former-commit-id: c80eab62268f69455e173dcdc6c4d58cc13395e9 Former-commit-id: b9fbb66bed344b71a9727e5243494159962a33ae --- www/css/app.css | 6 ++-- www/index.html | 6 ++-- www/js/app.js | 82 ++++++++++++++++---------------------------- www/js/init.js | 27 +++++++++------ www/js/lib/uiUtil.js | 8 ++--- 5 files changed, 55 insertions(+), 74 deletions(-) diff --git a/www/css/app.css b/www/css/app.css index 29c9f2c0..038cea3e 100644 --- a/www/css/app.css +++ b/www/css/app.css @@ -186,8 +186,7 @@ div:not(.panel-success, .alert-message) { .message { position: absolute; - bottom: 0; - margin: auto 10px 50px auto; + margin: 70px auto 0; left: 0; right: 0; font-size: smaller; @@ -195,8 +194,7 @@ div:not(.panel-success, .alert-message) { color: dimgrey; border: 1px solid gainsboro; padding: 1px 4px; - max-width: 300px; - width: 60%; + width: 200px; } .dark .message { diff --git a/www/index.html b/www/index.html index 00107569..a2225dbc 100644 --- a/www/index.html +++ b/www/index.html @@ -215,7 +215,7 @@
@@ -264,7 +264,7 @@

Offline Wikipedia Viewer (Version )

-

Packaged ZIM archive:

+
  • Adding archives and languages
  • Changelog and Features
    • @@ -466,7 +466,7 @@ -

    +

    diff --git a/www/js/app.js b/www/js/app.js index a10b5e51..c529e13a 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -56,7 +56,11 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett // because params.storeType is also set in a preliminary way in init.js) params['storeType'] = null; params['storeType'] = settingsStore.getBestAvailableStorageAPI(); - + // Test caching capibility + cache.test(function(){}); + params['lastPageVisit'] = params.storedFile ? settingsStore.getItem(params.storedFile) : ''; + params.lastPageVisit = params.lastPageVisit ? params.lastPageVisit + '@kiwixKey@' + params.storedFile : ''; + // Unique identifier of the article expected to be displayed var expectedArticleURLToBeDisplayed = ""; @@ -343,17 +347,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett goToArticle(thisURL); } setTimeout(function () { //Restore temporarily changed value after page has reloaded - params.rememberLastPage = settingsStore.getItem('rememberLastPage') == "true"; + params.rememberLastPage = settingsStore.getItem('rememberLastPage') === 'true'; if (!params.rememberLastPage) { - settingsStore.setItem('lastPageVisit', "", Infinity); - params.lastPageHTML = ""; - if (typeof Storage !== "undefined") { - try { - localStorage.setItem(params.keyPrefix + 'lastPageHTML', ""); - } catch (err) { - console.log("localStorage not supported: " + err); - } - } + settingsStore.setItem('lastPageVisit', '', Infinity); + params.lastPageHTML = ''; + // DEV: replace this with cache.clear when you have repaired that method + cache.setArticle(params.lastPageVisit.replace(/.+@kiwixKey@/, ''), params.lastPageVisit.replace(/@kiwixKey@.+/, ''), '', function(){}); } }, 5000); } @@ -713,9 +712,13 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett for (var i = 0; i < versionSpans.length; i++) { versionSpans[i].innerHTML = i ? params.version : params.version.replace(/\s+.*$/, ""); } - var fileVersionDivs = document.getElementsByClassName('fileVersion'); - for (i = 0; i < fileVersionDivs.length; i++) { - fileVersionDivs[i].innerHTML = i ? params.fileVersion.replace(/\s+.+$/, "") : params.fileVersion; + if (params.fileVersion && /UWP|Electron/.test(params.appType)) { + var packagedInfoParas = document.getElementsByClassName('packagedInfo'); + var fileVersionDivs = document.getElementsByClassName('fileVersion'); + for (i = 0; i < fileVersionDivs.length; i++) { + packagedInfoParas[i].style.display = 'block'; + fileVersionDivs[i].innerHTML = i ? params.fileVersion.replace(/\s+.+$/, '') : params.fileVersion; + } } var update = document.getElementById('update'); if (update) document.getElementById('logUpdate').innerHTML = update.innerHTML.match(/]*>[\s\S]+/i); @@ -1243,15 +1246,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett settingsStore.setItem('rememberLastPage', params.rememberLastPage, Infinity); if (!params.rememberLastPage) { settingsStore.setItem('lastPageVisit', "", Infinity); - //Clear localStorage - if (typeof Storage !== "undefined") { - try { - localStorage.setItem(params.keyPrefix + 'lastPageHTML', ""); - localStorage.clear(); - } catch (err) { - console.log("localStorage not supported: " + err); - } - } + // DEV: replace this with cache.clear when you have repaired that method + cache.setArticle(params.lastPageVisit.replace(/.+@kiwixKey@/, ''), params.lastPageVisit.replace(/@kiwixKey@.+/, ''), '', function(){}); params.lastPageHTML = ""; } }); @@ -2756,13 +2752,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett if (params.rememberLastPage && params.lastPageVisit) lastPage = params.lastPageVisit.replace(/@kiwixKey@.+/, ""); if (params.rememberLastPage && (typeof Storage !== "undefined") && dirEntry.namespace + '/' + dirEntry.url == lastPage) { if (!params.lastPageHTML) { - try { - params.lastPageHTML = localStorage.getItem(params.keyPrefix + 'lastPageHTML'); - } catch (err) { - console.log("localStorage not supported: " + err); - } + cache.getArticle(params.lastPageVisit.replace(/.*@kiwixKey@/, ''), lastPage, function (html) { + params.lastPageHTML = html; + htmlContent = params.lastPageHTML || htmlContent; + }); + } else { + htmlContent = params.lastPageHTML; } - htmlContent = params.lastPageHTML || htmlContent; + } if (/]*>/.test(htmlContent)) { console.log("Fast article retrieval from localStorage: " + lastPage); @@ -3015,34 +3012,13 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett !~window.history.state.title.indexOf("/" + dirEntry.url)) { pushBrowserHistoryState(dirEntry.namespace + "/" + dirEntry.url); } + // Store for fast retrieval if (!~params.lastPageVisit.indexOf(dirEntry.url)) { params.lastPageVisit = dirEntry.namespace + "/" + dirEntry.url + "@kiwixKey@" + appstate.selectedArchive._file._files[0].name; - if (params.rememberLastPage) { - settingsStore.setItem('lastPageVisit', params.lastPageVisit, Infinity); - //Store current document's raw HTML in localStorage for fast restart - try { - // Ensure we don't go over quota - localStorage.removeItem(params.keyPrefix + 'lastPageHTML'); - localStorage.setItem(params.keyPrefix + 'lastPageHTML', htmlArticle); - } catch (err) { - if (/quota\s*exceeded/i.test(err.message)) { - // Note that Edge gives a quotaExceeded message when running from localhost even if the quota isn't exceeded - // Basically, it means localStorage is not supported in Edge running from localhost... - if (params.storeType === 'local_storage') { - uiUtil.systemAlert('Your localStorage has exceeded its quota, so we are forced to clear it.\n' + - 'Because your browser is using localStorage for remembering your settings, these may\n' + - 'have been reset. Next time the app launches, please go to Config and set them again.'); - } - console.log('Clearing localStorage because quota was exceeded...'); - localStorage.clear(); - } else { - console.error("Something went wrong with localStorage: ", err); - } - } - params.lastPageHTML = htmlArticle; - } + cache.setArticle(appstate.selectedArchive._file._files[0].name, dirEntry.namespace + '/' + dirEntry.url, htmlArticle, function(){}); } + params.htmlArticle = htmlArticle; // Replaces ZIM-style URLs of img, script, link and media tags with a data-kiwixurl to prevent 404 errors [kiwix-js #272 #376] // This replacement also processes the URL to remove the path so that the URL is ready for subsequent jQuery functions diff --git a/www/js/init.js b/www/js/init.js index fef38c23..bac3683a 100644 --- a/www/js/init.js +++ b/www/js/init.js @@ -51,9 +51,9 @@ var appstate = {}; /******** UPDATE VERSION IN pwabuilder-sw.js TO MATCH VERSION *******/ params['version'] = "1.1.4-RP2"; //DEV: Manually update this version when there is a new release: it is compared to the Settings Store "version" in order to show first-time info, and the cookie is updated in app.js /******* UPDATE THIS ^^^^^^ IN serveice worker!! ********************/ -params['packagedFile'] = "wikipedia_en_100_maxi.zim"; //For packaged Kiwix JS (e.g. with Wikivoyage file), set this to the filename (for split files, give the first chunk *.zimaa) and place file(s) in default storage +params['packagedFile'] = null; //For packaged Kiwix JS (e.g. with Wikivoyage file), set this to the filename (for split files, give the first chunk *.zimaa) and place file(s) in default storage params['archivePath'] = "archives"; //The directory containing the packaged archive(s) (relative to app's root directory) -params['fileVersion'] = "wikipedia_en_100_maxi_2020-12.zim (23-Dec-2020)"; //Use generic name for actual file, and give version here +params['fileVersion'] = ""; //Use generic name for actual file, and give version here params['cachedStartPage'] = false; //If you have cached the start page for quick start, give its URI here params['kiwixDownloadLink'] = "https://download.kiwix.org/zim/"; //Include final slash @@ -88,19 +88,19 @@ params['storedFilePath'] = getSetting('lastSelectedArchivePath'); params.storedFilePath = params.storedFilePath ? decodeURIComponent(params.storedFilePath) : params.archivePath + '/' + params.packagedFile; params.storedFilePath = launchArguments ? launchArguments.files[0].path || '' : params.storedFilePath; params.originalPackagedFile = params.packagedFile; -params['falFileToken'] = params['falFileToken'] || "zimfile"; //UWP support -params['falFolderToken'] = params['falFolderToken'] || "zimfilestore"; //UWP support +params['falFileToken'] = params['falFileToken'] || "zimfile"; // UWP support +params['falFolderToken'] = params['falFolderToken'] || "zimfilestore"; // UWP support params['localStorage'] = params['localStorage'] || ""; params['pickedFile'] = launchArguments ? launchArguments.files[0] : ""; params['pickedFolder'] = params['pickedFolder'] || ""; -params['lastPageVisit'] = getSetting('lastPageVisit') || ""; -params.lastPageVisit = params.lastPageVisit ? decodeURIComponent(params.lastPageVisit): ""; params['themeChanged'] = params['themeChanged'] || false; -params['allowInternetAccess'] = params['allowInternetAccess'] || false; //Do not get value from cookie, should be explicitly set by user on a per-session basis +params['allowInternetAccess'] = params['allowInternetAccess'] || false; // Do not get value from cookie, should be explicitly set by user on a per-session basis params['printIntercept'] = false; params['printInterception'] = false; -params['appIsLaunching'] = true; //Allows some routines to tell if the app has just been launched +params['appIsLaunching'] = true; // Allows some routines to tell if the app has just been launched +params['useCache'] = true; // This needs to be made optional in UI params['PWAInstalled'] = decodeURIComponent(getSetting('PWAInstalled')); +params['appType'] = getAppType(); params.pagesLoaded = 0; // Page counter used to show PWA Install Prompt only after user has played with the app for a while //Prevent app boot loop with problematic pages that cause an app crash @@ -146,7 +146,15 @@ document.getElementById('hideToolbarsCheck').indeterminate = params.hideToolbars document.getElementById('hideToolbarsCheck').readOnly = params.hideToolbars === "top"; document.getElementById('hideToolbarsState').innerHTML = (params.hideToolbars === "top" ? "top" : params.hideToolbars ? "both" : "never"); -//Set up storage types +// Get app type +function getAppType() { + if (typeof Windows !== 'undefined' && typeof Windows.Storage !== 'undefined') return 'UWP'; + if (window.fs || window.nw) return 'Electron'; + if (navigator.serviceWorker) return 'PWA'; + return 'HTML5'; +} + +// Set up storage types if (params.storedFile && typeof Windows !== 'undefined' && typeof Windows.Storage !== 'undefined') { //UWP Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync(params.archivePath).done(function (folder) { params.localStorage = folder; @@ -197,7 +205,6 @@ window.addEventListener('beforeinstallprompt', function(e) { // Don't display prompt if the PWA for this version is already installed if (!params.beforeinstallpromptFired && params.PWAInstalled !== params.version) { params.beforeinstallpromptFired = true; - var config = document.getElementById('configuration'); btnInstall1.addEventListener('click', installApp); btnLater.addEventListener('click', function (e) { e.preventDefault(); diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index 12973c95..8aa1a1f4 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -176,13 +176,13 @@ define(rqDef, function() { function poll(msg) { document.getElementById('searchingArticles').style.display = 'block'; - document.getElementById('progressMessage').innerHTML = msg; - document.getElementById('progressMessage').style.display = 'block'; + document.getElementById('cachingAssets').innerHTML = msg; + document.getElementById('cachingAssets').style.display = 'block'; } function clear() { - document.getElementById('progressMessage').innerHTML = ''; - document.getElementById('progressMessage').style.display = 'none'; + document.getElementById('cachingAssets').innerHTML = ''; + document.getElementById('cachingAssets').style.display = 'none'; } function printCustomElements() {