Chrome 앱에서 전환

이전 옵션

Chrome 앱에서 이전할 수 있는 두 가지 기본 옵션에는 웹 애플리케이션과 Chrome 확장 프로그램, 두 가지가 있습니다.

Chrome 앱을 웹 애플리케이션 또는 Chrome 확장 프로그램으로 이전할 수 있습니다.

대부분의 경우 웹 애플리케이션이 선호됩니다. Chrome 확장 프로그램은 웹이 지원하지 않는 사용 사례(예: 사용자 인터페이스 없이 백그라운드에서 실행)에 일부 시나리오에서 사용할 수 있습니다.

웹 애플리케이션

Chrome 앱에서 이전할 때 선호되는 대안은 웹 애플리케이션을 빌드하는 것입니다. 이렇게 하면 웹 기능 프로젝트와 같은 고급 기능을 사용할 수 있습니다. 이제 Capabilities 프로젝트에 포함된 API가 이전에 Chrome App API로 달성할 수 있었던 대부분의 사용 사례를 지원합니다. 하지만 이러한 기능을 반드시 사용해야 하는 것은 아닙니다. 웹의 유연성 덕분에 개발자는 자신의 필요에 가장 적합한 복잡성 수준을 선택할 수 있습니다.

웹 애플리케이션의 장점

웹 애플리케이션은 Chrome 앱에 비해 다음과 같은 장점이 있습니다.

  • 이식성: Chrome 앱은 Chrome에서만 실행됩니다. 웹 애플리케이션은 대부분의 브라우저와 운영체제에서 실행되지만 다양한 API에 대한 지원 여부는 다릅니다.
  • 개발자 환경: Chrome 앱은 웹 애플리케이션 (HTML, 자바스크립트, CSS)과 동일한 기술을 사용하지만 일부 Chrome 앱 고급 기능 (예: 백그라운드 페이지)은 표준 기능이 아니므로 추가 지식이 필요합니다.
  • 기능 세트: Chrome 앱은 더 이상 유지보수되지 않거나 새로운 기능으로 업데이트되지 않는 API를 사용합니다. 웹 애플리케이션은 지속적으로 진화하고 모든 최신 API에 액세스할 수 있는 개방형 웹을 사용합니다.
  • 설치 및 업데이트: Chrome 앱은 수동으로 설치하고 업데이트해야 하며 스토어 검토가 필요한 경우도 있습니다. 웹 애플리케이션은 브라우저에서 직접 액세스할 수 있으며 원하는 경우 설치할 수 있습니다. 웹 애플리케이션 업데이트는 브라우저가 새 파일을 가져오는 즉시 배포됩니다.
  • 지원: Chrome 앱과 웹 애플리케이션 모두에 상당한 규모의 커뮤니티가 있지만 웹 플랫폼은 훨씬 더 존재감이 크며, 개발자를 지원하기 위해 프레임워크 및 라이브러리와 같은 광범위한 개발 도구를 제공합니다.

프로그레시브 웹 앱

프로그레시브 웹 앱(PWA)은 향상된 기능, 설치 가능성, 안정성을 제공하기 위해 최신 API로 빌드되고 최적화된 웹 애플리케이션입니다. 이러한 기능을 구현하면 웹에서 앱과 같은 환경을 구현할 수 있습니다.

설치 가능성

PWA는 데스크톱과 모바일 플랫폼 모두에서 설치 가능하지만 브라우저에서 직접 액세스할 수 있으므로 선택사항입니다. PWA를 설치하기로 선택한 사용자는 아이콘과 단축키를 통해 PWA를 실행할 수 있습니다. PWA의 웹 매니페스트 파일에 설치 후 실행하면 자체 창에서 열림을 나타내는 메타데이터를 제공할 수 있습니다.

안정성

PWA는 열악한 네트워크 조건에서도 일관되게 작동합니다. 이는 서비스 워커라고 하는 PWA의 핵심 구성요소로 가능합니다. 서비스 워커를 사용하면 네트워크 요청을 가로채고 캐시된 콘텐츠를 제공하여 앱이 오프라인 상태이거나 연결 상태가 좋지 않은 상황에서도 앱이 작동하도록 할 수 있습니다. Workbox와 같은 라이브러리는 일반적인 오프라인 기능을 구현할 수 있도록 즉시 사용 가능한 전략 세트를 제공하여 개발을 크게 간소화합니다.

향상된 기능

