학습
JavaScript PWA (Progressive Web Apps)
JavaScript PWA (Progressive Web Apps) — 고급
PWA (Progressive Web Apps)
1. 도입 (왜 배워야 하는가)
PWA(Progressive Web Apps)는 웹 애플리케이션의 새로운 패러다임으로, 모바일 앱과 같은 사용자 경험을 제공하면서도 웹의 장점을 살리는 기술입니다. 실무에서 PWA를 활용하면 애플리케이션의 성능을 향상시키고, 오프라인에서도 작동하며, 설치가 간편한 장점을 누릴 수 있습니다.
PWA를 모른다면, 사용자에게 느린 로딩 시간과 제한된 기능을 제공하게 되어, 경쟁력 있는 제품을 만들기 어려워질 수 있습니다. 예를 들어, 사용자가 이동 중에도 앱을 사용할 수 있는 기능이 없다면, 사용자 이탈률이 증가할 것이고, 이는 매출 손실로 이어질 수 있습니다.
2. 핵심 개념 설명
PWA의 핵심 개념은 다음과 같습니다:
- 서비스 워커(Service Worker): 웹 애플리케이션과 브라우저 간의 중재자 역할을 하며, 네트워크 요청을 가로채고, 캐시를 사용하여 오프라인에서도 애플리케이션을 사용할 수 있도록 합니다.
- 웹 앱 매니페스트(Web App Manifest): 앱의 이름, 아이콘, 시작 URL 등을 정의하여 사용자가 홈 화면에 추가할 수 있도록 도와줍니다.
- HTTPS: PWA는 반드시 HTTPS를 통해 제공되어야 하며, 이는 보안성을 높이고 사용자 데이터를 보호합니다.
| 용어 | 정의 |
|---|---|
| 서비스 워커 | 네트워크 요청을 가로채어 캐싱 및 오프라인 지원 |
| 웹 앱 매니페스트 | 애플리케이션의 메타데이터를 정의하는 JSON 파일 |
| HTTPS | 보안 프로토콜로, 웹 사이트의 데이터를 암호화 |
3. 기본 코드 예제
PWA를 시작하기 위한 기본적인 서비스 워커 등록 코드 예제입니다.
// service-worker.js
self.addEventListener('install', (event) => {
console.log('Service Worker 설치 중...');
// 설치 중 캐시할 파일 목록
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js',
]);
})
);
});
// fetch 이벤트
self.addEventListener('fetch', (event) => {
console.log('네트워크 요청:', event.request.url);
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});실행 결과:
동작 설명:
- 서비스 워커가 설치될 때 로그를 남깁니다.
- 설치 과정에서 필요한 파일들을 캐시합니다.
- 사용자가 요청할 때 캐시된 파일이 있으면 해당 파일을 반환하고, 없으면 네트워크 요청을 합니다.
- 잘못된 코드:
navigator.serviceWorker.register('/sw.js');경로가 잘못되었을 때 - 올바른 코드: 서비스 워커 파일이 루트 경로에 위치해야 합니다.
- 잘못된 코드: HTTP로 서비스 워커를 등록하려고 할 때
- 올바른 코드: 반드시 HTTPS를 사용해야 서비스 워커가 작동합니다.
- 잘못된 코드: 모든 요청을 캐시하려고 할 때
- 올바른 코드: 사용자의 요구에 따라 적절한 캐싱 전략을 선택해야 합니다.
- PWA는 웹 애플리케이션에 모바일 앱과 같은 사용자 경험을 제공합니다.
- 서비스 워커와 웹 앱 매니페스트는 PWA의 핵심 요소입니다.
- HTTPS를 통해 보안을 강화해야 하며, 오프라인 기능과 푸시 알림은 사용자 경험을 향상시키는 데 도움이 됩니다.
- React와 PWA의 통합
- 서버리스 아키텍처와 PWA
- PWA 성능 최적화 기술 (예: lazy loading, 코드 스플리팅)
4. 실전 활용 예제
예제 1: 오프라인 기능 추가
쇼핑몰 웹사이트에서 사용자가 오프라인 상태에서도 장바구니에 담은 상품을 확인할 수 있도록 하는 기능입니다.
// 장바구니 데이터 저장
let cart = [];
// 장바구니에 상품 추가 함수
function addToCart(product) {
cart.push(product);
// 오프라인 상태에서도 데이터 저장
localStorage.setItem('cart', JSON.stringify(cart));
}상황 설명: 사용자가 장바구니에 상품을 추가할 때마다, 해당 데이터가 로컬 스토리지에 저장되어 오프라인에서도 접근할 수 있습니다.
예제 2: 푸시 알림
사용자가 새로운 상품이 추가될 때 푸시 알림을 받을 수 있도록 설정하는 코드입니다.
self.addEventListener('push', (event) => {
const options = {
body: '새로운 상품이 추가되었습니다!',
icon: 'images/icon.png',
};
event.waitUntil(
self.registration.showNotification('알림', options)
);
});상황 설명: 새로운 상품이 추가되면, 구독한 사용자에게 알림을 보내어 재방문을 유도할 수 있습니다.