[WEB-011][실무] 설치하고 인터넷 없이도 여는 웹앱 만들기
페이지 정보
작성자 기술팀장 작성일 26-09-05 12:33 조회 97 댓글 0본문
[이번 수업]
PWA(Progressive Web App)는 웹의 주소와 배포 방식을 유지하면서, 지원하는 기기에서는 앱처럼 설치할 수 있게 만든 웹앱입니다. 이번에는 웹앱 매니페스트로 설치 정보를 알리고, 서비스 워커로 첫 화면을 저장해 인터넷이 끊겨도 여는 최소 구조를 만듭니다. 설치 메뉴의 위치와 지원 범위는 브라우저·운영체제마다 다르므로 일반 웹사이트로도 정상 동작하게 만드는 것이 출발점입니다.
[선수지식]
HTML 파일을 만들고 브라우저에서 여는 법, JavaScript의 함수와 Promise(나중에 끝날 작업을 표현하는 객체), HTTP 요청의 기초를 알고 있으면 좋습니다.
[학습목표]
1. 매니페스트와 서비스 워커의 역할을 구분한다.
2. 앱 셸을 Cache API에 저장해 오프라인 첫 화면을 제공한다.
3. 캐시 갱신·보안·브라우저 차이를 고려한 운영 기준을 설명한다.
[핵심개념]
매니페스트는 이름, 시작 주소, 표시 방식, 아이콘처럼 설치 후 모습을 설명하는 JSON 파일입니다. 서비스 워커는 페이지와 네트워크 사이에서 요청을 다루는 별도 JavaScript 작업자입니다. install 단계에서 정적 파일을 캐시에 넣고, fetch 단계에서 저장본을 반환하면 오프라인 화면을 만들 수 있습니다. 서비스 워커의 범위(scope)는 보통 파일이 놓인 경로 아래이며 DOM을 직접 조작하지 않습니다.
캐시 우선(cache first)은 빠르고 오프라인에 강하지만 오래된 내용을 보여줄 수 있습니다. 네트워크 우선(network first)은 최신성이 좋지만 느리거나 끊긴 연결에 취약합니다. 문서·API·이미지의 중요도에 따라 전략을 나누고, 배포 때 캐시 이름을 바꾸며 이전 캐시를 정리해야 합니다.
[따라하기]
새 폴더에 다음 세 파일을 만듭니다. index.html:
```html
<!doctype html><html lang="ko"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="manifest" href="./manifest.webmanifest"><title>오프라인 연습</title>
</head><body><h1>오프라인 준비 완료</h1><p>첫 방문 뒤에는 저장본을 엽니다.</p>
<script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./sw.js");</script>
</body></html>
```
manifest.webmanifest:
```json
{"name":"오프라인 연습","short_name":"오프라인","start_url":"./","display":"standalone"}
```
sw.js:
```javascript
const CACHE = "web-011-v1";
const ASSETS = ["./", "./index.html", "./manifest.webmanifest"];
self.addEventListener("install", event => {
event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(ASSETS)));
});
self.addEventListener("fetch", event => {
if (event.request.method === "GET") {
event.respondWith(caches.match(event.request).then(hit => hit || fetch(event.request)));
}
});
```
macOS·Linux는 폴더에서 `python3 -m http.server 8000`, Windows는 `py -m http.server 8000`을 실행하고 `http://localhost:8000`을 엽니다. 첫 로드 후 새로고침하고 개발자 도구의 네트워크를 Offline로 바꾼 뒤 다시 새로고침합니다. 예상 결과는 인터넷 없이도 ‘오프라인 준비 완료’가 보이는 것입니다. file://로 직접 열면 동작하지 않습니다. 설치 제안을 받으려면 실무에서 192×192와 512×512 PNG 아이콘을 매니페스트에 추가해야 하며, 설치 UI는 환경마다 다릅니다.
[흔한 실수]
서비스 워커가 처음 등록된 즉시 현재 탭을 제어한다고 생각하기 쉽습니다. 첫 설치 뒤 새로고침하여 확인하세요. 파일을 수정하고도 같은 캐시 이름을 쓰면 과거 화면이 남습니다. 모든 GET 응답을 무조건 저장하거나 오류 응답까지 캐시하지 말고, 저장 대상과 만료 기준을 먼저 정해야 합니다.
[보안 주의]
서비스 워커는 요청을 가로챌 수 있어 HTTPS에서만 운영해야 하며 localhost는 개발 예외입니다. 인증된 HTML, 개인정보가 든 API 응답, 토큰을 Cache API에 무분별하게 넣지 마세요. 로그아웃 때 민감 캐시를 지우고, 캐시 키에 사용자 식별자를 노출하지 않습니다. 실습은 본인 소유의 로컬 환경에서만 진행합니다.
[직접 해볼 과제]
192×192와 512×512 PNG 아이콘을 준비해 `icons` 항목을 추가하고, 캐시 이름을 v2로 바꿔 제목을 수정한 뒤 새 버전이 반영되는지 확인하세요. 이어 activate 이벤트에서 v2가 아닌 캐시를 삭제해 보세요.
[확인문제]
1. 매니페스트와 서비스 워커는 각각 무엇을 담당하나요?
2. 캐시 우선 전략이 오래된 화면을 보여줄 수 있는 이유는 무엇인가요?
3. 서비스 워커를 실제 배포에서 HTTPS로 제공해야 하는 이유는 무엇인가요?
[다음 학습]
WEB-012에서 이 PWA를 키보드와 화면 읽기 도구로도 사용할 수 있는 반응형 웹앱 프로젝트로 확장합니다.
[공식 참고 자료]
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://www.w3.org/TR/appmanifest/
https://www.w3.org/TR/service-workers/
PWA(Progressive Web App)는 웹의 주소와 배포 방식을 유지하면서, 지원하는 기기에서는 앱처럼 설치할 수 있게 만든 웹앱입니다. 이번에는 웹앱 매니페스트로 설치 정보를 알리고, 서비스 워커로 첫 화면을 저장해 인터넷이 끊겨도 여는 최소 구조를 만듭니다. 설치 메뉴의 위치와 지원 범위는 브라우저·운영체제마다 다르므로 일반 웹사이트로도 정상 동작하게 만드는 것이 출발점입니다.
[선수지식]
HTML 파일을 만들고 브라우저에서 여는 법, JavaScript의 함수와 Promise(나중에 끝날 작업을 표현하는 객체), HTTP 요청의 기초를 알고 있으면 좋습니다.
[학습목표]
1. 매니페스트와 서비스 워커의 역할을 구분한다.
2. 앱 셸을 Cache API에 저장해 오프라인 첫 화면을 제공한다.
3. 캐시 갱신·보안·브라우저 차이를 고려한 운영 기준을 설명한다.
[핵심개념]
매니페스트는 이름, 시작 주소, 표시 방식, 아이콘처럼 설치 후 모습을 설명하는 JSON 파일입니다. 서비스 워커는 페이지와 네트워크 사이에서 요청을 다루는 별도 JavaScript 작업자입니다. install 단계에서 정적 파일을 캐시에 넣고, fetch 단계에서 저장본을 반환하면 오프라인 화면을 만들 수 있습니다. 서비스 워커의 범위(scope)는 보통 파일이 놓인 경로 아래이며 DOM을 직접 조작하지 않습니다.
캐시 우선(cache first)은 빠르고 오프라인에 강하지만 오래된 내용을 보여줄 수 있습니다. 네트워크 우선(network first)은 최신성이 좋지만 느리거나 끊긴 연결에 취약합니다. 문서·API·이미지의 중요도에 따라 전략을 나누고, 배포 때 캐시 이름을 바꾸며 이전 캐시를 정리해야 합니다.
[따라하기]
새 폴더에 다음 세 파일을 만듭니다. index.html:
```html
<!doctype html><html lang="ko"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="manifest" href="./manifest.webmanifest"><title>오프라인 연습</title>
</head><body><h1>오프라인 준비 완료</h1><p>첫 방문 뒤에는 저장본을 엽니다.</p>
<script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./sw.js");</script>
</body></html>
```
manifest.webmanifest:
```json
{"name":"오프라인 연습","short_name":"오프라인","start_url":"./","display":"standalone"}
```
sw.js:
```javascript
const CACHE = "web-011-v1";
const ASSETS = ["./", "./index.html", "./manifest.webmanifest"];
self.addEventListener("install", event => {
event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(ASSETS)));
});
self.addEventListener("fetch", event => {
if (event.request.method === "GET") {
event.respondWith(caches.match(event.request).then(hit => hit || fetch(event.request)));
}
});
```
macOS·Linux는 폴더에서 `python3 -m http.server 8000`, Windows는 `py -m http.server 8000`을 실행하고 `http://localhost:8000`을 엽니다. 첫 로드 후 새로고침하고 개발자 도구의 네트워크를 Offline로 바꾼 뒤 다시 새로고침합니다. 예상 결과는 인터넷 없이도 ‘오프라인 준비 완료’가 보이는 것입니다. file://로 직접 열면 동작하지 않습니다. 설치 제안을 받으려면 실무에서 192×192와 512×512 PNG 아이콘을 매니페스트에 추가해야 하며, 설치 UI는 환경마다 다릅니다.
[흔한 실수]
서비스 워커가 처음 등록된 즉시 현재 탭을 제어한다고 생각하기 쉽습니다. 첫 설치 뒤 새로고침하여 확인하세요. 파일을 수정하고도 같은 캐시 이름을 쓰면 과거 화면이 남습니다. 모든 GET 응답을 무조건 저장하거나 오류 응답까지 캐시하지 말고, 저장 대상과 만료 기준을 먼저 정해야 합니다.
[보안 주의]
서비스 워커는 요청을 가로챌 수 있어 HTTPS에서만 운영해야 하며 localhost는 개발 예외입니다. 인증된 HTML, 개인정보가 든 API 응답, 토큰을 Cache API에 무분별하게 넣지 마세요. 로그아웃 때 민감 캐시를 지우고, 캐시 키에 사용자 식별자를 노출하지 않습니다. 실습은 본인 소유의 로컬 환경에서만 진행합니다.
[직접 해볼 과제]
192×192와 512×512 PNG 아이콘을 준비해 `icons` 항목을 추가하고, 캐시 이름을 v2로 바꿔 제목을 수정한 뒤 새 버전이 반영되는지 확인하세요. 이어 activate 이벤트에서 v2가 아닌 캐시를 삭제해 보세요.
[확인문제]
1. 매니페스트와 서비스 워커는 각각 무엇을 담당하나요?
2. 캐시 우선 전략이 오래된 화면을 보여줄 수 있는 이유는 무엇인가요?
3. 서비스 워커를 실제 배포에서 HTTPS로 제공해야 하는 이유는 무엇인가요?
[다음 학습]
WEB-012에서 이 PWA를 키보드와 화면 읽기 도구로도 사용할 수 있는 반응형 웹앱 프로젝트로 확장합니다.
[공식 참고 자료]
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://www.w3.org/TR/appmanifest/
https://www.w3.org/TR/service-workers/
댓글목록 0
등록된 댓글이 없습니다.