데스크톱 프로그레시브 웹 앱

데스크톱 프로그레시브 웹 앱 (PWA)은 사용자 안전과 개인 정보 보호에 중점을 둔 보안 모델로 앱을 빌드하고 웹의 고유한 연결성을 통해 기본 제공 공유를 지원하는 훌륭한 크로스 플랫폼, 크로스 브라우저 방식입니다. 최신 API로 새로운 웹 앱을 빌드하거나 기존 웹 앱을 개선하여 데스크톱 앱과 같은 기능, 안정성, 설치 가능성을 제공하세요. PWA는 ChromeOS용 웹 앱을 제공하는 가장 좋은 방법입니다.

ChromeOS에서는 웹 플랫폼의 강력한 기능이 전면에 배치되어 있으며 웹 앱이 핵심 플랫폼 기능입니다. 설치된 PWA는 ChromeOS 런처에 표시되고, 앱 표시줄에 고정할 수 있으며, 나머지 OS와 긴밀하게 통합됩니다.

PWA 체크리스트를 검토하고 웹 앱이 핵심 PWA 체크리스트를 통과하는지 확인하여 시작하세요. PWABuilder를 사용하여 맞춤 오프라인 페이지를 제공하고 앱을 설치 가능하게 만들 수 있습니다. 그런 다음 이 권장사항을 사용하여 ChromeOS에서 PWA를 돋보이게 만드세요.

설치 가능하게 만들기

일반 웹 앱에 비해 PWA의 큰 장점 중 하나는 기존 데스크톱 앱처럼 설치할 수 있다는 점입니다. web.dev의 프로그레시브 웹 앱 경로에는 PWA를 설치 가능하게 만들기에 관한 섹션이 있습니다. 이 섹션을 사용하여 시작하세요. PWA가 ChromeOS에 설치 가능한 것으로 식별되려면 다음 기준을 충족해야 하며, 이는 Lighthouse의 설치 가능 감사를 사용하여 확인할 수 있습니다.

  • 유효한 웹 앱 매니페스트가 있어야 합니다.
  • Chrome의 설치 기준을 충족해야 합니다.
    • ChromeOS의 PWA의 경우 사용자 참여 휴리스틱 기준점을 충족하지 않더라도 옴니바에 설치 메시지가 표시됩니다.

아이콘은 PWA의 아이덴티티에서 중요한 부분이므로 흥미롭고 고유해야 합니다. 투명도를 포함할 수도 있습니다. PWA는 모든 플랫폼에서 공유되는 하나의 코드베이스를 사용하므로 마스크 가능 아이콘이 있어야 합니다. 마스크 가능 아이콘을 지원하지 않는 운영체제의 경우 일반 아이콘도 포함해야 합니다.

이제 PWA를 설치할 수 있으므로 런처에서 앱 표시줄까지 ChromeOS 전반에 표시됩니다. PWA를 설치하면 앱을 돋보이게 하는 몇 가지 추가 기능도 사용할 수 있습니다.

오프라인 작업 관련 참고사항

앱을 설치 가능하게 설정하면 검색 가능성, 사용성, 기능 면에서 다양한 이점이 있습니다. PWA를 설치 가능하게 만든다고 해서 전체 환경이 오프라인으로 작동해야 하는 것은 아닙니다. 설치된 웹 앱이 기존 앱처럼 느껴지려면 오프라인 기능이 있어야 합니다. 기본 맞춤 오프라인 페이지로 시작하면 됩니다. 사용자는 연결 상태가 변경될 때 설치된 앱이 비정상 종료되지 않을 것으로 예상합니다. 오프라인일 때 기존 앱이 빈 페이지를 표시하지 않는 것처럼 PWA는 브라우저 기본 오프라인 페이지를 표시해서는 안 됩니다. 맞춤 오프라인 페이지는 사용자에게 게임에 연결해야 한다고 알리는 메시지부터 다시 연결될 때까지 시간을 보낼 수 있는 게임까지 다양합니다. 캐시되지 않은 페이지 또는 연결이 필요한 기능에 맞춤 오프라인 환경을 제공하면 사용자 환경 앱 격차를 해소하는 데 도움이 됩니다.

서비스 워커의 install 이벤트 중에 간단한 오프라인 페이지를 만들 수 있습니다. 나중에 사용할 페이지를 미리 캐시하고 사용자가 오프라인 상태인 경우 이 페이지로 응답하면 됩니다. 맞춤 오프라인 페이지 샘플을 따라 이 기능의 작동 방식을 확인하고 직접 구현하는 방법을 알아보세요.