웹 기능 프로젝트는 웹 애플리케이션이 Chrome 앱에서 구현할 수 있는 다양한 사용 사례를 달성하는 데 도움이 됩니다. 하지만 웹의 보안 모델에는 몇 가지 제한사항이 적용됩니다. 다음은 기존 Chrome App API 대신 사용할 수 있는 고급 웹 기능의 몇 가지 예입니다.

  • 블루투스 및 USB 액세스: 웹 블루투스와 웹 USB는 각각 chrome.bluetooth과 chrome.usb의 대안을 제공합니다.
  • 파일 시스템 관리: File System Access API는 chrome.fileSystem API 대신 사용할 수 있습니다.
  • 단축키: 웹 앱은 다양한 키 이벤트 (예: keydown)를 수신 대기하여 단축키를 지원할 수 있지만 지원할 수 있는 단축키는 제한되어 있습니다. 웹 앱을 전체 화면 모드로 사용하는 경우 Keyboard Lock API를 사용하여 이러한 시스템 단축키를 가로챌 수 있습니다.
  • 영구 저장소: 웹 애플리케이션 내에서 영구 저장소 권한을 요청하면 Chrome 앱의 unlimitedStorage 권한과 유사한 기능을 제공할 수 있습니다.
  • Geolocation: 웹 앱에서 위치정보 권한 대신 Geolocation API를 사용하여 사용자의 위치를 찾을 수 있습니다.
  • 백그라운드 처리: background 권한의 대안으로는 Background Sync API 및 Periodic Background Sync API가 있습니다.
  • 클립보드에 복사: Async Clipboard API를 사용하면 텍스트와 이미지를 모두 프로그래매틱 방식으로 복사하여 붙여넣을 수 있습니다.

Chrome 확장 프로그램

웹 애플리케이션은 Chrome 앱에서 이전하는 최선의 대안이지만 경우에 따라 Chrome 확장 프로그램이 옵션이 될 수 있습니다. 또한 확장 프로그램은 웹 기술 (HTML, CSS, 자바스크립트)으로 빌드되며 브라우저 기능을 추가하거나 수정하고 더 나은 사용자 환경을 위해 다른 웹 애플리케이션을 맞춤설정하는 데 사용할 수 있습니다.

독립형 확장 프로그램 빌드

제공하려는 사용자 환경에 따라 Chrome 앱을 확장 프로그램으로 변환하는 것이 좋습니다. 예를 들어 사용자 인터페이스의 작은 팝업 창을 표시하거나 확장 프로그램이 제공하는 페이지로 이동하는 브라우저 작업 버튼을 제공할 수 있습니다. 이 UI 모델은 백그라운드에서 대부분의 작업을 실행하는 앱에 더 적합할 수 있습니다.

웹 애플리케이션에서 Chrome 확장 프로그램 연결

Chrome 앱이 웹 플랫폼에서 사용할 수 없는 기능을 제공하는 경우 Chrome 확장 프로그램을 웹 애플리케이션에 연결하여 확장 프로그램 API에 대한 액세스 권한을 부여할 수 있습니다.이 접근 방식의 단점은 사용자 / IT 관리자가 두 가지 다른 부분 (웹 애플리케이션 및 호환 확장 프로그램)을 관리해야 한다는 것입니다. Chrome 확장 프로그램은 일부 브라우저에서 실행할 수 없으므로 필요한 기능을 사용할 수 없는 경우를 감지하고 이러한 다른 브라우저 사용자에게 설명 텍스트를 제공해야 합니다.

웹 애플리케이션 또는 Chrome 확장 프로그램을 만들어야 하나요?

