이 페이지는 Cloud Translation API를 통해 번역되었습니다.

강력한 PWA

웹 앱이 플랫폼 알림을 수신하고 게시할 수 있는 알림 API와 같이 일부 PWA 기능은 잘 알려져 있지만, 앱을 강화하기 위해 웹에 도입되는 새로운 기능도 많이 있습니다. Chromium 웹 기능 프로젝트(일명 프로젝트 푸구🐡)는 웹을 고유하게 만드는 요소(사용자 중심 보안, 낮은 마찰, 크로스 플랫폼 호환성)를 유지하면서 새롭고 강력한 웹 표준을 지원하기 위한 노력입니다.

앱 격차 해소

이러한 기능 대부분은 기존 데스크톱 또는 모바일 앱과 웹 앱 간의 격차를 해소하는 데 중점을 두고 있으며, 웹 앱이 플랫폼의 연락처 선택기 및 공유 기능에 액세스하고 설치된 PWA가 플랫폼 공유 타겟으로 등록되고 아이콘 배지를 표시할 수 있도록 하는 첫 번째 주요 기능이 제공됩니다.

각 기능은 광범위한 표준화 프로세스를 거쳐 커뮤니티 의견을 수렴하여 API를 형성하고 최종 설계가 안전하고 비공개이며 신뢰할 수 있도록 합니다. 새 기능은 공개 트래커에서 추적되며 다음 다섯 가지 카테고리 중 하나로 나눌 수 있습니다.

발송됨: Chrome의 최신 안정화 버전에서 사용할 수 있습니다. 사용이 제대로 기능 감지된 경우 안정적으로 사용할 수 있습니다.
오리진 트라이얼: Chrome 오리진 트라이얼 (OT)로 제공되므로 실험용 기능과 API를 실제 사용에서 Chrome팀이 검증할 수 있으며 API 유용성과 효과에 관한 의견을 제공할 수 있습니다. OT는 선택사항이며 사용자가 브라우저에서 특별한 플래그를 전환하지 않아도 사용자와 함께 이 기능을 베타 테스트할 수 있습니다. API는 OT 후에 변경될 수 있으며 OT는 출시 전 일정 기간 동안 사용할 수 없으므로 새로운 API의 조기 출시 메커니즘으로 취급해서는 안 됩니다.
개발자 체험판: Chrome의 플래그 뒤에서 사용할 수 있습니다. 이러한 API는 실험 단계에 있으며 아직 활발하게 개발되고 있습니다. 프로덕션 환경에서 사용할 수 없으며 버그가 있고 API가 변경될 가능성이 높습니다. 개발자는 이 기간에 실험 기능을 직접 사용해 볼 수 있지만, 사용자가 플래그를 사용 설정하여 기능을 사용하도록 안내해서는 안 됩니다.
시작됨: 개발이 시작되었지만 현재 사용할 수 있는 API가 없습니다.
검토 중: 사용자가 관심을 표했지만 아직 구현이 시작되지 않은 API입니다. 아직 시작되지 않은 API가 있는 경우 Chromium팀이 우선순위를 지정할 수 있도록 별표를 표시하거나 문제에 사용 사례를 추가하세요.

PWA 개선

PWA를 빌드할 때 다음 API와 권장사항을 구현하여 웹 앱의 느낌을 크게 개선하는 것이 좋습니다. 일반적인 사용 사례별로 분류하면 앱에서 하나 이상의 API를 활용하여 전반적인 사용자 환경을 개선할 수 있습니다. 🔮로 표시된 API는 오리진 트라이얼에 있으며, 🚩로 표시된 API는 개발자 트라이얼에 있으며, 📱로 표시된 API는 현재 모바일에서 안정적이고 데스크톱 구현이 시작되었으며, 언급된 다른 API는 안정적입니다 (모든 플랫폼에서 사용 가능하지 않을 수 있음). 현재 안정화 버전, 베타 버전 (β로 표시) 또는 카나리아 버전 (α로 표시)의 Chrome에서 사용할 수 있는 API만 포함됩니다. 이 목록은 출시되는 API를 반영하도록 정기적으로 업데이트될 예정입니다.

