기능

프로그레시브 웹 앱은 단순히 화면에 콘텐츠를 렌더링하거나 웹 서비스에 연결하는 것 이상의 기능을 합니다. 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를 통해 미디어가 처리되는 방식을 완전히 제어해야 하는 웹 애플리케이션에 유용합니다.

하드웨어 및 센서

  • 주변광은 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 덕분에 일부 게임에 유용하며 위치 값 대신 포인터 (마우스, 트랙패드, 포인터)에서 델타 이동 정보를 수신할 수 있습니다.

운영체제 통합

자료