Progressive Web Apps (PWAs)

Progressive Web Apps (PWAs)은 웹사이트를 앱으로 전환하는 인기 있는 방법입니다. PWA는 최신 웹 기술을 사용하여 오프라인 기능, 푸시 알림, 사용자 홈 화면에 앱을 추가하는 기능 등 사용자에게 앱과 유사한 경험을 제공합니다. PWA를 사용하면 플랫폼별로 별도의 앱을 만들 필요 없이 데스크톱과 모바일 디바이스 모두에서 작동하는 단일 앱을 만들 수 있습니다. Angular framework and the Workbox library 등 PWA를 구축하는 데 사용할 수 있는 프레임워크와 도구가 많이 있습니다.

1. 웹페이지의 루트 디렉터리에 다음 내용으로 manifest.json 파일을 생성합니다

{
  "name": "My PWA",
  "short_name": "My PWA",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "display": "standalone"
}

• 이 파일에는 이름, 아이콘, 시작 URL, 배경 및 테마 색상, 표시 모드 등 PWA에 대한 메타데이터가 포함되어 있습니다.

2. 웹페이지의 루트 디렉터리에 다음 내용으로 service-worker.js 파일을 만듭니다:

const cacheName = 'my-pwa-cache';
const filesToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/icon.png'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

• 이 파일에는 앱의 asset을 캐싱하고 네트워크 요청을 처리하는 로직이 포함되어 있습니다. 사용자가 PWA를 설치하면 서비스 워커가 앱의 에셋을 캐시하여 오프라인에서 사용할 수 있도록 합니다.

3. 웹페이지의 헤드 섹션에 다음 코드를 추가하여 manifest.json 파일을 로드하고 서비스 워커를 등록합니다:

<link rel="manifest" href="/manifest.json">
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
  }
</script>

• 이 코드는 브라우저에 manifest.json 파일을 로드하고 서비스 워커를 등록하도록 지시합니다.

4. 웹페이지에 '홈 화면에 추가' 버튼을 추가하여 사용자에게 PWA를 설치하라는 메시지를 표시합니다:

<button onclick="addToHomeScreen()">Add to Home screen</button>

<script>
function addToHomeScreen() {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(function(choiceResult) {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
  }
}
</script>

• 이 코드를 클릭하면 사용자에게 PWA를 설치하라는 메시지가 표시되는 버튼이 표시됩니다. 사용자가 메시지를 수락하면 PWA가 홈 화면에 추가됩니다.

여기까지입니다! 이 단계를 통해 웹페이지를 오프라인에서 설치하여 사용할 수 있는 PWA로 전환했습니다.

해당 내용은 ChatGPT와 DeepL을 이용해 작성된 글 입니다.