백그라운드 동기화와 업데이트
온라인으로 돌아왔을 때 캐시를 업데이트하고 동기화합니다.
백그라운드 동기화와 업데이트은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
캐시 최신 상태 유지하기
오프라인을 지원하는 앱은 우아하게 업데이트되어야 합니다. 새 자산을 배포하고, 오래된 자산을 제거하며, 연결이 복구되면 실패한 작업을 다시 시도해야 합니다. 서비스 워커는 이 세 가지를 모두 처리할 도구를 제공합니다.
버전이 지정된 캐시 이름
가장 간단한 업데이트 방법은 버전이 지정된 캐시 이름을 사용하는 것입니다. 버전을 올리면 새로운 cache가 생성되고, 이전 cache는 활성화할 때 정리할 수 있도록 남겨 둡니다.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});오래된 캐시 정리하기
activate 이벤트에서 모든 캐시 이름을 나열하고 현재 버전이 아닌 것은 무엇이든 삭제합니다. 이렇게 하면 저장 공간을 확보하고 오래된 자산을 제거할 수 있습니다.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});대기 중인 워커
기본적으로 새 워커는 설치되지만, 이전 워커가 제어하는 모든 페이지가 닫힐 때까지 대기 상태로 남아 있습니다. 이렇게 하면 세션 중간에 버전이 불일치하는 일을 방지할 수 있습니다.
skipWaiting
self.skipWaiting()은 대기 중인 워커를 즉시 활성화하여 탭이 닫힐 때까지 기다리지 않고 제어권을 가져오게 합니다. 업데이트를 바로 적용하려면 install에서 호출합니다.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
활성화한 후 self.clients.claim()을 사용하면 새 워커가 이미 열려 있는 페이지를 즉시 제어할 수 있습니다. 앞으로 이동하는 페이지에서만 제어하는 것과는 다릅니다.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});페이지에서 업데이트 감지하기
페이지에서는 등록 객체의 updatefound 이벤트를 통해 새 워커를 감지한 다음, 최신 버전을 가져오도록 사용자에게 다시 불러오기를 요청할 수 있습니다.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});백그라운드 동기화
백그라운드 동기화 프로그래밍 인터페이스를 사용하면 기기가 연결될 때까지 작업(예: 양식 전송)을 미룰 수 있습니다. 동기화 태그를 등록하면 브라우저가 온라인 상태가 되었을 때 sync 이벤트를 발생시킵니다.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));동기화 이벤트 처리하기
서비스 워커에서 sync를 수신하고 태그를 일치시킵니다. 재시도가 끝날 때까지 브라우저가 워커를 유지하도록 waitUntil을 사용합니다.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});대기열에 넣은 후 동기화하는 방식
견고한 오프라인 흐름은 다음과 같습니다. 보류 중인 작업을 IndexedDB에 저장하고 동기화를 등록한 다음, sync 처리기에서 대기열을 읽어 각 항목을 POST하고 성공하면 해당 항목을 삭제합니다.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}업데이트와 동기화 복습
이 기능들을 함께 사용하면 앱의 복원력이 높아집니다. 버전이 지정된 캐시와 정리 작업은 자산을 최신 상태로 유지하고, skipWaiting/clients.claim은 배포 시점을 제어하며, 백그라운드 동기화는 사용자가 다시 온라인 상태가 되면 작업을 안정적으로 완료합니다.
빠른 확인
업데이트와 백그라운드 동기화에 대한 이해도를 확인해 보세요.
복습
백그라운드 동기화와 업데이트를 배웠습니다.
- 버전이 지정된 캐시 이름을 사용하고
activate에서 오래된 캐시를 정리합니다. skipWaiting과clients.claim으로 업데이트 시점을 제어합니다.updatefound를 통해 새 버전을 감지합니다.- 백그라운드 동기화는
sync이벤트를 통해 온라인 상태가 될 때까지 작업을 미룹니다. - IndexedDB에 작업을 대기열로 저장한 다음 동기화할 때 처리합니다.
서비스 워커와 오프라인 캐싱 과정을 모두 마쳤습니다.
자주 묻는 질문
“백그라운드 동기화와 업데이트” 강의는 무료인가요?
네 — “백그라운드 동기화와 업데이트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“백그라운드 동기화와 업데이트”에서 뭘 배우나요?
온라인으로 돌아왔을 때 캐시를 업데이트하고 동기화합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“백그라운드 동기화와 업데이트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 서비스 워커 등록하기
- Cache API
- 캐싱 전략
- 백그라운드 동기화와 업데이트