Use OPFS by default on Android and Firefox #646 (#667)

www/index.html

@@ -449,7 +449,7 @@
                     </p>
                     <h4 id="OPFS">Origin Private File System</h4>
                     <p>
-                        In some modern browsers, you will see an experimental option "<b>Use Private File System</b>" under the File and Folder selectors. If you tick this option,
+                        In some modern browsers, you will see the option "<b>Use Private File System</b>" under the File and Folder selectors. If you tick this option,
                         then the app will request an <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system" target="_blank">Origin Private File System</a>
                         (OPFS) from the browser. Then, when you pick a ZIM file, instead of opening it, it will be stored in the OPFS. You may also select more than one archive to store in the OPFS,
                         including all the parts of a split ZIM file (<code>.zimaa</code>, <code>.zimab</code>, etc.). Note that in this case, only the <code>.zimaa</code> entry will be displayed in
@@ -848,7 +848,7 @@
                                     <label class="checkbox" title="This uses a dedicated Origin Private File System (OPFS) for the app, which allows the app to load these files automatically on launch, and is much faster than the normal file system on Android. See About -> Origin Private File System for more information.">
                                         <input type="checkbox" name="useOPFS" id="useOPFSCheck" />
                                         <span class="checkmark"></span>
-                                        <b>Use Private File System <a href="#OPFS" class="aboutLink">[info]</a></b> (<i>experimental</i>)
+                                        <b>Use Private File System <a href="#OPFS" class="aboutLink">[info]</a></b> (<i>default for Firefox and Android</i>)
                                     </label>
                                 </div>
                             </div>

www/js/app.js

@@ -648,6 +648,28 @@ document.getElementById('btnRescanDeviceStorage').addEventListener('click', func
     } else {
         displayFileSelect();
     }
+    // Check if we are in an Android app, and if so, auto-select use of OPFS if there is no set value in settingsStore for useOPFS
+    if ((/Android/.test(params.appType) || /Firefox/.test(navigator.userAgent)) && !params.useOPFS && !settingsStore.getItem('useOPFS')) {
+        // This will only run first time app is run on Android
+        setTimeout(function () {
+            uiUtil.systemAlert('<p>We are switching to the Private File System (OPFS).</p>' +
+                '<p><b><i>If asked, please accept a one-time Storage permission prompt.</i></b></p>' +
+                '<i>More info</i>: the OPFS provides significant benefits such as: <b>faster file system access</b>; ' +
+                '<b>no permission prompts</b>; <b>automatic reload of archive on app start</b>.</p>',
+                'Switching to OPFS', true, 'Use classic file picker')
+            .then(function (response) {
+                if (response) {
+                    document.getElementById('useOPFSCheck').click();
+                } else {
+                    settingsStore.setItem('useOPFS', false, Infinity);
+                }
+            });
+        }, 2000);
+    } else if (!settingsStore.getItem('useOPFS')) {
+        // This esnures that there is an explicit setting for useOPFS, which in turn allows us to tell if the
+        // app is running for the first time (so we don't keep prompting the user to use the OPFS)
+        settingsStore.setItem('useOPFS', false, Infinity);
+    }
 });
 // Bottom bar :
 // @TODO Since bottom bar now hidden in Settings and About the returntoArticle code cannot be accessed;
@@ -1506,7 +1528,7 @@ document.getElementById('useOPFSCheck').addEventListener('change', function (e)
         if (e.target.checked) {
             return cache.requestPersistentStorage();
         } else {
-            return Promise.resolve(true);
+            return Promise.resolve(false);
         }
     };
     if (e.target.checked && /Electron/i.test(params.appType)) {
@@ -1533,6 +1555,7 @@ document.getElementById('useOPFSCheck').addEventListener('change', function (e)
         } else {
             e.target.checked = false;
             params.useOPFS = false;
+            settingsStore.setItem('useOPFS', false, Infinity);
             setOPFSUI();
         }
     });
@@ -1552,6 +1575,7 @@ function loadOPFSDirectory () {
         });
     } else {
         params.useOPFS = false;
+        settingsStore.setItem('useOPFS', false, Infinity);
         setOPFSUI();
         return uiUtil.systemAlert('<p>Your browser does not support the Origin Private File System!</p><p>Please try picking a folder instead.</p>');
     }
@@ -1588,7 +1612,6 @@ function setOPFSUI () {
         if ('showOpenFilePicker' in window) btnExportOPFSEntry.style.display = '';
         cache.populateOPFSStorageQuota();
     } else {
-        settingsStore.setItem('useOPFS', false, Infinity);
         useOPFS.checked = false;
         archiveFileCol.classList.remove('col-xs-5');
         archiveFileCol.classList.add('col-xs-6');
@@ -3287,6 +3310,7 @@ if (storages !== null && storages.length > 0 ||
             getNativeFSHandle();
         } else {
             // We are in an app that cannot open files auotomatically, so populate archive list and show file pickers
+            document.getElementById('btnRescanDeviceStorage').click();
             btnConfigure.click();
             searchForArchivesInPreferencesOrStorage(true);
         }
@@ -3362,7 +3386,7 @@ if (storages !== null && storages.length > 0 ||
     }
 } else {
     // If DeviceStorage is not available, we display the file select components
-    displayFileSelect();
+    document.getElementById('btnRescanDeviceStorage').click();
     if (document.getElementById('archiveFilesLegacy').files && document.getElementById('archiveFilesLegacy').files.length > 0) {
         // Archive files are already selected,
         setLocalArchiveFromFileSelect();

www/js/init.js

@@ -34,7 +34,7 @@ window.onerror = function (msg, url, line, col, error) {
 
 // Set a beforeUnload handler to prevent app reloads without confirmation if a ZIM file is loaded
 window.addEventListener('beforeunload', function (event) {
-    if (params.interceptBeforeUnload && appstate && appstate.selectedArchive && params.appCache && !/Electron/.test(params.appType)) {
+    if (params.interceptBeforeUnload && !params.useOPFS && appstate && appstate.selectedArchive && params.appCache && !/Electron/.test(params.appType)) {
         var confirmationMessage = 'Warning: you may have to reload the ZIM archive if you leave this page!';
         event.preventDefault();
         // Included for legacy support, e.g. Chrome/Edge < 119

www/js/lib/kiwixServe.js

@@ -566,7 +566,9 @@ function requestXhttpData (URL, lang, subj, kiwixDate) {
         if (params.useOPFS || (window.showSaveFilePicker && params.pickedFolder && params.pickedFolder.kind === 'directory')) {
             bodyDoc += '<p><b>Direct download';
             bodyDoc += params.useOPFS ? ' to Origin Private File System' : ' to your ZIM folder';
-            bodyDoc += ', for smaller archives:</b> (<i>downloads archive in-app</i>)</p><ul>\r\n<li><a href="' + mirrorZimUrl + '" class="download">' + mirrorZimUrl + '</a></li></ul>\r\n';
+            bodyDoc += ', for smaller archives:</b> (<i>downloads archive in-app</i>)</p><ul>\r\n<li>' +
+                '<a href="' + mirrorZimUrl + '" class="download" style="background-color: green; color: white; padding: 2px 5px; border-radius: 3px; text-decoration: none;">Download now</a> ' +
+                '<a href="' + mirrorZimUrl + '" class="download">' + mirrorZimUrl + '</a></li></ul>\r\n';
             bodyDoc += '<p><b>Browser-managed download from mirrors, for larger archives:</b>';
         } else {
             bodyDoc += '<p><b>Browser-managed download from mirrors:</b>';