프로그레시브 웹 앱은 단순히 화면에 콘텐츠를 렌더링하거나 웹 서비스에 연결하는 것 이상의 기능을 합니다. PWA는 파일 시스템의 파일을 처리할 수 있고, 시스템의 클립보드와 상호작용할 수 있으며, 기기에 연결된 하드웨어에 액세스할 수 있습니다. 모든 Web API는 PWA에 사용할 수 있으며, 앱이 설치되면 사용할 수 있는 몇 가지 추가 API가 있습니다.
웹으로 지금 할 수 있는 일을 참고하면 각 플랫폼의 가능성을 확인할 수 있습니다. 개별 API 또는 기능의 경우 Can I Use 또는 MDN의 브라우저 호환성 표를 사용할 수 있습니다.
항상 기능 지원 확인
PWA의 첫 번째 문자는 프로그레시브를 의미하며 점진적 개선 및 기능 감지 개념에서 비롯됩니다. 앱이 모든 기기에서 동일한 방식으로 작동한다고 기대해서는 안 됩니다. 여러 국가에서 수십억 대의 기기에서 다양한 컨텍스트와 기능을 사용할 수 있기 때문에 PWA는 점진적이며 훌륭한 플랫폼이 됩니다.
즉, 일부 기기에서는 사용할 수 없는 레이어로 앱을 개발하고 사용하기 전에 가용성을 확인해야 합니다.
사용하기 전에 JavaScript로 API가 있는지 확인하거나 특정 기기에서 서비스를 사용할 수 있는지 API에 문의해야 합니다.
강력한 웹
오늘날 웹은 매우 강력합니다. 예를 들면 다음과 같습니다.
- WebRTC, 위치정보, 푸시 메시지를 사용하여 지역 밀착형 영상 채팅 앱을 만들 수 있습니다.
- 앱을 설치 가능하게 만들 수 있습니다.
- WebAssembly로 동영상 효과를 추가할 수 있습니다.
- WebGL 및 WebXR을 통해 가상 현실로 구현할 수도 있습니다.
PWA 강화
PWA 기능 API를 네 개 그룹으로 나누어 보겠습니다.
- 녹색: 기술적으로 가능한 경우 모든 플랫폼의 모든 브라우저에서 사용할 수 있는 API 대부분은 여러 해 동안 발송되어 성숙한 상태로 간주되므로 안심하고 사용할 수 있습니다. 이 그룹의 예시 API는 Geolocation API입니다.
- 연한 녹색: API를 일부 브라우저에서만 사용할 수 있습니다. 일부 플랫폼에서는 지원이 부족하다는 점을 감안하여 지원되는 하위 그룹 내의 브라우저에서 더욱 성숙되어 사용자가 자신 있게 이 기능을 사용할 수 있습니다. 이 그룹의 예시 API는 WebUSB입니다.
- 노란색: 실험용 API 이러한 API는 아직 완성되지 않았으며 일부 브라우저에서만 사용할 수 있으며 테스트 또는 시험 내에서만 사용할 수 있습니다. 실험용 챕터에서 이러한 기능에 관해 설명했습니다.
- 빨간색: PWA에서 사용할 수 없는 API 그룹이며, 장기적으로 API를 추가할 계획이 있습니다. 이 그룹의 예시 API로는 지오펜싱이 있습니다.
친환경 기능
다음은 PWA에서 사용할 수 있는 가장 중요한 기능의 목록입니다.
기본사항
- 캐싱 챕터에 설명된 대로 Cache API를 사용하여 파일을 로컬에서 캐싱합니다.
- 복잡성 관리 챕터에서 확인한 웹 작업자를 사용하여 스레드에서 작업 실행
- 서비스 워커 챕터에서 확인할 수 있는 서비스 워커에서 다양한 전략을 사용하여 네트워크 요청 관리
- 2D 캔버스: Canvas API를 사용하여 화면에 2D 그래픽을 렌더링합니다.
- 3D 그래픽을 렌더링하는 2D 및 3D 고성능 캔버스 또는 WebGL
- WebAssembly 또는 WASM: 성능을 위해 하위 수준으로 컴파일된 코드를 실행합니다.
- 실시간 통신(WebRTC API 사용)
- Web Performance API를 사용하여 사용자 환경을 측정한 후 더 나은 환경을 제공합니다. 자세한 내용은 Performance API 가이드를 참고하세요.
- 오프라인 데이터 챕터에 설명된 대로 IndexedDB 및 스토리지 관리를 사용하여 데이터를 로컬에 저장하여 할당량을 쿼리하고 영구 스토리지를 요청합니다.
- 낮은 수준의 오디오(Web Audio API 사용)
- Page Visibility API를 사용한 포그라운드 감지
- Fetch API 및 WebSocket API를 사용한 네트워크 통신
하드웨어 및 센서
- Geolocation은 Geolocation API를 통해 위성 또는 Wi-Fi 등 다양한 제공업체를 통해 사용자의 위치를 가져옵니다.
- 카메라 및 마이크는 미디어 기기 인터페이스를 사용하여 카메라와 마이크에서 미디어 스트림을 수신합니다.
- 센서는 Sensors API나 이전 인터페이스(예: DeviceMotionEvent 및 DeviceOrientationEvent)를 사용하여 가속도계, 자이로스코프, 자기계 등에서 실시간 정보를 수집합니다. Safari에서는 비표준 권한 대화상자 요청을 통해 사용해야 합니다.
- 터치 및 포인터는 포인터 이벤트 및 터치 이벤트 덕분에 손가락, 마우스, 트랙패드 또는 펜으로 하는 모든 터치 및 포인터 기반 클릭에 관한 정보에 액세스합니다.
- Gamepad API를 사용하여 기기에 연결된 표준 게임패드 및 조이스틱에서 들어오는 정보를 읽는 게임패드
- 웹 인증 또는 WebAuthn을 사용한 생체 인식 인증 (예: 얼굴 또는 지문 인식)
운영체제 통합
- 음성 합성 및 음성 인식은 Web Speech API 덕분에 플랫폼에 설치된 음성을 사용해 사용자와 대화하고 사용자가 말하는 내용을 인식합니다.
- OS 통합 챕터에서 다룰 Web Share API 덕분에 PWA에서 기기의 다른 앱 및 위치에 콘텐츠를 공유할 수 있습니다.
- OS 통합 챕터에서 설명한 대로 Clipboard API를 사용하면 클립보드에 액세스하여 클립보드의 콘텐츠를 다양한 형식으로 저장하고 가져올 수 있습니다.
- Credential Management API를 사용하여 사용자 인증 정보와 비밀번호를 관리합니다.
- PIP 모드 API를 사용하여 OS 내에서 PIP 모드 동영상 재생을 사용 설정합니다.
- Windows 챕터에서 보여드린 대로 Fullscreen API 덕분에 콘텐츠를 전체 화면으로 렌더링할 수 있습니다.
라이트 그린 기능
다음은 PWA에서 사용할 수 있는 가장 중요한 기능 목록입니다. 일부 브라우저에서는 이러한 기능을 사용하지 못할 수도 있다는 점에 유의하시기 바랍니다.
기본사항
- WebGL 2.0: OpenGL 3.0과 일치하는 WebGL 사양의 새로운 버전
- 코덱: 동영상 스트림의 개별 프레임 및 오디오 청크에 대한 낮은 수준의 액세스. 웹 코덱 API를 통해 미디어가 처리되는 방식을 완전히 제어해야 하는 웹 애플리케이션에 유용합니다.
하드웨어 및 센서
- Media API 외에 화면 이동, 기울이기, 확대/축소 컨트롤에 액세스할 수 있는 고급 카메라 컨트롤
- 블루투스 LE: 웹 블루투스 API를 사용하여 사용자 근처의 블루투스 저전력 기기와 통신합니다. 자세한 내용은 JavaScript를 통한 블루투스 기기와 통신을 참조하세요.
- 근거리 무선통신: WebNFC API를 사용하는 NFC 태그나 카드와 같은 경량 NFC 데이터 교환 형식 (NDEF) 메시지를 통해 NFC를 통해 데이터를 교환합니다. Android용 Chrome에서 NFC 기기와 상호작용에서도 자세한 내용을 확인할 수 있습니다.
직렬 주변기기: 웹 직렬 WPI를 사용하여 직렬 포트, USB, 블루투스를 통해 직렬 포트로 기기에 연결된 기기에 대한 하위 수준 액세스 다음 링크에서 직렬 포트 읽기 및 직렬 포트 쓰기 방법을 알아볼 수 있습니다.
USB WebUSB API를 통해 연결된 기기와 통신하기 위한 USB 기기 액세스. 자세한 내용은 웹에서 USB 기기에 액세스를 참고하세요.
인간 인터페이스 기기를 사용하면 PWA가 WebHID API를 사용하여 일반적이지 않은 인간 상호작용을 위해 준비된 모든 종류의 기기와 상호작용할 수 있습니다. 일반적이지 않은 HID 기기에 연결하기에 관한 가이드를 참고하세요.
- 주변광은 Sensors API 외에도 기기 주변 조도의 현재 조도 수준이나 조도를 읽습니다.
- 진동은 문제가 발생할 때 Vibration API를 통해 사용자에게 햅틱 반응을 보입니다(지원되는 경우).
- 미디어 녹화는 분석, 처리 또는 디스크 저장을 위해 MediaRecorder API를 사용하여 MediaStream 또는 HTMLMediaElement 객체 (예:
<video>
태그)에서 생성된 데이터를 캡처합니다. - PWA를 계속 실행해야 할 때 Screen Wake Lock API를 사용하여 화면에 wake Lock을 적용하면 기기의 화면을 어둡게 하거나 잠그는 것을 방지할 수 있습니다.
- 가상 현실을 사용하면 WebXR Device API를 통해 PWA에서 헤드셋과 기타 기기를 사용할 수 있습니다.
- 증강 현실은 WebXR Device API 또는 AR 콘텐츠용 Safari Quick Look 앱을 사용하는 등 다양한 방법으로 PWA에서 구현할 수 있습니다.
- 유휴 감지 API로 비활성 사용자를 감지합니다.
- 방향 잠금은 Screen Orientation API 또는 설치된 앱의 웹 앱 매니페스트의
orientation
속성 덕분에 PWA가 화면에 있는 동안 방향을 세로 또는 가로로 잠급니다. - Slides API를 사용하여 프로젝터 및 보조 디스플레이에 콘텐츠를 표시할 수 있습니다.
- 포인터를 잠그면 Pointer Lock API 덕분에 일부 게임에 유용하며 위치 값 대신 포인터 (마우스, 트랙패드, 포인터)에서 델타 이동 정보를 수신할 수 있습니다.
운영체제 통합
- OS 통합 장에서 살펴본 File System Access API 덕분에 기기에서 파일을 읽고 씁니다.
- OS 통합 장에서 설명한 대로 웹 공유 타겟을 통해 다른 앱에서 콘텐츠를 가져옵니다.
- OS 통합 장에 설명된 대로 Contact Picker API를 사용하여 연락처 데이터를 가져옵니다.
- Background Synchronization API 덕분에 PWA가 사용되지 않는 동안 백그라운드에서 동기화가 가능합니다.
- Web Periodic Background Synchronization API 덕분에 PWA가 사용되지 않는 동안 작업 예약이 가능합니다.
- 웹 푸시 및 웹 알림 API를 사용하여 알림을 전송합니다.
- 사용자가 PWA를 사용하지 않는 동안에도 Background Fetch API 덕분에 백그라운드에서 파일을 전송할 수 있습니다.
- Media Session API를 사용하여 운영체제와 미디어 재생을 통합합니다.
- Payment Request API를 사용하면 PWA에서 결제를 관리할 수 있습니다. Apple은 또한 Payment Request API와 함께 Apple Pay JS 라이브러리를 제공합니다.
- Network Information API를 사용하여 연결 유형 (4G, Wi-Fi) 및 데이터 저장 플래그와 같은 네트워크 상태 쿼리
- Screen Capture API를 사용하여 스크린캐스트 또는 화면 공유를 위해 사용자 화면을 캡처합니다.
- Shape Detection API를 사용하여 바코드 (사람의 얼굴 및 텍스트 OCR는 아직 개발 중임) 등 기기 내 하드웨어 가속 감지기를 사용하여 도형을 감지합니다.
- 기기 메모리 인터페이스를 사용하여 기기의 메모리를 쿼리합니다.
- SMS를 통한 일회용 비밀번호를 사용하면 WebOTP API를 사용하여 서버에서 보낸 SMS를 통해 코드를 자동으로 수신할 수 있습니다. Safari는
<input>
요소를 기반으로 솔루션 하위 집합을 구현합니다. WebKit 블로그에서 자세히 알아보세요. - Virtual Keyboard API를 사용하여 휴대기기 화면에 표시되는 가상 키보드를 관리합니다.