서비스워커 등록 해제

This commit is contained in:
seo
2026-07-22 01:06:29 +09:00
parent cf5fe5b050
commit 07836bad10
3 changed files with 21 additions and 13 deletions
+4 -3
View File
@@ -18,7 +18,7 @@ Financial은 개인 금융 데이터를 서버 렌더링 PHP 화면에서 관리
- 반복거래 관리 - 반복거래 관리
- 가맹점 자동분류 규칙 관리 - 가맹점 자동분류 규칙 관리
- 카테고리 추천 API - 카테고리 추천 API
- PWA assets와 offline 화면 제공 - PWA manifest와 icon 제공
## 주요 API/흐름 ## 주요 API/흐름
@@ -42,9 +42,10 @@ Financial은 개인 금융 데이터를 서버 렌더링 PHP 화면에서 관리
- `public/asset-version.php`: 앱/PWA 파일 묶음의 현재 hash를 내려주는 JSON 엔드포인트 - `public/asset-version.php`: 앱/PWA 파일 묶음의 현재 hash를 내려주는 JSON 엔드포인트
- `public/assets/app.css`: 화면 스타일 - `public/assets/app.css`: 화면 스타일
- `public/assets/asset-reload.js`: 열린 브라우저에서 파일 묶음 hash가 달라졌는지 확인하고 새로 여는 스크립트 - `public/assets/asset-reload.js`: 열린 브라우저에서 파일 묶음 hash가 달라졌는지 확인하고 새로 여는 스크립트
- `public/assets/pwa.js`, `public/sw.js`: PWA 동작 - `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를 비우고 현재 화면을 다시 엽니다. 현재 URL의 `assetReload` 토큰이 최신 파일 묶음 hash와 다르면 첫 진입도 토큰을 붙인 URL로 다시 열어 낡은 JS/CSS가 먼저 실행되는 상황을 줄입니다. 모바일/삼성 브라우저 호환을 위해 화면 복귀, 온라인 복귀, 터치/클릭 복귀 이벤트도 확인하고, Web Storage 실패 시 쿠키 fallback으로 이전 버전을 비교합니다. 화면 PHP는 `no-store` 헤더를 내려 문서 자체가 오래 남지 않게 하고, service worker는 오프라인 안내 화면만 남긴 뒤 앱 파일과 HTML은 네트워크에서 다시 받습니다. `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는 더 이상 새로 등록하지 않습니다.
## 데이터/저장소 ## 데이터/저장소
+13 -8
View File
@@ -155,6 +155,18 @@
}).catch(function () {}); }).catch(function () {});
} }
function unregisterServiceWorkers() {
if (!navigator.serviceWorker || !navigator.serviceWorker.getRegistrations) return Promise.resolve();
return navigator.serviceWorker.getRegistrations().then(function (registrations) {
return Promise.all(registrations.map(function (registration) {
return registration.unregister().catch(function () {});
}));
}).catch(function () {});
}
unregisterServiceWorkers();
function reloadWith(version) { function reloadWith(version) {
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);
@@ -163,14 +175,7 @@
if (assetTokenFromLocation() && sessionGet(reloadKey) === marker) return; if (assetTokenFromLocation() && sessionGet(reloadKey) === marker) return;
sessionSet(reloadKey, marker); sessionSet(reloadKey, marker);
withTimeout(deleteCaches(), 2500).then(function () { withTimeout(Promise.all([deleteCaches(), unregisterServiceWorkers()]), 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)); window.location.replace(addQuery(window.location.href, 'assetReload', token));
}); });
} }
+4 -2
View File
@@ -4,8 +4,10 @@
} }
window.addEventListener('load', function () { window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js?v=20260721_nocache1').then(function (registration) { navigator.serviceWorker.getRegistrations().then(function (registrations) {
if (registration && typeof registration.update === 'function') registration.update(); registrations.forEach(function (registration) {
registration.unregister().catch(function () {});
});
}).catch(function () {}); }).catch(function () {});
}); });
})(); })();