Force asset reload token on first visit

This commit is contained in:
seo
2026-07-21 18:25:07 +09:00
parent 9a4a6e59b2
commit 6215139136
5 changed files with 17 additions and 6 deletions
+1 -1
View File
@@ -44,7 +44,7 @@ Financial은 개인 금융 데이터를 서버 렌더링 PHP 화면에서 관리
- `public/assets/asset-reload.js`: 열린 브라우저에서 파일 묶음 hash가 달라졌는지 확인하고 새로 여는 스크립트 - `public/assets/asset-reload.js`: 열린 브라우저에서 파일 묶음 hash가 달라졌는지 확인하고 새로 여는 스크립트
- `public/assets/pwa.js`, `public/sw.js`: PWA 동작 - `public/assets/pwa.js`, `public/sw.js`: PWA 동작
`asset-version.php``app`의 PHP 파일과 `public`의 PHP/HTML/JS/CSS/manifest/icon 파일을 읽어 크기, 수정 시각, sha256 hash를 묶은 버전을 만듭니다. 공통 헤더, 로그인, 회원가입 화면에서 `asset-reload.js`를 불러오며, 파일 묶음 hash가 달라지면 Cache Storage를 비우고 현재 화면을 다시 엽니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다. `asset-version.php``app`의 PHP 파일과 `public`의 PHP/HTML/JS/CSS/manifest/icon 파일을 읽어 크기, 수정 시각, sha256 hash를 묶은 버전을 만듭니다. 공통 헤더, 로그인, 회원가입 화면에서 `asset-reload.js`를 불러오며, 파일 묶음 hash가 달라지면 Cache Storage를 비우고 현재 화면을 다시 엽니다. 현재 URL의 `assetReload` 토큰이 최신 파일 묶음 hash와 다르면 첫 진입도 토큰을 붙인 URL로 다시 열어 낡은 JS/CSS가 먼저 실행되는 상황을 줄입니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다.
## 데이터/저장소 ## 데이터/저장소
+1 -1
View File
@@ -37,7 +37,7 @@
<link href="/assets/vendor/bootstrap.min.css" rel="stylesheet"> <link href="/assets/vendor/bootstrap.min.css" rel="stylesheet">
<link href="/assets/app.css" rel="stylesheet"> <link href="/assets/app.css" rel="stylesheet">
<script src="/assets/asset-reload.js?v=20260721_mobilefix1" data-service="financial" defer></script> <script src="/assets/asset-reload.js?v=20260721_autotoken1" data-service="financial" defer></script>
<script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script> <script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
<script src="/assets/vendor/chart.umd.js"></script> <script src="/assets/vendor/chart.umd.js"></script>
</head> </head>
+13 -2
View File
@@ -133,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) { if (currentAssetToken) {
applyAssetToken(currentAssetToken); applyAssetToken(currentAssetToken);
new MutationObserver(function () { new MutationObserver(function () {
@@ -155,7 +159,8 @@
var token = version.slice(0, 12); var token = version.slice(0, 12);
var marker = token + ':' + Math.floor(Date.now() / 10000); var marker = token + ':' + Math.floor(Date.now() / 10000);
if (sessionGet(reloadKey) === marker) return; if (assetTokenFromLocation() === token) return;
if (assetTokenFromLocation() && sessionGet(reloadKey) === marker) return;
sessionSet(reloadKey, marker); sessionSet(reloadKey, marker);
withTimeout(deleteCaches(), 2500).then(function () { withTimeout(deleteCaches(), 2500).then(function () {
@@ -189,9 +194,15 @@
}).then(function (data) { }).then(function (data) {
if (!data || data.result !== 'ok' || !data.version) return; if (!data || data.result !== 'ok' || !data.version) return;
var token = data.version.slice(0, 12);
var previous = storeGet(storageKey); var previous = storeGet(storageKey);
storeSet(storageKey, data.version); storeSet(storageKey, data.version);
if (assetTokenFromLocation() !== token) {
reloadWith(data.version);
return;
}
if (previous && previous !== data.version) { if (previous && previous !== data.version) {
reloadWith(data.version); reloadWith(data.version);
} }
+1 -1
View File
@@ -78,7 +78,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<link href="/assets/vendor/bootstrap.min.css" rel="stylesheet"> <link href="/assets/vendor/bootstrap.min.css" rel="stylesheet">
<link href="/assets/app.css" rel="stylesheet"> <link href="/assets/app.css" rel="stylesheet">
<script src="/assets/asset-reload.js?v=20260721_mobilefix1" data-service="financial" defer></script> <script src="/assets/asset-reload.js?v=20260721_autotoken1" data-service="financial" defer></script>
<script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script> <script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
</head> </head>
<body> <body>
+1 -1
View File
@@ -87,7 +87,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<link rel="manifest" href="/manifest.webmanifest"> <link rel="manifest" href="/manifest.webmanifest">
<link href="/assets/vendor/bootstrap.min.css" rel="stylesheet"> <link href="/assets/vendor/bootstrap.min.css" rel="stylesheet">
<link href="/assets/app.css" rel="stylesheet"> <link href="/assets/app.css" rel="stylesheet">
<script src="/assets/asset-reload.js?v=20260721_mobilefix1" data-service="financial" defer></script> <script src="/assets/asset-reload.js?v=20260721_autotoken1" data-service="financial" defer></script>
<script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script> <script src="https://chaegeon.com/log/bancheck.min.js?_=<?php echo time(); ?>"></script>
</head> </head>
<body> <body>