앱 설치

웹 앱이 설치된 다른 앱과 함께 작업 표시줄, 런처, 데스크톱, 앱 전환기 등에 표시되도록 하려면 PWA가 설치 가능하도록 다음 API를 구현하세요. 원하는 경우 이 Codelab을 따릅니다.

웹 앱 매니페스트 - 브라우저와 운영체제에 웹 앱에 관한 정보(예: 이름, 로고, 앱을 시작할 URL, 웹 앱을 표시하는 방법)를 제공합니다.
서비스 워커 및 캐시 저장소 API - 웹 앱이 프록시 서버를 만들고 브라우저 캐시가 처리되는 방식을 제어할 수 있습니다. 브라우저의 fetch 이벤트에 반응하고 오프라인일 때 웹 앱 매니페스트에 지정된 시작 URL의 가져오기 요청에 콘텐츠로 응답할 수 있는 서비스 워커는 설치 가능 요건입니다.
로그인 시 실행 🚩β - 사용자가 로그인할 때 PWA가 자동으로 실행되도록 구성할 수 있습니다.
앱 아이콘 바로가기 - 지원되는 플랫폼에서 설치된 앱 아이콘의 컨텍스트 메뉴 (예: 휴대기기에서 길게 누르기, 데스크톱에서 마우스 오른쪽 버튼 클릭)에서 웹 앱의 특정 URL (예: 채팅 시작, 사진 업로드 등)로 연결되는 바로가기를 제공합니다.
getInstalledRelatedApps - 웹 앱에서 PWA, Android 앱 또는 Windows (UWP) 앱이 이미 설치되어 있는지 확인할 수 있습니다.

적응형 및 접근성

다양한 기기와 다양한 신체적 또는 정신적 요구사항을 가진 사용자가 웹 앱을 사용할 수 있도록 하려면 다음을 구현하는 것이 좋습니다.

반응형 디자인 - 다양한 기기 및 창 배치 사용자가 앱을 사용할 수 있도록 소형부터 대형 화면 크기에 이르기까지 사용 가능한 환경을 제공하거나 최소한 깨지지 않는 환경을 제공해야 합니다.
WCAG 2.0 가이드라인 - 신경전형적이고 신체적 능력이 있는 개인뿐만 아니라 다양한 신체적, 정신적 능력을 가진 사용자가 웹 앱을 사용할 수 있도록 합니다. 영국 정부의 접근성 디자인 시 유의사항도 참고하세요.

수익 창출 및 배포

웹 결제 - 모든 브라우저 또는 기기에서 모든 결제 또는 결제 서비스 제공업체와 함께 작동하도록 설계된 유연한 표준 온라인 결제 인터페이스입니다.
Digital Goods API 🔮 - 일회성 구매, 반복 구매 (예: 인게임 보석/통화), 정기 결제와 같은 일반적인 구매 유형을 지원하는 등 웹 애플리케이션에서 인앱 구매를 쿼리하고 관리하기 위한 유연한 표준 인터페이스입니다. 웹 결제와 함께 작동합니다.
신뢰할 수 있는 웹 활동 - 호환되는 스토어(예: Google Play)에서 다운로드할 수 있도록 PWA용 Android 앱을 만듭니다.

클립보드 액세스

비동기 클립보드 - 텍스트와 이미지를 사용자의 클립보드에 읽고 쓰며 사용자의 복사 및 붙여넣기 이벤트를 수신 대기합니다.

알림

웹 앱에서 사용자에게 알림을 보내야 하는 경우(예: 채팅 앱 또는 백그라운드 인코딩 작업) 다음 API를 구현하는 것이 좋습니다.

웹 푸시 알림 - 사용자가 선택한 경우 웹 앱에서 사용자에게 푸시 알림을 보낼 수 있습니다.
배지 API - 설치된 웹 앱이 앱 아이콘에 애플리케이션 전체 배지를 설정할 수 있습니다(선택적으로 숫자 포함).
알림 트리거 🔮 - 트리거 조건이 충족되면 사용자에게 알림을 보냅니다 (예: 시간 기반 또는 위치 기반). 캘린더 일정 알림을 생각해 보세요.