Cache Storage API 외에도 더 강력한 환경을 제공하려면 IndexedDB와 같은 기능을 사용하여 브라우저 내 NoSQL 스토리지를 사용하고 백그라운드 동기화를 사용하여 사용자가 오프라인 상태에서 작업을 수행하고 사용자가 다시 안정적인 연결을 사용할 수 있을 때까지 서버 통신을 지연할 수 있습니다. 안전하고 오래 지속되는 세션과 같은 패턴을 구현하여 사용자를 인증된 상태로 유지하고, 스켈레톤 화면을 사용하여 필요에 따라 캐시된 콘텐츠나 오프라인 표시기로 대체될 수 있는 콘텐츠를 로드하고 있음을 사용자에게 신속하게 알릴 수도 있습니다.

터치 가능하게 만들기

거의 모든 ChromeOS 기기에서 터치를 지원하며 많은 기기에서 스타일러스도 지원하므로 앱이 일반 키보드와 마우스 외에도 두 입력 방식 모두와 원활하게 작동하는지 확인해야 합니다. 포인터 이벤트 API는 이를 처리하기 위해 특별히 설계되었습니다. click 이벤트와 같이 변경하지 않아도 되는 기본적인 포인터 관련 이벤트도 있습니다. mouseup 또는 touchstart와 같은 다른 이벤트는 모든 종류의 포인터에서 원활하게 작동하도록 포인터 이벤트 대응 항목으로 이전해야 합니다. 원하는 경우 다양한 입력 유형을 별도로 관리할 수도 있습니다. 촉각 사용자 입력에 크게 의존하는 앱과 게임의 경우 포인터 이벤트 API로 전환하면 ChromeOS 기기에서 큰 차이를 느낄 수 있습니다.

웹에서 부드럽게 그리기

사용자가 손가락이나 스타일러스로 그림을 그리는 앱을 빌드하는 경우, 입력과 출력 간의 지연 시간을 유연하게 느껴질 만큼 빠르게 유지하는 것은 이전부터 어려웠습니다. ChromeOS용으로 이러한 종류의 Canvas API 기반 앱을 빌드할 때는 canvas.getContext()에 desynchronized 힌트를 사용하여 지연 시간 최소화 렌더링을 제공하는 것이 좋습니다. 캔버스에 desynchronized 힌트를 사용하려면 다음 단계를 따르세요. 

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

터치 설계 고려사항

웹 앱을 설계할 때 터치 및 스타일러스 지원을 고려하는 것이 중요합니다. 마우스 오버와 같은 당연하게 생각하는 상호작용은 다른 입력 방법에서는 제대로 작동하지 않습니다. 터치 및 스타일러스 친화적인 인터페이스를 설계할 때 유의해야 할 몇 가지 권장사항은 다음과 같습니다.

  • 화면 크기를 기반으로 입력 가정을 하지 마세요. 대신 입력 시점에 기능 감지를 사용하여 응답 방법을 결정하세요. ChromeOS에서는 사용자가 한 세션 내에서 마우스, 터치, 스타일러스를 원활하게 전환할 수 있습니다.
  • 사용자가 터치할 것으로 예상되는 요소의 최소 타겟 크기가 주변 요소가 실수로 클릭되지 않을 만큼 충분히 큰지 확인합니다.
  • 마우스를 점진적 개선으로 취급하고 터치 및 스타일러스 (예: 길게 누르기 또는 탭)를 통해 상호작용을 완료할 수 있는지 확인합니다.
  • 터치 사용자는 확대/축소 버튼을 사용하는 대신 지도에서 핀치 투 줌을 하는 등 화면 요소와 직접 상호작용할 수 있기를 기대합니다. 일반적인 터치 동작을 적절히 추가하면 앱이 자연스럽게 느껴지도록 하는 데 큰 도움이 됩니다.

기능을 갖추도록 만들기

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

참고: 이러한 기능은 고려 중인 상태부터 출시된 상태까지 다양한 완성도를 가지며, 데스크톱 또는 휴대기기용으로만 타겟팅될 수 있습니다. ChromeOS 사용자는 데스크톱 타겟팅 기능이 제공되면 이를 사용할 수 있지만, 교차 플랫폼 지원(ChromeOS의 안정적인 지원 포함)은 때때로 수년이 걸릴 수 있습니다.