1. PWA의 요건

PWA를 만들기 위해서는 세 가지의 요건을 필수적으로 만족해야 합니다.

1.1 HTTPS

우선 PWA는 보안이 연결된, 즉 신뢰할 수 있는 사이트에서만 동작하기 때문에 웹 페이지는 HTTPS 도메인에서 제공되어야 합니다.

HTTPS(HyperText Transfer Protocol over Secure Socket Layer)는 월드 와이드 웹 통신 프로토콜로, 보안이 강화된 HTTP(HyperText Transfer Protocol)입니다. http에 Secure Socket이 추가되어 데이터를 주고받는 과정에서 내용이 암호화되어 안전하게 통신할 수 있도록 합니다.

1.2 Service Worker(서비스 워커)

Service Worker는 백그라운드에서 실행되는 Javascript 파일 형태의 스크립트입니다. 오프라인 환경에서도 웹이 작동할 수 있도록 네트워크 요청을 가로채서 네트워크 불량 상태 등 접속성이 안 좋은 상황을 커버합니다.

서비스 워커는 네트워크 요청을 중간에 가로챌 수 있다는 점에서 중간자 공격에 취약하기 때문에 보안이 강화된 HTTPS에서만 작동합니다. 이는 PWA를 만들기 위해서 HTTPS 연결을 해야 하는 또 다른 이유가 되겠죠?

<aside> 💡 중간자 공격? 중간자 공격(man in the middle attack, MITM)은 네트워크 통신을 조작하여 통신 내용을 도청하거나 조작하는 공격 기법입니다. (출처 : 위키백과)

</aside>

1.3 Manifest(매니페스트)

Manifest는 PWA에 대해 브라우저에 알려주고 사용자의 데스크탑이나 모바일 디바이스에 설치할 때 어떻게 작동(행동)해야 하는지 알려주는 JSON 파일입니다. manifest 파일에는 웹 페이지의 url과 앱의 이름, 화면 표시 방식 등 기능과 표시 방법에 대한 정보들이 포함됩니다.

manifest 파일은 챕터 2.4에서 직접 만들어 보며 더 자세하게 알아보도록 합시다.

2. 좋은 PWA를 만들기 위한 Checklist

PWA를 만들기 위한 필수 요건 외에도 web.dev 에서 소개하는 좋은 PWA를 만들기 위한 체크리스트가 있습니다. 여기에는 핵심 PWA 체크리스트와 최적의 PWA 체크리스트, 두 가지가 소개되어 있습니다.