0Pricing
HTML Academy · 강의

오프라인 대체 페이지

사용자가 오프라인일 때 캐시된 대체 페이지 제공하기

오프라인 대체 페이지은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

오프라인 페이지가 필요한 이유

네트워크를 사용할 수 없을 때 서비스 워커는 브라우저의 일반적인 “인터넷에 연결되지 않음” 오류 대신 맞춤 오프라인 대체 페이지를 제공할 수 있습니다. 사용자는 브랜드, 유용한 정보, 캐시된 콘텐츠를 볼 수 있으므로 크로미움의 공룡 화면이나 파이어폭스의 슬픈 탭보다 훨씬 낫습니다.

대체 페이지 캐싱

서비스 워커의 설치 이벤트에서 offline.html 페이지를 미리 캐시하여 사용자가 오프라인에서 어디로도 이동하기 전에도 항상 사용할 수 있게 하십시오. 브라우저는 다음 sw.js 변경 시점까지 캐시가 유지되도록 보장합니다.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

실패 시 제공

가져오기 이벤트에서는 먼저 네트워크를 시도하고, 실패하면 캐시된 offline.html을 반환하십시오. 이 패턴(네트워크 우선과 오프라인 대체)은 가장 간단한 PWA 구현 방식이며 대부분의 콘텐츠 사이트에서 작동합니다.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

탐색 모드 확인

탐색 요청(최상위 페이지 로드)에 대해서만 offline.html로 대체하십시오. 이미지, 스크립트 및 기타 하위 리소스 가져오기 요청은 실패하게 두거나 리소스별로 캐시된 사본으로 대체하십시오. 누락된 이미지 대신 HTML 페이지를 제공하면 페이지가 더 심하게 손상됩니다.

오프라인 페이지 설계

오프라인 페이지는 가볍게 유지하십시오. CSS는 최소한으로 사용하고, 함께 캐시된 리소스가 아니라면 외부 리소스를 사용하지 마십시오. 브랜드 로고와 친근한 메시지(“오프라인 상태입니다. 다시 연결되면 콘텐츠가 로드됩니다.”), 그리고 location.reload()를 호출하는 다시 시도 버튼을 표시하십시오.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

방문한 페이지 캐싱

단일 오프라인 페이지를 넘어, 성공적으로 로드된 페이지를 오래된 콘텐츠를 먼저 제공한 뒤 갱신하는 전략이나 런타임 캐시 전략으로 캐시하십시오. 네트워크가 없어도 최근에 본 문서로 돌아가면 콘텐츠가 표시되고, 방문하지 않은 페이지만 로드에 실패합니다.

캐시 버전 업데이트

offline.html을 업데이트할 때는 sw.js의 CACHE 상수를 변경하십시오(CACHE = "v2"). 활성화 이벤트에서 오래된 캐시를 삭제하십시오: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). 오래된 오프라인 페이지는 사용자를 혼란스럽게 합니다.

오프라인 테스트

크롬 DevTools 네트워크 패널의 “오프라인” 속도 제한은 네트워크가 없는 상태를 시뮬레이션합니다. 앱을 탐색하면서 아직 방문하지 않은 경로에 오프라인 페이지가 표시되고, 이전에 방문한 페이지는 캐시에서 계속 로드되는지 확인하십시오.

하위 리소스 실패

오프라인 페이지 자체가 캐시되지 않은 CSS 파일을 참조하면 오프라인에서 해당 파일을 로드할 수 없어 페이지가 스타일 없이 표시됩니다. 설치 처리기에서 오프라인 페이지에 필요한 모든 리소스(CSS, 로고, 글꼴)를 미리 캐시하십시오.

정적 오프라인 페이지를 넘어

고급 PWA는 백그라운드 동기화를 사용해 오프라인 상태에서 사용자 작업을 대기열에 넣고, 연결이 복구되면 다시 시도하며, 그동안 낙관적 UI를 표시합니다. 워크박스 라이브러리는 이러한 패턴을 위한 구현 방법을 제공하며, 직접 구현하는 것도 가능하지만 더 많은 작업이 필요합니다.

연결 복구

오프라인 페이지에서 온라인 이벤트를 수신하여 다시 연결되었는지 감지하십시오: window.addEventListener("online", () => location.reload()). 연결이 복구되는 즉시 사용자가 다시 시도 버튼을 누르지 않아도 페이지가 스스로 새로 고쳐집니다.

거짓말은 신중하게

“다시 시도” 버튼은 실제로 다시 시도해야 하므로 아무 동작도 하지 않는 가짜 로딩 표시 대신 location.reload()를 호출해야 합니다. 정직한 UI는 사용자의 신뢰를 유지하지만, 사용자가 속임수를 알아차리면 기만적인 오프라인 페이지는 빠르게 신뢰를 잃습니다.

지식 확인

오프라인 대체 페이지는 왜 모든 실패한 요청이 아니라 탐색 요청(e.request.mode === "navigate")에 대해서만 반환해야 합니까?

요약

서비스 워커는 브라우저의 일반적인 오류 대신 맞춤 오프라인 대체 페이지를 제공할 수 있습니다. 설치 이벤트에서 offline.html을 미리 캐시하고, 네트워크가 실패하면서 요청이 탐색 요청일 때 가져오기 이벤트에서 이를 제공하십시오. 페이지를 자체적으로 동작하도록 유지하고, 업데이트를 위해 캐시 버전을 관리하며, 자동 새로 고침을 위해 온라인 이벤트를 수신하십시오. DevTools의 오프라인 속도 제한으로 테스트하십시오.

자주 묻는 질문

“오프라인 대체 페이지” 강의는 무료인가요?

네 — “오프라인 대체 페이지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“오프라인 대체 페이지”에서 뭘 배우나요?

사용자가 오프라인일 때 캐시된 대체 페이지 제공하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“오프라인 대체 페이지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 웹 앱 매니페스트
  2. HTML에서 서비스 워커 등록하기
  3. 테마 색상 및 앱 아이콘
  4. 오프라인 대체 페이지
← HTML Academy(으)로 돌아가기