PWA & Web-to-Native Physics

1. Overview

PWA와 웹-투-네이티브 물리(PWA & Web-to-Native Physics)는 브라우저 감옥 안에 갇혀 있던 순수 웹 기술(HTML/CSS/JS)이 어떻게 모바일 OS의 네이티브 센서(카메라, 푸시 알림)와 하드웨어 캐시에 손을 뻗어 앱처럼 동작하는지를 다루는 기술 융합 역학입니다.

프로그레시브 웹 앱(Progressive Web App, PWA)은 단순한 모바일 웹사이트가 아닙니다. 서비스 워커(Service Worker)라는 백그라운드 프록시(Proxy) 엔진을 통해 오프라인 상태에서도 캐시를 반환해 화면을 띄우고(Offline First), 웹 푸시 알림(Web Push)을 수신하며, Web App Manifest를 통해 홈 화면에 아이콘을 심습니다. 학습자는 웹뷰(WebView) 브릿지를 통해 JS와 네이티브 OS가 메시지를 주고받는 채널 구조를 뜯어보고, 웹 기술이 네이티브 하드웨어 API(블루투스, 파일 시스템)에 침투하는 브라우저 보안 샌드박스 경계를 아슬아슬하게 통제합니다.

2. Scope & Boundaries

In-Scope

• 서비스 워커(Service Worker): 오프라인 캐싱 메커니즘, 네트워크 요청 인터셉트(Intercept), 백그라운드 동기화(Sync).
• PWA 코어: Web App Manifest (홈 화면 설치), Web Push Notifications.
• 웹뷰 브릿지 통신 (WebView Bridge): JS 인터페이스(postMessage), 네이티브 브릿지를 통한 양방향 통신(Web $\leftrightarrow$ Native).
• Web API 하드웨어 접근: Web Bluetooth, Web Share API, Geolocation, 웹 보안(HTTPS 강제).

Out-of-Scope

• 순수 웹 DOM 조작 및 React/Vue 렌더링: PWA 껍데기 안의 UI 컴포넌트 프레임워크 자체 로직 $ightarrow$ 14-02. Frontend Framework Mechanics 영역으로 위임.
• 크로스 플랫폼 앱 엔진 (React Native/Flutter): 브라우저나 웹뷰를 아예 벗어나 네이티브 레벨에서 렌더링하는 영역 $ightarrow$ 13-03-01 / 13-03-02 영역으로 위임.

Boundaries

• PWA vs React Native (13-03-03 vs 13-03-01): React Native(13-03-01)가 '앱'으로 포장해 네이티브 코드를 뱉는다면, PWA(13-03-03)는 본질적으로 크롬이나 사파리 같은 '웹 브라우저' 위에서 도는 웹사이트지만, 네이티브 앱처럼 보이도록 권한과 오프라인 캐시를 덮어씌운 브라우저 기만(Deception) 물리학입니다.

3. Counterexample

• 서비스 워커 생명주기 환상 (Service Worker Lifecycle Fallacy): 브라우저가 꺼지면 서비스 워커도 당장 죽어버릴 것이라 착각해 백그라운드 푸시나 동기화를 포기하는 무지. 서비스 워커는 웹 페이지 DOM과는 완전히 격리된 별도의 스레드에서 돌아가며, 탭을 다 꺼도 OS 백그라운드에서 살아남아 푸시 알림을 낚아채 화면을 깨우는 네이티브 데몬(Daemon)과 같은 특권을 가집니다.
• 비동기 웹뷰 브릿지 맹신 (Unsafe WebView Bridge): 웹뷰(WebView) 안에 띄운 JS 코드에서 안드로이드/iOS 네이티브 코드로 데이터를 보낼 때 동기식 콜백을 기다리는 행위. 웹뷰 브릿지(postMessage)는 완전히 비동기적(Asynchronous)인 메시지 버스입니다. 네이티브에서 처리가 끝나고 JS로 답장을 주기 전까지 브라우저 화면을 멈춰(블로킹) 두면 앱이 프리징(Jank)됩니다. 통신은 반드시 비동기 프로미스(Promise)로 감싸야 합니다.

