PWA 배포와 진단, 그리고 한계

HTTPS, PWA의 출발선

PWA는 HTTPS 환경에서만 동작한다.

Service Worker가 네트워크 요청을 가로채는 구조이기 때문에,

보안되지 않은 연결(HTTP)에서는 이를 차단한다.

단순한 보안이 아니라 신뢰 체인의 시작

앞서 Service Worker가 네트워크 요청을 가로채는 구조라고 언급했다.

즉 이를 통해 보안을 전제로 성립하지 않으면, 악성 스크립트가 중간에서 데이터를 변조하기에

매우 좋다는 위험성을 내포한다는 것을 알 수 있다.

따라서, HTTPS 환경은 PWA에서 매우 기본적 전제 조건으로 성립한다.

(애초에 브라우저는 HTTPS 환경이 아니라면 PWA를 등록조차 하지 않는다)

실무에서의 HTTPS 이슈

내부망(사내망) 개발 환경

사설 인증서(Self-signed Certificate)를 사용하는 경우, Chrome은 기본적으로

Service Worker 등록을 차단한다.

→ chrome://flags/#allow-insecure-localhost 옵션을 임시 허용하거나, mkcert / local CA 기반 개발 인증서 사용

2. 멀티 도메인 환경

Service Worker의 scope는 도메인 단위로 묶인다.

리소스를 다른 서브도메인에서 캐싱하려면 CORS + HTTPS 동일 정책 필수.

→ 동일 origin 정책을 고려하여 serviceWorker.register(’/sw.js’, { scope: ‘/’ }) 구성 조정.

3. SSL 갱신 자동화 이슈

HTTPS 인증서가 만료되면 PWA는 즉시 installable 자격을 상실한다.

(브라우저가 신뢰할 수 없는 컨텍스트로 판단한다.)

따라서 CI/CD 파이프라인에서 certbot renew 또는 Cloudflare API 기반

SSL 자동 갱신 스크립트 포함 필요.

4. Mixed Content 차단

HTTPS 페이지 내에서 HTTP 자원을 요청하면 Service Worker는 정상 작동하지 않는다.

해당 요청은 네트워크 캐시에도 등록되지 않는다.

PWA 품질 진단

Chrome DevTools의 Lighthouse는 PWA 품질을 자동으로 분석해준다.

평가 항목은 다음과 같다.

PWA 품질 평가 항목

Installable: HTTPS, Manifest, Service Worker 등 설치 조건 충족 여부
Performance: LCP, FID, CLS 등 핵심 성능 지표
Best Practices: 보안 및 접근성 검증
Accessibility: 시각적, 키보드 접근성 테스트
SEO: 검색엔진 메타 구성 확인

PWA 품질 진단 실행

[DevTools] – [Lighthouse 탭] – [Progressive Web App] 선택,

결과 리포트에서 Installable 과 Offline ready 항목이 모두 초록색이면 OK

*고품질의 PWA

오프라인 대응 + HTTPS + Manifest + 빠른 로딩 + 접근성 확보

캐시 버전 관리

PWA의 가장 큰 함정은 캐시 갱신이 느리다는 것,

Service Worker는 안정성을 위해 자동으로 새 버전을 즉시 활성화하지 않는다.

이로 인해 사용자가 이전 캐시를 여전히 보고 있을 가능성이 존재하고,

새로운 코드가 배포되어도 즉시 반영되지 않게 된다.

해결하려면

캐시 버전 + 업데이트 알림
클라이언트 측에서 새 버전 감지 시 알림 띄우기

오프라인 테스트

PWA 배포가 끝나면 오프라인 시나리오 테스트 진행이 필요하다.

Chrome DevTools → [Application] → [Service Workers] → Offline 체크 → 새로고침

이 과정에서 캐시된 콘텐츠가 보이면 정상 작동이다.

추가로 점검해야 할 사항
- 새로고침 시 캐시된 버전이 즉시 뜨는가?
- fetch 실패 시 fallback 페이지(offline.html)로 전환되는가?
- Service Worker가 업데이트될 때 새 버전 적용이 정상인가?

PWA의 한계

여전히 제한적인 PWA

브라우저별로 Service Worker의 업데이트 시점이 불균일하고, 캐시 관리 복잡도 및 네트워크 동기화 지연 이슈로 현재까지는 아직 PWA에서 한계가 보인다. 또한, iOS에서 PWA에 대한 지원을 제약하기 때문에 PWA는 완성된 기술이 아닌 진화 과정의 일부 단계로 보인다.

iOS에서의 PWA 제약

iOS(Safari)의 PWA 지원은 여전히 제약적이고 Apple은 보안 및 배터리 이슈를 이유로 일부 기능을 막고 있다.

기능	지원 여부	비고
Push Notification	iOS 16.4+	제한적 지원, 유저 승인 필요
Background Sync	X	불가능
Storage(Cache Size)	약 50MB 한도	자동 삭제 가능성 있음
Install Prompt	X (자동 배너 없음)	홈 화면에 추가 수동 유도
Web Bluetooth / USB	X	미지원 API 다수