학습
HTML 프로그레시브 웹 앱 (PWA)
HTML 프로그레시브 웹 앱 (PWA) — 중급
프로그레시브 웹 앱 (PWA)
1. 도입 (왜 배워야 하는가)
프로그레시브 웹 앱(PWA)은 웹과 모바일 앱의 장점을 결합하여 사용자에게 빠르고, 매력적이며, 신뢰할 수 있는 경험을 제공합니다. 이 기술이 중요한 이유는 다음과 같습니다:
- 사용자 경험 개선: PWA는 오프라인에서도 작동하고, 푸시 알림을 지원하여 사용자와의 상호작용을 지속적으로 유지할 수 있습니다.
- 개발 비용 절감: 하나의 코드베이스로 웹과 모바일 앱을 모두 개발할 수 있어 개발 및 유지보수 비용을 줄일 수 있습니다.
- SEO 최적화: PWA는 검색 엔진에 최적화되어 있어 더 많은 사용자에게 노출될 수 있습니다.
PWA를 모르면 사용자 경험이 떨어지고, 개발 비용이 증가할 수 있으며, 검색 엔진에서의 가시성이 줄어들 수 있습니다.
2. 핵심 개념 설명
PWA의 핵심 개념은 다음과 같습니다:
| 개념 | 설명 |
|---|---|
| 서비스 워커 | 브라우저와 서버 간의 중개자로, 오프라인에서도 자원을 제공하고 푸시 알림을 처리합니다. |
| 매니페스트 파일 | 웹 앱의 메타데이터를 정의하여 홈 화면에 추가할 때 필요한 정보(아이콘, 시작 URL 등)를 제공합니다. |
| HTTPS | 보안 프로토콜로, PWA가 안전하게 작동할 수 있도록 보장합니다. |
이 개념들은 PWA가 어떻게 작동하는지를 이해하는 데 필수적입니다. 예를 들어, 서비스 워커는 마치 레스토랑의 웨이터와 같아서 고객(브라우저)과 주방(서버) 사이에서 주문을 전달하고, 필요한 경우 메뉴를 보여주는 역할을 합니다.
3. 기본 코드 예제
가장 기본적인 PWA의 구성 요소인 서비스 워커와 매니페스트 파일을 설정하는 과정을 보여드리겠습니다.
3.1. 매니페스트 파일 (manifest.json)
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<title>My PWA</title>
</head>
<body>
<h1>안녕하세요, PWA!</h1>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('서비스 워커 등록 성공:', registration);
})
.catch(error => {
console.log('서비스 워커 등록 실패:', error);
});
});
}
</script>
</body>
</html>실행 결과
코드 한 줄씩 동작 설명
<!DOCTYPE html>: HTML5 문서임을 선언합니다.<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.<link rel="manifest" href="manifest.json">: 매니페스트 파일을 링크합니다.<script>: 서비스 워커가 지원되는 경우, 페이지가 로드될 때 서비스 워커를 등록합니다.navigator.serviceWorker.register(...): 서비스 워커를 등록하고 성공 또는 실패 메시지를 콘솔에 출력합니다.- 상황 설명: 사용자가 인터넷이 끊긴 상태에서도 쇼핑몰의 상품 목록을 볼 수 있습니다.
- 상황 설명: 사용자가 브라우저를 닫았더라도 새로운 기사 알림을 받을 수 있습니다.
- 잘못된 경로에서 서비스 워커를 등록할 경우.
- PWA는 HTTPS에서만 작동합니다. 로컬 개발 환경에서는
localhost에서만 가능합니다. - PWA는 웹과 모바일 앱의 장점을 결합하여 사용자 경험을 향상시킵니다.
- 서비스 워커와 매니페스트 파일은 PWA의 핵심 요소입니다.
- PWA는 오프라인 지원 및 푸시 알림 기능을 통해 사용자와의 상호작용을 강화합니다.
- 서비스 워커의 고급 기능
- PWA의 성능 최적화
- React 또는 Vue.js를 사용한 PWA 개발
4. 실전 활용 예제
4.1. 오프라인 지원
쇼핑몰에서 사용자들이 오프라인에서도 상품을 확인할 수 있도록 하기 위해 서비스 워커를 사용하여 캐시된 데이터를 제공합니다.
// service-worker.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('shopping-cache').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js',
'/icon-192x192.png'
]);
})
);
});4.2. 푸시 알림
뉴스 웹사이트에서 새로운 기사가 올라올 때 푸시 알림을 발송하여 사용자에게 알릴 수 있습니다.
// service-worker.js
self.addEventListener('push', (event) => {
const title = '새로운 기사!';
const options = {
body: event.data.text(),
icon: 'icon-192x192.png'
};
event.waitUntil(
self.registration.showNotification(title, options)
);
});5. 흔한 실수와 주의사항
5.1. 서비스 워커 등록 실패
// 잘못된 코드
navigator.serviceWorker.register('/wrong-path/service-worker.js');- 올바른 코드:
navigator.serviceWorker.register('/service-worker.js');