웹 애플리케이션은 Chrome 앱에서 이전하는 데 선호되는 기술입니다. Chrome 확장 프로그램이 더 나은 선택일 수 있는 몇 가지 사용 사례가 있습니다. 결정하기 전에 다양한 요인에 따라 어떤 옵션이 더 나은지 분석하세요.

  • 용도: Chrome 확장 프로그램은 주로 브라우저의 기능을 확장하는 데 사용됩니다. 일반적인 사용 사례로는 생산성 도구, 웹페이지 콘텐츠 보강, 정보 집계가 있습니다. 웹 애플리케이션은 웹의 기능을 최대한 활용하여 훨씬 광범위한 사용 사례를 가질 수 있습니다.
  • 사용자 환경: Chrome 확장 프로그램은 일반적으로 사용자 인터페이스가 더 제한적이며 브라우저와 통합되도록 설계되었습니다. 웹 애플리케이션은 네이티브 앱처럼 보이는 풍부한 사용자 인터페이스를 가질 수 있으며, 고도로 맞춤설정이 가능합니다.
  • 이식성: Chrome 확장 프로그램은 Chrome에서만 사용할 수 있습니다. 일부 브라우저 (예: Firefox 및 Edge)는 Chrome과 동일한 확장 프로그램 API를 지원하지만 범용은 아닙니다. 웹 애플리케이션은 모든 브라우저에서 지원되지만 모든 API가 지원되는 것은 아닙니다.
  • 검색 용이성: Chrome 확장 프로그램을 설치 (예: Chrome 웹 스토어 또는 자체 호스팅을 통해)하고 브라우저 툴바를 통해 액세스해야 합니다. 웹 애플리케이션은 URL을 통해 즉시 로드되며 모든 브라우저에서 액세스할 수 있습니다. 선택적으로 설치할 수 있지만 필수는 아닙니다.
  • 기능 모음: Chrome 확장 프로그램은 Chrome API를 통해 Chrome과 긴밀하게 통합됩니다. 웹 애플리케이션은 하위 수준 또는 시스템 수준의 작업에서 더 제한될 수 있습니다. 설명했듯이 웹 애플리케이션에서 확장 프로그램을 호출하여 확장 프로그램 전용 API에 액세스할 수 있습니다.
  • 백그라운드 작업: Chrome 확장 프로그램은 브라우저 창이 닫혀 있어도 백그라운드 작업을 수행하고 실행할 수 있습니다. 반면에 웹 애플리케이션은 일반적으로 포그라운드에서 실행되도록 설계되고 백그라운드 기능이 더 제한되며 주로 성능과 안정성을 위해 사용됩니다.

이전 단계

Chrome 앱 이전

Chrome 앱에서 웹 애플리케이션 또는 Chrome 확장 프로그램으로 이전하려면 다음 단계를 따르세요.

  1. 앱 기능의 범위 지정: 경우에 따라 앱에서 웹 애플리케이션을 사용해야 하는지 아니면 Chrome 확장 프로그램을 빌드하는 것만 선택해야 하는지를 결정합니다. 두 가지 유형 모두 필요에 적합한 경우 선택할 수 있습니다. 각 기술이 제공하는 기능에 대해 자세히 알아보려면 웹 기능 사이트 및 Chrome Extension API 참조를 확인하세요.
  2. 학습 및 빌드: 학습 리소스를 통해 기술에 대해 알아보고 앱을 시작합니다. PWA 교육 및 Chrome 확장 프로그램 시작하기 가이드는 이러한 각 기술을 시작하는 데 유용한 리소스입니다.
  3. 테스트 및 배포: 새 앱을 광범위한 출시 전에 소수의 사용자에게 제공하여 제대로 작동하는지 확인합니다. 더 광범위하게 배포하기 위해 브라우저에서 웹 애플리케이션에 액세스하고 설치할 수 있습니다. Chrome 확장 프로그램은 일반적으로 Chrome 웹 스토어를 통해 배포되거나 자체 호스팅됩니다. 관리 시나리오에서는 관리자가 둘 다 강제 설치할 수 있습니다.

사용자 이전하기

Chrome 앱에서 이전하기로 선택한 기술에 관계없이 사용자에게 현재 앱을 제거하고 새로운 환경으로 안내하도록 안내해야 합니다.

앱이 중단되었으며 사용자가 앞으로 웹사이트나 Chrome 웹 스토어를 방문해야 한다는 메시지를 포함하도록 앱을 업데이트하는 것이 좋습니다 (다음 예 참고). uninstallSelf() 메서드를 호출하는 '제거' 버튼을 포함할 수도 있습니다.

Chrome 75부터는 Chrome 앱 내에서 버튼 클릭이나 기타 사용자 동작에 대한 응답으로 installReplacementWebApp() 메서드를 사용하여 대체 웹 애플리케이션의 설치 흐름을 자동으로 트리거할 수 있습니다.

Google 포토 Chrome 앱 교체

추가적인 고려사항은 Chrome Enterprise 브라우저 및 ChromeOS Enterprise 관리자에게 조직의 앱 정책을 업데이트하도록 알리는 것입니다. Enterprise 및 Education 관리 사용자의 경우 일반적으로 관리 정책을 통해 앱 및 확장 프로그램을 강제 설치합니다. 개발자는 관리자에게 ExtensionInstallForcelist 정책 (Chrome 앱 설치에 사용됨)을 업데이트하고 웹 앱의 URL이 있는 WebAppInstallForceList 정책으로 대체하도록 알려야 합니다.

관리 콘솔 확장 프로그램 및 웹 앱 강제 설치 정책

지원

기술적인 질문이 있다면 다음과 같은 리소스를 사용하여 지원을 받을 수 있습니다.