[TIL] PWA- PWA의 요건

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 연결을 해야 하는 또 다른 이유가 되겠죠?

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

 

1.3 Manifest(매니페스트)

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

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

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

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

**핵심 체크리스트(Core checklist)**는 디바이스의 크기와 입력 유형에 상관없이 모든 사용자가 앱을 설치하고 사용할 수 있는지에 대한 체크리스트입니다. 그리고 PWA를 만들 때는 핵심 체크리스트와 더불어 앱이 장치의 일부로 느낄 수 있도록 **최적의 체크리스트(Optimal checklist)**도 포함해야 한다고 합니다.

여기서는 핵심 체크리스트만 간단히 알아보겠습니다.

1. Starts fast, stays fast : 앱은 빠르게 로드되고, 빠르게 유지되어야 합니다.
2. Works in any browser : PWA는 모든 브라우저에서 작동해야 합니다.
3. Responsive to any screen size : 모든 화면 크기에 대응해야 합니다. 화면 크기에 상관없이 콘텐츠가 표시되어야 하며 모든 기능을 사용할 수 있어야 합니다.
4. Provides a custom offline page : 오프라인 환경에서는 브라우저의 기본 오프라인 페이지가 아닌 맞춤형 오프라인 페이지를 제공합니다.
5. Is installable : 설치가 가능해야 합니다.

체크리스트에 대한 내용이 더 궁금하다면 아래 링크를 참고하시길 바랍니다.

What makes a good Progressive Web App?