1. 서비스 워커 등록: PWA를 구현하려면 먼저 서비스 워커를 등록해야 합니다. 서비스 워커는 백그라운드에서 실행되는 JavaScript 파일로, 오프라인 상황에서도 웹 앱이 작동할 수 있게 해줍니다.

2. 메니페스트 생성: 메니페스트는 웹 앱의 모양과 동작을 정의하는 JSON 파일입니다. 사용자가 웹 앱을 홈 화면에 추가할 때 필요한 정보를 제공합니다.

3. HTTPS 사용: PWA는 HTTPS로 배포해야 합니다. Parcel은 기본적으로 HTTPS 개발 서버를 제공하므로 이 설정을 유지해야 합니다.

이제 실제로 Parcel에서 PWA를 구현하는 방법을 살펴보겠습니다.

1. package.json 파일에서 Parcel의 종속성을 설치합니다.

npm install parcel-bundler --save-dev

1. index.html 파일에 서비스 워커 등록 코드를 추가합니다.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

1. 프로젝트 루트에 service-worker.js 파일을 생성하고, 서비스 워커 코드를 작성합니다.

// service-worker.js
self.addEventListener('install', (event) => {
  // ...
});

self.addEventListener('activate', (event) => {
  // ...
});

self.addEventListener('fetch', (event) => {
  // ...
});

1. index.html 파일에 메니페스트 링크를 추가합니다.

<link rel="manifest" href="/manifest.json" />

1. 프로젝트 루트에 manifest.json 파일을 생성하고, 원하는 매니페스트 속성을 정의합니다.

{
  "name": "My PWA",
  "short_name": "PWA",
  "description": "This is my progressive web app",
  "start_url": "/",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

이제 Parcel을 실행하고 빌드하면 프로그레시브 웹 앱이 생성됩니다. Parcel은 코드 번들링과 자동 리로드를 처리하므로 개발환경에서도 편리하게 작업할 수 있습니다.

더 자세한 내용은 아래 참고 자료를 확인하세요:

• Parcel 공식 문서
• 프로그레시브 웹 앱 소개 - Google Developers
• 서비스 워커 소개 - Google Developers