Merge branch 'develop'. Enable offline mode and caching

index.html

@@ -85,6 +85,11 @@
             <img id="Logo" src="images/Logo-beta.webp" alt="Logo">
         </header>
 
+        <dialog id="updateNotification" class="dialogs">
+            <span>Update available</span>
+            <button id="updateButton" class="dialogButtons">Update</button>
+        </dialog>
+
         <main>
             <div class="blocks">
                 <strong class="blockTitles">Inputs</strong><br>
@@ -208,6 +213,8 @@
             </div>
         </dialog>
 
+        <script src="scripts/ui-items.js"></script>
         <script src="scripts/ui.js"></script>
+        <script src="scripts/updater.js"></script>
     </body>
 </html>

scripts/argon2.js

@@ -73,7 +73,7 @@
     }
 
     function loadWasmModule() {
-        return import('./argon2/argon2.js');
+        return importScripts('./argon2/argon2.js');
     }
 
     function loadWasmBinary() {

scripts/ui-items.js

@@ -0,0 +1,41 @@
+/*  (c) 2024 Piotr Kniaz
+
+    This file is part of HBDPG-2.
+    Repository: https://github.com/HBDPG-2/hbdpg-2.github.io
+
+    Licensed under the MIT License. See LICENSE file in the project root for details.
+*/
+
+const form1 = document.getElementById('passphrase1Form');
+const form2 = document.getElementById('passphrase2Form');
+const passphrase1Input = document.getElementById('passphrase1Input');
+const passphrase2Input = document.getElementById('passphrase2Input');
+const showPassphrase1Checkbox = document.getElementById('showPassphrase1Checkbox');
+const showPassphrase2Checkbox = document.getElementById('showPassphrase2Checkbox');
+const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
+const showPassphrase1CheckboxLabel = document.getElementById('showPassphrase1CheckboxLabel');
+const showPassphrase2CheckboxLabel = document.getElementById('showPassphrase2CheckboxLabel');
+const showPasswordCheckboxLabel = document.getElementById('showPasswordCheckboxLabel');
+const passwordLengthRadioLabels = document.querySelectorAll('.passwordLengthRadioLabels');
+const passwordLengthChoice = document.getElementsByName('length');
+const nextButton = document.getElementById('nextButton');
+const confirmButton = document.getElementById('confirmButton');
+const generateButton = document.getElementById('generateButton');
+const copyButton = document.getElementById('copyButton');
+const clearButton = document.getElementById('clearButton');
+const generateNote = document.getElementById('generateNote');
+const clearClipboardCheckbox = document.getElementById('clearClipboardCheckbox');
+const clearClipboardCheckboxLabel = document.getElementById('clearClipboardCheckboxLabel');
+const result = document.getElementById('result');
+const timeCount = document.getElementById('timeCount');
+const entropyCount = document.getElementById('entropyCount');
+// Dialogs
+const closeAlertButton = document.getElementById('closeAlertButton');
+const confirmDontClearClipboardDialogBox = document.getElementById('confirmDontClearClipboardDialogBox');
+const dontClearClipboardCancelButton = document.getElementById('dontClearClipboardCancelButton');
+const dontClearClipboardConfirmButton = document.getElementById('dontClearClipboardConfirmButton');
+const updateNotification = document.getElementById('updateNotification');
+const updateButton = document.getElementById('updateButton');
+
+// Preload images
+(new Image()).src = 'images/loading.webp';

scripts/ui.js

@@ -6,6 +6,13 @@
     Licensed under the MIT License. See LICENSE file in the project root for details.
 */
 
+// Apply custom scrollbar
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+if (!isSafari) {
+    document.body.classList.add('custom-scrollbar');
+}
+// End apply custom scrollbar
+
 document.addEventListener('DOMContentLoaded', function() {
     // Console warning
     console.log('%cWARNING!', 'font-size: 28px; color: #ffff00; background-color: #ff0000;');
@@ -34,13 +41,6 @@ document.addEventListener('DOMContentLoaded', function() {
     clearClipboardCheckbox.checked = true;
     // End Firefox reload fix
 
-    // Apply custom scrollbar
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-    if (!isSafari) {
-        document.body.classList.add('custom-scrollbar');
-    }
-    // End apply custom scrollbar
-
     form1.addEventListener('submit', function(event) {
         event.preventDefault();
 
@@ -209,33 +209,8 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     clearButton.addEventListener('click', function() {
-        if (clearClipboardCheckbox.checked) {
-            navigator.clipboard.writeText('');
-        }
-
         clearButton.blur();
-
-        // if scrolling will be not finished
-        setTimeout(() => {
-            document.location.reload(true);
-        }, 2000);
-
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-
-        const checkIfScrollingFinished = () => {
-            if (window.scrollY === 0) {
-                document.location.reload(true);
-            } else {
-                setTimeout(() => {
-                    requestAnimationFrame(checkIfScrollingFinished);
-                }, 50);
-            }
-        };
-
-        requestAnimationFrame(checkIfScrollingFinished);
+        reloadPage(clearClipboardCheckbox.checked);
     });
 
     clearClipboardCheckboxLabel.addEventListener('mousedown', (event) => {
@@ -268,6 +243,36 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+
+// Functions
+
+function reloadPage(clearClipboard) {
+    if (clearClipboard) {
+        navigator.clipboard.writeText('');
+    }
+
+    setTimeout(() => {
+        document.location.reload(true);
+    }, 2000);
+
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+
+    const checkIfScrollingFinished = () => {
+        if (window.scrollY === 0) {
+            document.location.reload(true);
+        } else {
+            setTimeout(() => {
+                requestAnimationFrame(checkIfScrollingFinished);
+            }, 50);
+        }
+    };
+
+    requestAnimationFrame(checkIfScrollingFinished);
+}
+
 function showAlertBox(alertTitle, alertDetails) {
     const alertBox = document.getElementById('alertBox');
 
@@ -277,34 +282,12 @@ function showAlertBox(alertTitle, alertDetails) {
     alertBox.showModal();
 }
 
-const form1 = document.getElementById('passphrase1Form');
-const form2 = document.getElementById('passphrase2Form');
-const passphrase1Input = document.getElementById('passphrase1Input');
-const passphrase2Input = document.getElementById('passphrase2Input');
-const showPassphrase1Checkbox = document.getElementById('showPassphrase1Checkbox');
-const showPassphrase2Checkbox = document.getElementById('showPassphrase2Checkbox');
-const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
-const showPassphrase1CheckboxLabel = document.getElementById('showPassphrase1CheckboxLabel');
-const showPassphrase2CheckboxLabel = document.getElementById('showPassphrase2CheckboxLabel');
-const showPasswordCheckboxLabel = document.getElementById('showPasswordCheckboxLabel');
-const passwordLengthRadioLabels = document.querySelectorAll('.passwordLengthRadioLabels');
-const passwordLengthChoice = document.getElementsByName('length');
-const nextButton = document.getElementById('nextButton');
-const confirmButton = document.getElementById('confirmButton');
-const generateButton = document.getElementById('generateButton');
-const copyButton = document.getElementById('copyButton');
-const clearButton = document.getElementById('clearButton');
-const generateNote = document.getElementById('generateNote');
-const clearClipboardCheckbox = document.getElementById('clearClipboardCheckbox');
-const clearClipboardCheckboxLabel = document.getElementById('clearClipboardCheckboxLabel');
-const result = document.getElementById('result');
-const timeCount = document.getElementById('timeCount');
-const entropyCount = document.getElementById('entropyCount');
-// Dialogs
-const closeAlertButton = document.getElementById('closeAlertButton');
-const confirmDontClearClipboardDialogBox = document.getElementById('confirmDontClearClipboardDialogBox');
-const dontClearClipboardCancelButton = document.getElementById('dontClearClipboardCancelButton');
-const dontClearClipboardConfirmButton = document.getElementById('dontClearClipboardConfirmButton');
-
-// Preload images
-(new Image()).src = 'images/loading.webp';
+function showUpdateNotification(worker) {
+    updateNotification.style.animation = 'updateNotificationAnimation 300ms ease';
+    updateNotification.show();
+
+    updateButton.addEventListener('click', () => {
+        updateButton.setAttribute('disabled', 'disabled');
+        updateServiceWorker(worker);
+    });
+}

scripts/updater.js

@@ -0,0 +1,45 @@
+/*  (c) 2024 Piotr Kniaz
+
+    This file is part of HBDPG-2.
+    Repository: https://github.com/HBDPG-2/hbdpg-2.github.io
+
+    Licensed under the MIT License. See LICENSE file in the project root for details.
+*/
+
+const registerServiceWorker = async () => {
+    if ('serviceWorker' in navigator) {
+        try {
+            const registration = await navigator.serviceWorker.register('./serviceworker.js', { scope: './' } );
+
+            if (registration.waiting) {
+                showUpdateNotification(registration.waiting);
+            }
+
+            registration.addEventListener('updatefound', () => {
+                const newWorker = registration.installing || registration.waiting;
+
+                if (newWorker) {
+                    newWorker.addEventListener('statechange', () => {
+                        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                            showUpdateNotification(newWorker);
+                        }
+                    });
+                }
+            });
+        } catch (error) {
+            console.error(`Service Worker registration failed with ${error}`);
+        }
+    }
+};
+
+registerServiceWorker();
+
+function updateServiceWorker(worker) {
+    worker.postMessage({ type: 'SKIP_WAITING' });
+
+    worker.addEventListener('statechange', () => {
+        if (worker.state === 'activated') {
+            reloadPage(false);
+        }
+    });
+}

serviceworker.js

@@ -0,0 +1,68 @@
+/*  (c) 2024 Piotr Kniaz
+
+    This file is part of HBDPG-2.
+    Repository: https://github.com/HBDPG-2/hbdpg-2.github.io
+
+    Licensed under the MIT License. See LICENSE file in the project root for details.
+*/
+
+const CACHE_VERSION = 'v20241212-0';
+// const CACHE_VERSION = 'v1-debug';
+
+const ASSETS = [
+    '/',
+    '/index.html',
+    '/manifest.webmanifest',
+    '/favicon.ico',
+    '/images/Logo-beta.webp',
+    '/images/check.svg',
+    '/images/loading.webp',
+    '/styles/style.css',
+    '/scripts/ui-items.js',
+    '/scripts/ui.js',
+    '/scripts/updater.js',
+    '/scripts/core.js',
+    '/scripts/argon2.js',
+    '/scripts/argon2/argon2.js',
+    '/scripts/argon2/argon2.wasm',
+    '/scripts/argon2/argon2-simd.wasm'
+];
+
+self.addEventListener('install', event => {
+    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(ASSETS)));
+});
+
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches.keys().then(cacheVersions => {
+            return Promise.all(
+                cacheVersions.map(cacheVersion => {
+                    if (cacheVersion !== CACHE_VERSION) {
+                        return caches.delete(cacheVersion);
+                    }
+                })
+            );
+        })
+    );
+
+    self.clients.claim();
+});
+
+self.addEventListener('message', event => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+        self.skipWaiting();
+    }
+});
+
+self.addEventListener('fetch', event => {
+    event.respondWith(
+        caches.match(event.request).then(response => {
+            return response || fetch(event.request).catch(() => {
+                return new Response('Network error occurred.', {
+                    status: 503,
+                    statusText: 'Service Unavailable',
+                });
+            });
+        })
+    );
+});

styles/style.css

@@ -78,6 +78,30 @@ header {
     pointer-events: none;
 }
 
+#updateNotification {
+    z-index: 500;
+    position: fixed;
+    transform: translateY(80px);
+    /* animation: updateNotificationAnimation 300ms ease; */
+}
+
+@keyframes updateNotificationAnimation {
+    from { transform: translateY(-80px); }
+    to { transform: translateY(80px); }
+}
+
+#updateButton {
+    margin-top: 0;
+}
+
+#updateButton:disabled {
+    border: 2px solid #202020;
+    cursor: auto;
+    color: #404040;
+
+    transform: none;
+}
+
 main {
     padding-top: 80px;
     margin-left:auto;