URL 프로토콜 등록 🚩α - 웹 애플리케이션이 설치 매니페스트를 사용하여 맞춤 URL 프로토콜/스키마의 핸들러로 등록할 수 있도록 지원합니다.
Web Share - 지원되는 기기에서 내장 시스템 공유 UI를 사용하여 URL, 텍스트, 파일을 기기에 설치된 다른 앱에 공유합니다. 앱을 설치하지 않아도 됩니다.
Web Share Target - 지원되는 기기에서 설치된 PWA를 내장 시스템 공유 UI에서 사용할 수 있도록 하여 사용자가 다른 앱에서 내 앱으로 텍스트와 파일을 공유할 수 있도록 합니다.

파일 열기 및 저장

파일 처리 API 🚩 - 설치된 웹 앱이 지정된 MIME 유형 및/또는 파일 확장자로 파일을 처리 (읽기/스트리밍/수정)할 수 있는 기능을 운영체제에 등록하여 컨텍스트 메뉴의 '애플리케이션으로 열기' 목록에 옵션으로 표시될 수 있도록 합니다.
File System Access API - 세션별 사용자의 파일 시스템에 대한 강력한 액세스로, 앱에 필요한 경우 다음 상호작용을 허용합니다.
- 로컬 파일 시스템에서 파일 읽기 - 파일 선택기를 표시하고 사용자가 열 파일을 하나 또는 여러 개 선택할 수 있도록 허용합니다. MIME 유형 및 확장자로 허용된 파일 유형을 제한하는 것도 가능합니다.
- 열린 파일에 변경사항 저장 - 사용자에게 파일을 저장할 위치를 선택하라는 메시지를 표시하거나 사본을 다운로드하도록 요청하지 않고 FSA로 열린 파일에 변경사항을 직접 저장합니다.
- 로컬 파일 시스템에 새 파일 만들기 - 사용자가 로컬 파일 시스템에 새 파일을 만들 수 있도록 허용합니다. 선택적으로 기본 파일 확장자를 사용할 수 있으며, 앱은 이 파일에 액세스하여 저장할 수 있습니다.
- 최근에 연 파일 - FSA로 만든 파일 핸들러를 IndexedDB에 저장하여 사용자 세션 간에 최근에 사용한 파일 목록을 표시할 수 있습니다 (단, 편집 권한은 세션 간에 지속되지 않음).
- 디렉터리 읽기, 쓰기, 조작 - 사용자가 로컬 파일 시스템에서 디렉터리를 선택할 수 있도록 허용합니다. 그러면 앱이 콘텐츠를 읽고, 파일과 하위 디렉터리를 만들고, 읽고, 삭제하고, 상대 파일 경로를 확인할 수 있습니다.
압축 스트림 - gzip 및 deflate 압축 알고리즘을 사용하여 압축하거나 압축을 해제합니다.

창 관리

전체 화면 API - 사용자가 웹 앱의 요소(예: 동영상)가 전체 화면을 차지하도록 허용
크로스 스크린 창 배치 API 🔮 - 웹 앱이 연결된 디스플레이에 관한 정보를 가져오고 이러한 디스플레이를 기준으로 창을 배치하여 멀티 윈도우, 멀티 디스플레이 웹 앱을 지원할 수 있습니다.
탭이 있는 애플리케이션 표시 모드 🚩 - 설치된 웹 앱이 단일 창뿐만 아니라 하나 이상의 탭에 표시되도록 허용합니다.

더 긴밀한 OS 통합

Local Fonts API 🔮 - 웹 앱이 로컬에 설치된 글꼴을 나열하고 전체 글꼴 데이터를 포함하는 하위 수준 (바이트 지향) SFNT 컨테이너 액세스를 요청하여 앱이 로컬에 설치된 글꼴을 맞춤 렌더링할 수 있도록 합니다.
Wake Lock - 웹 앱이 화면이 절전 모드로 전환되는 것을 방지하여 중단에 대한 걱정 없이 웹 앱이 장기 실행 작업을 실행할 수 있도록 합니다 (예: 파일 트랜스코딩 또는 요리 중에 레시피를 계속 표시).
유휴 상태 감지 🔮 - 사용자가 기기를 적극적으로 사용하지 않는 시점을 웹 앱에서 감지할 수 있습니다.

