차량 모니터 에셋 갱신 보강

assets/asset-reload.js

@@ -19,6 +19,82 @@
     var storageKey = 'assetVersion:' + service;
     var reloadKey = 'assetReload:' + service;
     var running = false;
+    var memoryStore = {};
+    var lastCheckAt = 0;
+
+    function cookieName(key) {
+        return key.replace(/[^A-Za-z0-9_-]/g, '_');
+    }
+
+    function getCookie(key) {
+        var name = cookieName(key) + '=';
+        return (document.cookie || '').split(';').map(function (part) {
+            return part.trim();
+        }).reduce(function (found, part) {
+            if (found || part.indexOf(name) !== 0) return found;
+            return decodeURIComponent(part.slice(name.length));
+        }, '');
+    }
+
+    function setCookie(key, value) {
+        document.cookie = cookieName(key) + '=' + encodeURIComponent(value) + '; Path=/; Max-Age=31536000; SameSite=Lax';
+    }
+
+    function storeGet(key) {
+        try {
+            return localStorage.getItem(key) || getCookie(key) || memoryStore[key] || '';
+        } catch (e) {
+            return getCookie(key) || memoryStore[key] || '';
+        }
+    }
+
+    function storeSet(key, value) {
+        memoryStore[key] = value;
+        try {
+            localStorage.setItem(key, value);
+        } catch (e) {}
+        try {
+            setCookie(key, value);
+        } catch (e) {}
+    }
+
+    function sessionGet(key) {
+        try {
+            return sessionStorage.getItem(key) || memoryStore[key] || '';
+        } catch (e) {
+            return memoryStore[key] || '';
+        }
+    }
+
+    function sessionSet(key, value) {
+        memoryStore[key] = value;
+        try {
+            sessionStorage.setItem(key, value);
+        } catch (e) {}
+    }
+
+    function withTimeout(promise, timeout) {
+        return new Promise(function (resolve) {
+            var done = false;
+            var timer = setTimeout(function () {
+                if (done) return;
+                done = true;
+                resolve();
+            }, timeout);
+
+            Promise.resolve(promise).then(function () {
+                if (done) return;
+                done = true;
+                clearTimeout(timer);
+                resolve();
+            }).catch(function () {
+                if (done) return;
+                done = true;
+                clearTimeout(timer);
+                resolve();
+            });
+        });
+    }
 
     function addQuery(url, key, value) {
         var parsed = new URL(url, window.location.href);
@@ -57,7 +133,11 @@
         });
     }
 
-    var currentAssetToken = new URL(window.location.href).searchParams.get('assetReload') || '';
+    function assetTokenFromLocation() {
+        return new URL(window.location.href).searchParams.get('assetReload') || '';
+    }
+
+    var currentAssetToken = assetTokenFromLocation();
     if (currentAssetToken) {
         applyAssetToken(currentAssetToken);
         new MutationObserver(function () {
@@ -79,17 +159,27 @@
         var token = version.slice(0, 12);
         var marker = token + ':' + Math.floor(Date.now() / 10000);
 
-        if (sessionStorage.getItem(reloadKey) === marker) return;
+        if (assetTokenFromLocation() === token) return;
+        if (assetTokenFromLocation() && sessionGet(reloadKey) === marker) return;
 
-        sessionStorage.setItem(reloadKey, marker);
-        deleteCaches().then(function () {
+        sessionSet(reloadKey, marker);
+        withTimeout(deleteCaches(), 2500).then(function () {
+            if (navigator.serviceWorker && navigator.serviceWorker.getRegistrations) {
+                navigator.serviceWorker.getRegistrations().then(function (registrations) {
+                    registrations.forEach(function (registration) {
+                        if (registration && typeof registration.update === 'function') registration.update();
+                    });
+                }).catch(function () {});
+            }
             window.location.replace(addQuery(window.location.href, 'assetReload', token));
         });
     }
 
     function check(force) {
         if (running || (!force && document.hidden)) return;
+        if (force && Date.now() - lastCheckAt < 1000) return;
 
+        lastCheckAt = Date.now();
         running = true;
         fetch(addQuery(endpoint, '_', String(Date.now())), {
             cache: 'no-store',
@@ -104,23 +194,45 @@
         }).then(function (data) {
             if (!data || data.result !== 'ok' || !data.version) return;
 
-            var previous = localStorage.getItem(storageKey);
-            localStorage.setItem(storageKey, data.version);
+            var token = data.version.slice(0, 12);
+            var previous = storeGet(storageKey);
+            storeSet(storageKey, data.version);
+
+            if (assetTokenFromLocation() !== token) {
+                reloadWith(data.version);
+                return;
+            }
 
             if (previous && previous !== data.version) {
                 reloadWith(data.version);
             }
-        }).catch(function () {}).finally(function () {
+        }).then(function () {
+            running = false;
+        }, function () {
             running = false;
         });
     }
 
     window.addEventListener('pageshow', function () {
         check(true);
+        setTimeout(function () { check(true); }, 250);
+        setTimeout(function () { check(true); }, 1500);
     });
     window.addEventListener('focus', function () {
         check(true);
     });
+    window.addEventListener('online', function () {
+        check(true);
+    });
+    window.addEventListener('orientationchange', function () {
+        setTimeout(function () { check(true); }, 500);
+    });
+    ['pointerdown', 'touchstart', 'click'].forEach(function (eventName) {
+        window.addEventListener(eventName, function () {
+            if (document.hidden || Date.now() - lastCheckAt < 5000) return;
+            check(true);
+        }, { passive: true });
+    });
     document.addEventListener('visibilitychange', function () {
         if (!document.hidden) check(true);
     });