티스토리 뷰

웹기술

[PWA] Progressive Web Apps 특징과 간단한 예제

제로빈 2024. 11. 12. 15:17

PWA (Progressive Web Apps)는 웹 기술을 사용해 모바일 앱과 같은 사용자 경험을 제공하는 웹 애플리케이션입니다. 일반 웹사이트와 네이티브 앱의 장점을 결합하여, 오프라인 동작, 푸시 알림, 설치 가능성 등의 기능을 지원합니다. PWA는 성능 최적화와 사용성 향상에 중점을 둔 애플리케이션 방식입니다. PWA의 주요 특징과 간단한 예제로 사용방법에 대해 알아보겠습니다.

 

1. PWA의 주요 특징

  • 반응형 디자인 (Responsive)
    • 다양한 기기 및 화면 크기에 자동으로 최적화되어 데스크톱, 태블릿, 스마트폰에서 원활히 작동합니다.
  • 오프라인 지원 (Offline Support)
    • 서비스 워커(Service Worker) 기술을 사용해 오프라인 상태에서도 일부 기능을 사용할 수 있습니다.
  • 설치 가능성 (Installable)
    • 웹사이트이지만, 사용자는 PWA를 네이티브 앱처럼 설치해 홈 화면에 추가할 수 있습니다.
  • 푸시 알림 (Push Notifications)
    • 푸시 알림을 통해 사용자가 앱에 들어오지 않아도 중요한 알림을 받을 수 있습니다.
  • 자동 업데이트 (Automatic Updates)
    • 사용자 개입 없이 서비스 워커를 통해 자동으로 업데이트됩니다.
  • 보안성 (Security)
    • HTTPS를 통해 안전하게 전송되며, 데이터 보호에 중점을 둡니다.

 

2. 간단한 PWA 예제

  • PWA를 구성하려면 서비스 워커, 웹 애플리케이션 매니페스트 파일이 필요합니다. 아래는 간단한 HTML 파일을 통해 PWA를 구현하는 예제입니다.

2.1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First PWA</title>
  <!-- 매니페스트 파일 연결 -->
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to My PWA</h1>
  <p>This is a simple Progressive Web App example.</p>

  <!-- 서비스 워커 등록 스크립트 -->
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(reg => console.log('Service Worker registered', reg))
        .catch(err => console.error('Service Worker registration failed', err));
    }
  </script>
</body>
</html>

 

2.2. manifest.json

{
  "name": "My First PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  • 웹 애플리케이션 매니페스트는 앱의 이름, 아이콘, 테마 색상 등을 정의하여 앱 설치 및 시작화면에 필요한 정보를 제공합니다.

 

2.3. service-worker.js

const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

// 설치 이벤트: 캐시 저장
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

// 요청 인터셉트: 캐시된 파일을 반환하거나 네트워크 요청
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});
  • 서비스 워커는 PWA의 핵심 요소로, 백그라운드에서 네트워크 요청을 가로채거나 캐시 된 리소스를 반환해 오프라인에서도 동작하게 만듭니다.

 

3. 실행 방법

  • HTML, 매니페스트, 서비스 워커 파일을 웹 서버 (예: localhost)에 배포합니다.
  • 브라우저에서 localhost로 접속한 뒤, 네트워크 탭에서 오프라인 모드로 설정하여 PWA가 캐시에서 작동하는지 확인할 수 있습니다.
  • HTTPS로 서비스 중인 페이지에 배포하면, 모바일 기기로 웹페이지에서 "홈 화면에 추가" 또는 "설치" 버튼을 사용하여 독립 앱처럼 사용할 수 있습니다.

 

감사합니다.

 

'웹기술' 카테고리의 다른 글

[CWV] Core Web Vitals 특징과 간단한 예제  (1) 2024.11.20
[시네마틱 스크롤링] Cinematic Scrolling 특징과 간단한 예제  (2) 2024.11.15
[JAM 스택] JAM Stack 특징과 간단한 예제  (2) 2024.11.14
[TFJS] TensorFlowJS 특징과 간단한 예제  (5) 2024.11.13
[WASM] WebAssembly 특징과 간단한 예제  (3) 2024.11.12
최근에 올라온 글
Total
Today
Yesterday