에셋 리로드 파일별 캐시 검증 보강

README.md

@@ -45,7 +45,7 @@ Financial은 개인 금융 데이터를 서버 렌더링 PHP 화면에서 관리
 - `public/assets/pwa.js`: 기존 service worker 등록 정리
 - `public/sw.js`: 과거 등록된 service worker 정리용 파일
 
-`asset-version.php`는 `app`의 PHP 파일과 `public`의 PHP/HTML/JS/CSS/manifest/icon 파일을 읽어 크기, 수정 시각, sha256 hash를 묶은 버전을 만듭니다. 공통 헤더, 로그인, 회원가입 화면에서 `asset-reload.js`를 불러오며, 파일 묶음 hash가 달라지면 Cache Storage를 비우고 service worker 등록을 해제한 뒤 현재 화면을 다시 엽니다. 현재 URL의 `assetReload` 토큰이 최신 파일 묶음 hash와 다르면 첫 진입도 토큰을 붙인 URL로 다시 열어 낡은 JS/CSS가 먼저 실행되는 상황을 줄입니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다. 화면 PHP는 `no-store` 헤더를 내려 문서 자체가 오래 남지 않게 하고, service worker는 더 이상 새로 등록하지 않습니다.
+`asset-version.php`는 `app`의 PHP 파일과 `public`의 PHP/HTML/JS/CSS/manifest/icon 파일을 읽어 전체 버전과 파일별 버전을 만듭니다. 공통 헤더, 로그인, 회원가입 화면은 실제 파일 수정 시각과 hash 기반 `v` 값을 정적 파일 경로에 붙입니다. `asset-reload.js`는 전체 버전이나 현재 로드된 script/link의 파일별 `v` 값이 달라지면 Cache Storage를 비우고 service worker 등록을 해제한 뒤 현재 화면을 다시 엽니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다. 화면 PHP는 `no-store` 헤더를 내려 문서 자체가 오래 남지 않게 하고, service worker는 더 이상 새로 등록하지 않습니다.
 
 ## 데이터/저장소
 

app/lib/helpers.php

@@ -5,6 +5,21 @@ function h($value): string
     return htmlspecialchars((string)($value ?? ''), ENT_QUOTES, 'UTF-8');
 }
 
+function asset_url(string $path): string
+{
+    $publicRoot = realpath(__DIR__ . '/../../public');
+    $fullPath = $publicRoot ? $publicRoot . '/' . ltrim($path, '/') : '';
+    $version = 'dev';
+
+    if ($fullPath !== '' && 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);
+}
+
 function won($value): string
 {
     return number_format((float)$value, 0) . '원';

app/views/header.php

@@ -23,10 +23,10 @@ if (function_exists('send_private_no_store_headers')) {
     <meta name="apple-mobile-web-app-title" content="Financial">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
-    <link rel="icon" type="image/png" href="/favicon.png?v=2">
-    <link rel="shortcut icon" href="/favicon.png?v=2">
-    <link rel="apple-touch-icon" href="/favicon.png?v=2">
-    <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="icon" type="image/png" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="shortcut icon" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="apple-touch-icon" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="manifest" href="<?= h(asset_url('/manifest.webmanifest')) ?>">
 
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="Financial">
@@ -40,9 +40,9 @@ if (function_exists('send_private_no_store_headers')) {
     <meta name="twitter:description" content="개인 금융 통합 관리 서비스">
     <meta name="twitter:image" content="https://seo.chaegeon.com/favicon.png">
     
-    <link href="/assets/vendor/bootstrap.min.css" rel="stylesheet">
-    <link href="/assets/app.css" rel="stylesheet">
-    <script src="/assets/asset-reload.js?v=20260721_nocache1" data-service="financial" defer></script>
+    <link href="<?= h(asset_url('/assets/vendor/bootstrap.min.css')) ?>" rel="stylesheet">
+    <link href="<?= h(asset_url('/assets/app.css')) ?>" rel="stylesheet">
+    <script src="<?= h(asset_url('/assets/asset-reload.js')) ?>" data-service="financial" defer></script>
     <script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
     <script src="/assets/vendor/chart.umd.js"></script>
 </head>

public/asset-version.php

@@ -55,22 +55,30 @@ function collect_asset_files(string $root, array $scanRoots): array
 clearstatcache();
 $rootPath = realpath($root);
 $fingerprints = [];
+$assets = [];
 
 foreach (collect_asset_files($root, $scanRoots) 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);
     $fingerprints[] = implode('|', [
         str_replace(DIRECTORY_SEPARATOR, '/', $relativePath),
         (string)filesize($fullPath),
         (string)filemtime($fullPath),
         $fileHash,
     ]);
+
+    if (str_starts_with($relativePath, 'public' . DIRECTORY_SEPARATOR)) {
+        $publicPath = substr($relativePath, strlen('public'));
+        $assets[str_replace(DIRECTORY_SEPARATOR, '/', $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);

public/assets/asset-reload.js

@@ -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);

public/login.php

@@ -61,10 +61,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     <meta name="apple-mobile-web-app-title" content="Financial">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
-    <link rel="icon" type="image/png" href="/favicon.png?v=2">
-    <link rel="shortcut icon" href="/favicon.png?v=2">
-    <link rel="apple-touch-icon" href="/favicon.png?v=2">
-    <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="icon" type="image/png" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="shortcut icon" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="apple-touch-icon" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="manifest" href="<?= h(asset_url('/manifest.webmanifest')) ?>">
 
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="Financial">
@@ -78,9 +78,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     <meta name="twitter:description" content="개인 금융 통합 관리 서비스">
     <meta name="twitter:image" content="https://seo.chaegeon.com/favicon.png">
 
-    <link href="/assets/vendor/bootstrap.min.css" rel="stylesheet">
-    <link href="/assets/app.css" rel="stylesheet">
-    <script src="/assets/asset-reload.js?v=20260721_nocache1" data-service="financial" defer></script>
+    <link href="<?= h(asset_url('/assets/vendor/bootstrap.min.css')) ?>" rel="stylesheet">
+    <link href="<?= h(asset_url('/assets/app.css')) ?>" rel="stylesheet">
+    <script src="<?= h(asset_url('/assets/asset-reload.js')) ?>" data-service="financial" defer></script>
     <script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
 </head>
 <body>

public/register.php

@@ -84,12 +84,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Financial">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <link rel="icon" type="image/png" href="/favicon.png?v=2">
-    <link rel="apple-touch-icon" href="/favicon.png?v=2">
-    <link rel="manifest" href="/manifest.webmanifest">
-    <link href="/assets/vendor/bootstrap.min.css" rel="stylesheet">
-    <link href="/assets/app.css" rel="stylesheet">
-    <script src="/assets/asset-reload.js?v=20260721_nocache1" data-service="financial" defer></script>
+    <link rel="icon" type="image/png" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="apple-touch-icon" href="<?= h(asset_url('/favicon.png')) ?>">
+    <link rel="manifest" href="<?= h(asset_url('/manifest.webmanifest')) ?>">
+    <link href="<?= h(asset_url('/assets/vendor/bootstrap.min.css')) ?>" rel="stylesheet">
+    <link href="<?= h(asset_url('/assets/app.css')) ?>" rel="stylesheet">
+    <script src="<?= h(asset_url('/assets/asset-reload.js')) ?>" data-service="financial" defer></script>
     <script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
 </head>
 <body>