Add app favicon and deal correctly with zim favicon #229 (#230)

* Deal correctly with ZIM favicon

* Add app favicon

Former-commit-id: abfa3290c8f633ebf540d2355d51fdb31fe79956 [formerly 5c13544df380b1915295a578c7d0323c6e0a6920] [formerly 18dcc8391eacef4dcb21389c080eaea734a11ffa] [formerly 52ea1ecb4cc7017ec8cd6724d33d0b34b64e0d7b [formerly 0d6d1062ec896d3eb5b4087cce27db36be9459ed [formerly 54119a638ebaec755b45f250b3b797f1d991e2ba]]]
Former-commit-id: 24afc5d736d66148b29a9431e61bbe51254aa173 [formerly 770d3ed0e5a5c5a73e4f4b621be6cf3af8e46dd7 [formerly bc4e05f3395634a06cbc2db2fc1043cb5d8ec66c]]
Former-commit-id: f027b934c27d95bc976e0596df099cc25a1d3296 [formerly cb02d0255a4064173be14e79cf2f98b7f0fdad12]
Former-commit-id: 471c457d5c13d1af59ff99ee6d58c8ad9bcdf4bf

service-worker.js

@@ -102,6 +102,7 @@ let precacheFiles = [
     ".", // This caches the redirect to www/index.html, in case a user launches the app from its root directory
   "manifest.json",
   "service-worker.js",
+  "www/favicon.ico",
   "www/-/mw/ext.cite.styles.css",
   "www/-/mw/ext.cite.ux-enhancements.css",
   "www/-/mw/ext.math.scripts.css",

www/index.html

@@ -38,6 +38,10 @@
 
     -->
     <link rel="manifest" href="../manifest.json" />
+    <link rel="icon" type="image/png" href="img/icons/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/png" href="img/icons/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="img/icons/favicon-192x192.png" sizes="192x192" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="stylesheet" href="css/app.css" />
     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />

www/js/app.js

@@ -3817,8 +3817,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
         // to support to this regex. The "zip" has been added here as an example of how to support further filetypes
         var regexpDownloadLinks = /^.*?\.epub($|\?)|^.*?\.pdf($|\?)|^.*?\.zip($|\?)/i;
 
-        // This matches the data-kiwixurl of all <link> tags containing rel="stylesheet" in raw HTML unless commented out
+        // This matches the data-kiwixurl of all <link> tags containing rel="stylesheet" or "...icon" in raw HTML unless commented out
-        var regexpSheetHref = /(<link\s+(?=[^>]*rel\s*=\s*["']stylesheet)[^>]*(?:href|data-kiwixurl)\s*=\s*["'])([^"']+)(["'][^>]*>)(?!\s*--\s*>)/ig;
+        var regexpSheetHref = /(<link\s+(?=[^>]*rel\s*=\s*["'](?:stylesheet|[^"']*icon))[^>]*(?:href|data-kiwixurl)\s*=\s*["'])([^"']+)(["'][^>]*>)(?!\s*--\s*>)/ig;
 
         // A string to hold any anchor parameter in clicked ZIM URLs (as we must strip these to find the article in the ZIM)
         var anchorParameter;
@@ -4163,8 +4163,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
                     cache.getItemFromCacheOrZIM(appstate.selectedArchive, cacheKey).then(function (content) {
                         //DEV: Uncomment line below and break on next to capture cssContent for local filesystem cache
                         //var cssContent = util.uintToString(content);
+                        var mimetype = /\.ico$/i.test(title) ? 'image' : 'text/css';
                         var cssBlob = new Blob([content], {
-                            type: 'text/css'
+                            type: mimetype
                         });
                         var newURL = [title, URL.createObjectURL(cssBlob)];
                         blobArray.push(newURL);

www/js/lib/cache.js

@@ -31,7 +31,7 @@ define(['settingsStore', 'uiUtil'], function(settingsStore, uiUtil) {
     // DEV: Regex below defines the permitted key types for the cache; add further types as needed
     // @TODO: Revise for use with no-namespace ZIMs (maybe this becomes useless?)
     // NB: The key type of '.zim', or '.zimaa' (etc.) is used to store a ZIM's last-accessed article 
-    var regexpKeyTypes = /(?:(?:^|\/)[AC]\/.+|\.[Jj][Ss]|\.[Cc][Ss][Ss]|\.[Zz][Ii][Mm]\w{0,2})$/;
+    var regexpKeyTypes = /(?:(?:^|\/)[AC]\/.+|\.[Jj][Ss]|\.[Cc][Ss][Ss]|\.[Ii][Cc][Oo]|\.[Zz][Ii][Mm]\w{0,2})$/;
 
     /** 
      * Tests the enviornment's caching capabilities and sets assetsCache.capability to the supported level
@@ -455,9 +455,6 @@ define(['settingsStore', 'uiUtil'], function(settingsStore, uiUtil) {
                     resolve(result);
                     return;
                 }
-                // Set the read function to use according to filetype
-                var readFile = regexpKeyTypes.test(title) ?
-                    selectedArchive.readUtf8File : selectedArchive.readBinaryFile;
                 // Bypass getting dirEntry if we already have it
                 var getDirEntry = dirEntry ? Promise.resolve() :
                     selectedArchive.getDirEntryByPath(title);
@@ -476,6 +473,9 @@ define(['settingsStore', 'uiUtil'], function(settingsStore, uiUtil) {
                             var shortTitle = key.replace(/[^/]+\//g, '').substring(0, 18);
                             uiUtil.pollSpinner('Getting ' + shortTitle + '...');
                         }
+                        // Set the read function to use according to filetype
+                        var readFile = /^text\//i.test(mimetype) ?
+                        selectedArchive.readUtf8File : selectedArchive.readBinaryFile;
                         readFile(resolvedDirEntry, function (fileDirEntry, content) {
                             if (regexpKeyTypes.test(title)) {
                                 console.log('Cache retrieved ' + title + ' from ZIM');