오프라인 지원 확대

웹 앱이 오프라인에서도 더 잘 작동하도록 하려면 다음 API를 구현하는 것이 좋습니다.

백그라운드 동기화 - 오프라인 상태일 때 연결이 필요한 요청을 대기열에 추가한 다음 네트워크를 사용할 수 있을 때 오프라인에서 요청을 전혀 처리하지 않는 대신 백그라운드에서 웹 앱의 데이터를 동기화합니다. 예를 들어 다시 온라인 상태가 되면 메시지를 전송하거나 문서의 증분 변경사항을 동기화할 수 있습니다.
주기적 백그라운드 동기화 - 설치되고 자주 사용되는 웹 앱이 최소 시간이 경과하면 서비스 워커가 주기적으로 절전 모드에서 해제되고 실행되도록 허용합니다(예: 캐시를 업데이트하여 사용자가 앱을 열 때 콘텐츠가 최신 상태가 되도록 함).
콘텐츠 색인 생성 API - 웹 앱이 브라우저에 오프라인으로 사용할 수 있는 콘텐츠를 알려 브라우저가 사용자에게 표시할 수 있도록 합니다.
백그라운드 가져오기 - 서비스 워커가 종료될 위험 없이 영화를 다운로드하거나 동영상과 이미지를 업로드하는 등 장기 실행 백그라운드 가져오기를 허용합니다.

미디어 스트리밍, 인코딩, 디코딩

웹 앱에서 동영상이나 오디오 파일과 같은 미디어 파일을 재생하는 경우 다음 API를 구현하는 것이 좋습니다.

적응형 스트리밍 - 네트워크 성능에 따라 동영상 스트림이 비트 전송률 간에 전환되도록 허용
PIP 모드 - 사용자가 웹 앱에서 항상 맨 위에 있는 창으로 동영상을 팝아웃하여 독립적으로 이동하고 크기를 조절할 수 있도록 허용합니다.
미디어 세션 API - 사용자가 하드웨어 및 OS 수준 소프트웨어 기능 (예: 키보드 또는 잠금 화면의 재생/일시중지/중지 버튼)을 사용하여 웹 앱의 미디어 재생을 제어하고 OS 수준 미디어 알림 (예: 제목, 아티스트, 앨범, 아트워크)을 제어할 수 있도록 지원
Chromecast API - 사용자가 사용 가능한 Chromecast 수신기로 미디어를 전송하여 TV에서 웹 앱의 동영상을 재생할 수 있도록 합니다.
Web Codecs 🔮 - 지연 시간이 짧은 라이브 스트리밍과 같은 실시간 사용 사례와 파일의 인코딩, 디코딩, 트랜스코딩에 유용한 기본 제공 하드웨어 및 소프트웨어 미디어 인코더와 디코더에 액세스합니다.

입력 지원 확대

포인터 이벤트 - 단일 API를 사용하여 터치, 스타일러스, 마우스 이벤트에 반응하여 사용자에게 더 많은 입력 옵션을 제공합니다. 터치 친화적인 UI 및 사용자 입력 및 컨트롤에 관한 권장사항도 참고하세요.
게임패드 API - 웹 앱이 일반적인 게임패드의 입력에 응답할 수 있도록 지원
Web HID 🚩 - 웹 앱이 비표준 휴먼 인터페이스 기기 (예: 맞춤 컨트롤러)에 액세스하도록 허용합니다.

고급 주변기기 지원

Web USB - 웹 앱이 앱에서 비표준 (예: 키보드 및 마우스) USB 기기에 액세스할 수 있도록 허용합니다.
Serial API 🔮 - 실제 또는 가상 직렬 포트를 통해 하드웨어 기기와 통신하는 API를 추가합니다.

PWA 체크리스트

이 강력한 새 API로 PWA를 개선할 준비가 되셨나요? 아래 사용 사례 중 하나를 선택하여 사용할 권장 API 세트를 확인하거나 자체 체크리스트를 만들어 완료를 위해 노력하세요.