4. Prerequisites

• 브라우저 렌더링 파이프라인 (Basic): 브라우저가 DOM을 그리고 통신하는 기본 웹 역학을 알아야 서비스 워커가 네트워크를 중간에서 가로채는 원리를 이해할 수 있습니다. (14-01-02. Browser Rendering)
• 모바일 샌드박스 (Recommended): 네이티브 앱과 웹 브라우저 샌드박스의 차이를 알아야 PWA가 하드웨어 API에 왜 제약을 받는지 알 수 있습니다. (13-01-04. App Sandbox)

5. Learning Map

6. Learning Topics

Basic

Core Topic 01: 서비스 워커(Service Worker)와 오프라인 프록시

• Why to Learn: 유저가 지하철에서 인터넷이 끊겼을 때 공룡 게임(오프라인 에러) 대신 이전에 받아둔 데이터를 띄워 네이티브 앱 같은 안도감을 주방하기 위함입니다.
• What to Learn: Service Worker Lifecycle (Install, Activate, Fetch), Offline First Cache, CacheStorage API, 네트워크 인터셉터.
• How to Learn: 브라우저와 서버 사이의 통신망 한가운데 서비스 워커라는 문지기(Proxy)를 세워두고, 이미지 요청(fetch)이 올 때 인터넷으로 나가지 않고 캐시 창고에서 이미지를 꺼내서 1ms 만에 화면에 던져주는 방어 로직을 뜯어봅니다.
• Implement: 웹 앱 초기 구동 시 필요한 HTML/CSS/JS 및 핵심 뼈대(App Shell)를 서비스 워커의 install 단계에서 캐싱하고, 오프라인 상태 시 fetch 이벤트에서 캐시된 뼈대를 응답하는 오프라인 렌더링 구현.

Core Topic 02: PWA 매니페스트와 앱 위장 구조

• Why to Learn: 앱스토어 심사(30% 수수료) 없이도, 유저의 스마트폰 홈 화면에 아이콘을 심고 URL 표시줄을 없애 완벽한 '앱'으로 위장하기 위함입니다.
• What to Learn: manifest.json, display: standalone, Add to Home Screen (A2HS), Splash Screen.
• How to Learn: 일반 HTML 파일에 매니페스트 JSON을 링크하는 순간, 브라우저가 화면 상단 바(URL)와 하단 네비게이션을 날려버리고(Standalone) 전체 화면 뷰(Fullscreen)로 렌더링 모드를 전환하는 UI 기만 메커니즘을 적용합니다.
• Implement: PWA 요구 조건(HTTPS, 서비스 워커, Manifest)을 충족시켜 모바일 크롬에서 "홈 화면에 추가(설치)" 프롬프트가 자동 트리거되는(A2HS) 바이럴 엔트리포인트 구축.

Recommended

Core Topic 03: 웹뷰 브릿지(WebView Bridge) 통신 물리학

• Why to Learn: 기존에 만들어둔 100장의 웹페이지 화면을 앱 안에 그대로 집어넣고(하이브리드 앱), 웹 버튼을 눌렀을 때 앱의 네이티브 카메라를 열어주기 위함입니다.
• What to Learn: JSBridge, window.postMessage, evaluateJavascript (Android) / WKScriptMessageHandler (iOS).
• How to Learn: 웹 안의 자바스크립트는 샌드박스 밖(OS)으로 나갈 수 없으므로, 네이티브가 웹뷰에 미리 주입해 둔 스파이 객체(window.Android)를 통해 문자열 JSON을 비동기로 쏘아 올리는 양방향 통신 채널을 시각화합니다.
• Implement: 웹(React)에서 버튼을 누르면 JSON 페이로드({action: "OPEN_CAMERA"})를 웹뷰 브릿지로 쏘고, 이를 네이티브(Android/iOS) 스레드가 낚아채 실제 하드웨어 카메라를 열고 찍힌 사진을 base64로 다시 웹으로 내려주는 양방향 통신 루틴 설계.

