에셋 리로드 파일별 캐시 검증 보강
This commit is contained in:
@@ -31,7 +31,7 @@ Seoul은 서버에 흩어진 웹 서비스들을 한 화면에서 찾기 위한
|
||||
- `sw.js`: 과거 등록된 service worker 정리용 파일
|
||||
- `assets/`: 아이콘과 정적 자산
|
||||
|
||||
`asset-version.php`는 `car/`를 제외한 Seoul 대시보드의 PHP/JS/CSS/manifest/icon 파일을 읽어 크기, 수정 시각, sha256 hash를 묶은 버전을 만듭니다. `assets/asset-reload.js`는 열린 화면에서 이 값을 확인하고, 달라지면 Cache Storage를 비우고 service worker 등록을 해제한 뒤 현재 화면을 다시 엽니다. 현재 URL의 `assetReload` 토큰이 최신 파일 묶음 hash와 다르면 첫 진입도 토큰을 붙인 URL로 다시 열어 낡은 JS/CSS가 먼저 실행되는 상황을 줄입니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다. `index.php`는 `no-store` 헤더를 내려 문서 자체가 오래 남지 않게 하고, service worker는 더 이상 새로 등록하지 않습니다.
|
||||
`asset-version.php`는 `car/`를 제외한 Seoul 대시보드의 PHP/JS/CSS/manifest/icon 파일을 읽어 전체 버전과 파일별 버전을 만듭니다. `index.php`는 실제 파일 수정 시각과 hash 기반 `v` 값을 정적 파일 경로에 붙입니다. `assets/asset-reload.js`는 전체 버전이나 현재 로드된 script/link의 파일별 `v` 값이 달라지면 Cache Storage를 비우고 service worker 등록을 해제한 뒤 현재 화면을 다시 엽니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다. `index.php`는 `no-store` 헤더를 내려 문서 자체가 오래 남지 않게 하고, service worker는 더 이상 새로 등록하지 않습니다.
|
||||
|
||||
## 입력 소스
|
||||
|
||||
|
||||
+6
-1
@@ -62,22 +62,27 @@ function collect_asset_files(string $root, array $scanRoots, array $excludePrefi
|
||||
clearstatcache();
|
||||
$rootPath = realpath($root);
|
||||
$fingerprints = [];
|
||||
$assets = [];
|
||||
|
||||
foreach (collect_asset_files($root, $scanRoots, $excludePrefixes) as $fullPath) {
|
||||
$relativePath = ltrim(str_replace($rootPath ?: $root, '', $fullPath), DIRECTORY_SEPARATOR);
|
||||
$fileHash = is_readable($fullPath) ? (hash_file('sha256', $fullPath) ?: 'hash-failed') : 'unreadable';
|
||||
$fileVersion = (string)filemtime($fullPath) . '-' . substr($fileHash, 0, 10);
|
||||
$publicPath = '/' . str_replace(DIRECTORY_SEPARATOR, '/', $relativePath);
|
||||
$fingerprints[] = implode('|', [
|
||||
str_replace(DIRECTORY_SEPARATOR, '/', $relativePath),
|
||||
ltrim($publicPath, '/'),
|
||||
(string)filesize($fullPath),
|
||||
(string)filemtime($fullPath),
|
||||
$fileHash,
|
||||
]);
|
||||
$assets[$publicPath] = $fileVersion;
|
||||
}
|
||||
|
||||
echo json_encode([
|
||||
'result' => 'ok',
|
||||
'service' => $service,
|
||||
'version' => hash('sha256', implode("\n", $fingerprints)),
|
||||
'assets' => $assets,
|
||||
'count' => count($fingerprints),
|
||||
'generatedAt' => time(),
|
||||
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
|
||||
|
||||
+28
-7
@@ -21,6 +21,7 @@
|
||||
var running = false;
|
||||
var memoryStore = {};
|
||||
var lastCheckAt = 0;
|
||||
var bfcacheReturn = false;
|
||||
|
||||
function cookieName(key) {
|
||||
return key.replace(/[^A-Za-z0-9_-]/g, '_');
|
||||
@@ -167,12 +168,26 @@
|
||||
|
||||
unregisterServiceWorkers();
|
||||
|
||||
function reloadWith(version) {
|
||||
function loadedAssetMismatch(assets) {
|
||||
if (!assets || typeof assets !== 'object') return false;
|
||||
|
||||
var nodes = Array.prototype.slice.call(document.querySelectorAll('script[src], link[href]'));
|
||||
return nodes.some(function (element) {
|
||||
var attr = element.tagName.toLowerCase() === 'script' ? 'src' : 'href';
|
||||
var current = element.getAttribute(attr);
|
||||
var parsed = current ? sameOriginUrl(current) : null;
|
||||
if (!parsed || !Object.prototype.hasOwnProperty.call(assets, parsed.pathname)) return false;
|
||||
|
||||
return parsed.searchParams.get('v') !== String(assets[parsed.pathname]);
|
||||
});
|
||||
}
|
||||
|
||||
function reloadWith(version, force) {
|
||||
var token = version.slice(0, 12);
|
||||
var marker = token + ':' + Math.floor(Date.now() / 10000);
|
||||
|
||||
if (assetTokenFromLocation() === token) return;
|
||||
if (assetTokenFromLocation() && sessionGet(reloadKey) === marker) return;
|
||||
if (!force && assetTokenFromLocation() === token) return;
|
||||
if (sessionGet(reloadKey) === marker) return;
|
||||
|
||||
sessionSet(reloadKey, marker);
|
||||
withTimeout(Promise.all([deleteCaches(), unregisterServiceWorkers()]), 2500).then(function () {
|
||||
@@ -201,15 +216,18 @@
|
||||
|
||||
var token = data.version.slice(0, 12);
|
||||
var previous = storeGet(storageKey);
|
||||
var mismatch = loadedAssetMismatch(data.assets);
|
||||
var forceReload = bfcacheReturn;
|
||||
bfcacheReturn = false;
|
||||
storeSet(storageKey, data.version);
|
||||
|
||||
if (assetTokenFromLocation() !== token) {
|
||||
reloadWith(data.version);
|
||||
if (assetTokenFromLocation() !== token || mismatch || forceReload) {
|
||||
reloadWith(data.version, mismatch || forceReload);
|
||||
return;
|
||||
}
|
||||
|
||||
if (previous && previous !== data.version) {
|
||||
reloadWith(data.version);
|
||||
reloadWith(data.version, false);
|
||||
}
|
||||
}).then(function () {
|
||||
running = false;
|
||||
@@ -218,7 +236,10 @@
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('pageshow', function () {
|
||||
window.addEventListener('pageshow', function (event) {
|
||||
if (event && event.persisted) {
|
||||
bfcacheReturn = true;
|
||||
}
|
||||
check(true);
|
||||
setTimeout(function () { check(true); }, 250);
|
||||
setTimeout(function () { check(true); }, 1500);
|
||||
|
||||
@@ -5,6 +5,20 @@ header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
|
||||
header('Pragma: no-cache');
|
||||
header('Expires: 0');
|
||||
|
||||
function asset_url(string $path): string
|
||||
{
|
||||
$fullPath = __DIR__ . '/' . ltrim($path, '/');
|
||||
$version = 'dev';
|
||||
|
||||
if (is_file($fullPath)) {
|
||||
$mtime = filemtime($fullPath) ?: time();
|
||||
$hash = is_readable($fullPath) ? substr(hash_file('sha256', $fullPath) ?: '', 0, 10) : '';
|
||||
$version = $mtime . ($hash !== '' ? '-' . $hash : '');
|
||||
}
|
||||
|
||||
return $path . '?v=' . rawurlencode($version);
|
||||
}
|
||||
|
||||
$nginxFiles = [
|
||||
'/etc/nginx/nginx.conf',
|
||||
'/etc/nginx/sites-enabled',
|
||||
@@ -317,12 +331,12 @@ ksort($items, SORT_NATURAL);
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="Seoul">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
|
||||
<link rel="icon" href="assets/icon-32.png" type="image/png" sizes="32x32">
|
||||
<link rel="icon" href="assets/icon-192.png" type="image/png" sizes="192x192">
|
||||
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
|
||||
<link rel="manifest" href="manifest.webmanifest">
|
||||
<script src="assets/asset-reload.js?v=20260721_nocache1" data-service="seoul" defer></script>
|
||||
<link rel="icon" href="<?= htmlspecialchars(asset_url('assets/favicon.svg'), ENT_QUOTES, 'UTF-8') ?>" type="image/svg+xml">
|
||||
<link rel="icon" href="<?= htmlspecialchars(asset_url('assets/icon-32.png'), ENT_QUOTES, 'UTF-8') ?>" type="image/png" sizes="32x32">
|
||||
<link rel="icon" href="<?= htmlspecialchars(asset_url('assets/icon-192.png'), ENT_QUOTES, 'UTF-8') ?>" type="image/png" sizes="192x192">
|
||||
<link rel="apple-touch-icon" href="<?= htmlspecialchars(asset_url('assets/apple-touch-icon.png'), ENT_QUOTES, 'UTF-8') ?>">
|
||||
<link rel="manifest" href="<?= htmlspecialchars(asset_url('manifest.webmanifest'), ENT_QUOTES, 'UTF-8') ?>">
|
||||
<script src="<?= htmlspecialchars(asset_url('assets/asset-reload.js'), ENT_QUOTES, 'UTF-8') ?>" data-service="seoul" defer></script>
|
||||
<script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
|
||||
<style>
|
||||
* {
|
||||
|
||||
Reference in New Issue
Block a user