seo/car
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

차량 모니터 에셋 갱신 보강

Browse Source
This commit is contained in:
seo
2026-07-21 19:15:34 +09:00
parent f25de4dcfb
commit cf2c90e4ce
4 changed files with 125 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -64,9 +64,9 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
- `sw.js`: service worker
- `assets/`: 아이콘과 정적 자산
`asset-version.php`는 차량 모니터의 PHP/JS/CSS/manifest/icon 파일을 읽어 크기, 수정 시각, sha256 hash를 묶은 버전을 만듭니다. `assets/asset-reload.js`는 열린 모니터 화면에서 이 값을 확인하고, 달라지면 Cache Storage를 비운 뒤 현재 화면을 다시 엽니다.
`asset-version.php`는 차량 모니터의 PHP/JS/CSS/manifest/icon 파일을 읽어 크기, 수정 시각, sha256 hash를 묶은 버전을 만듭니다. `assets/asset-reload.js`는 열린 모니터 화면에서 이 값을 확인하고, 달라지면 Cache Storage를 비운 뒤 현재 화면을 다시 엽니다. 현재 URL의 `assetReload` 토큰이 최신 파일 묶음 hash와 다르면 첫 진입도 토큰을 붙인 URL로 다시 열어 낡은 JS/CSS가 먼저 실행되는 상황을 줄입니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다.
`sw.js`는 아이콘과 manifest 같은 정적 자산만 캐시합니다. `monitor.php`, 인증 요청, AJAX/usage 같은 PHP 응답은 인증 쿠키와 실시간 상태가 엮이므로 service worker 캐시 대상에서 제외합니다.
`sw.js`는 기존 정적 캐시를 정리한 뒤 요청을 네트워크로 넘깁니다. `monitor.php`, 인증 요청, AJAX/usage 같은 PHP 응답은 인증 쿠키와 실시간 상태가 엮이므로 service worker 캐시 대상에서 제외합니다.
## 데이터/저장소
assets/asset-reload.js
+119 -7
View File
@@ -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);
});
monitor.php
+2 -2
View File
@@ -1202,7 +1202,7 @@ $carMonitorSession = car_monitor_launcher_session();
<link rel="icon" href="/car/assets/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/car/assets/apple-touch-icon.png">
<link rel="manifest" href="/car/assets/site.webmanifest">
<script src="/car/assets/asset-reload.js?v=20260710_assetfix1" data-service="car" defer></script>
<script src="/car/assets/asset-reload.js?v=20260721_nocache1" data-service="car" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
@@ -3350,7 +3350,7 @@ $carMonitorSession = car_monitor_launcher_session();
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/car/sw.js', {scope: '/car/'})
navigator.serviceWorker.register('/car/sw.js?v=20260721_nocache1', {scope: '/car/'})
.then(registration => registration.update())
.catch(() => {});
});
sw.js
+2 -20
View File
@@ -1,10 +1,5 @@
const CACHE_NAME = 'car-monitor-v2';
const CACHE_NAME = 'car-monitor-nocache-v20260721';
const CORE_ASSETS = [
'/car/assets/favicon.svg',
'/car/assets/icon-192.png',
'/car/assets/icon-512.png',
'/car/assets/apple-touch-icon.png',
'/car/assets/site.webmanifest'
];
self.addEventListener('install', event => {
@@ -32,18 +27,5 @@ self.addEventListener('fetch', event => {
return;
}
if (event.request.mode === 'navigate' || url.pathname.endsWith('.php') || url.searchParams.has('mode')) {
return;
}
event.respondWith(
fetch(event.request)
.then(response => {
if (!response || !response.ok) return response;
const copy = response.clone();
caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy));
return response;
})
.catch(() => caches.match(event.request))
);
event.respondWith(fetch(event.request, { cache: 'no-store' }));
});