Core Topic 04: Web API 기반 하드웨어 접근 제어

• Why to Learn: 웹 앱이 네이티브 앱의 고유 영역인 블루투스, 푸시 알림, 파일 시스템에 합법적으로 침투하기 위함입니다.
• What to Learn: Web Push Notifications(VAPID), Web Bluetooth, Web Share, 브라우저 보안 제약(HTTPS 강제).
• How to Learn: 브라우저는 악성 사이트가 하드웨어를 맘대로 조작하지 못하게, 유저의 직접적인 클릭(User Gesture)이 있을 때만 하드웨어 권한 프롬프트를 띄우고 HTTPS 환경에서만 API를 열어주는 제로 트러스트(Zero Trust) 구조를 돌파합니다.
• Implement: 서비스 워커를 백그라운드에 띄워두고 서버로부터 Web Push 알림 페이로드를 수신하여, 웹 브라우저가 백그라운드 상태이거나 꺼져 있을 때도 유저 기기에 시스템 알림(Notification)을 렌더링하는 푸시 통신망 개발.

7. Terminology

8. References

Primary References

• [CS2023: Platform-Based Development / Web] — 브라우저 렌더링 엔진, 하이브리드 앱(Hybrid App) 아키텍처 및 샌드박스 격리(Sandbox Isolation).
• [SWEBOK v3: Software Design] — 프로세스 간 통신(IPC) 브릿지, 오프라인 프록시(Proxy) 디자인 패턴 및 캐시 무효화 전략.

Secondary References

• [Service Worker API Specification (W3C)] — 생명주기 이벤트(Install, Activate) 동기화 상태 기계(State Machine) 물리.
• [Mobile WebView Architecture] — V8/JSC 엔진 컨텍스트(Context)와 네이티브 스레드 간의 비동기 메시지 큐(Message Queue) 병목 처리.

Industry References

• [Google Developers: Progressive Web Apps] — 오프라인 우선(Offline-first) App Shell 렌더링 아키텍처, Web App Manifest 작성 규약.
• [MDN Web Docs: Web APIs] — Web Bluetooth, Push API, Geolocation 센서에 대한 브라우저 보안 컨텍스트(Secure Context/HTTPS) 강제 물리.

9. Final Checklist

Primary Checklist

• 일반 웹 페이지에 Web App Manifest 리스트(display: standalone 등)를 주입하여, 모바일 환경에서 상단 URL 바를 숨긴 완벽한 네이티브 UI 화면을 기만(위장)해 냈는가?
• 하이브리드 앱(WebView) 구조에서 자바스크립트(postMessage)와 네이티브 OS(Android/iOS) 간의 브릿지 채널을 열어 상호 비동기 데이터(JSON)를 안전하게 교환했는가?

Secondary Checklist

• 사용자의 기기가 오프라인(비행기 모드) 상태로 전환되었을 때, 서비스 워커(Service Worker)가 네트워크(Fetch)를 요격하여 미리 구축해 둔 캐시 데이터로 앱 껍데기를 렌더링하는가?
• 브라우저 탭이 백그라운드나 완전히 닫힌 상태에서도, 외부 서버로부터 Web Push 데이터를 수신하여 서비스 워커를 깨우고 OS 상단바 시스템 알림을 트리거하는 물리를 이해했는가?

Industry Checklist

• PWA를 브라우저 보안 컨텍스트 제약망 안에서 작동시키기 위해 로컬(localhost) 테스트 환경을 제외한 모든 통신을 강력한 HTTPS 보안 채널로 강제했는가?
• 웹뷰 브릿지 채널 설계 시, 웹에서 네이티브로 거대한 직렬화(JSON) 데이터 덩어리를 단일 스레드 브릿지로 밀어 넣어 발생하는 프레임 드랍(UI 블로킹) 병목을 분할 전송으로 회피했는가?