인터넷 연결이 취약하거나 존재하지 않을 수 있으므로 먼저 오프라인을 고려해야 합니다. 즉, 인터넷에 연결되지 않은 것처럼 앱을 작성합니다. 앱이 오프라인으로 작동하면 앱이 온라인 상태일 때 더 많은 작업을 하는 데 필요한 네트워크 기능을 추가합니다. 오프라인 지원 앱 구현에 관한 팁을 읽어보세요.
개요
Chrome 앱은 다음을 무료로 사용할 수 있습니다.
- 앱의 모든 파일(모든 JavaScript, CSS, 글꼴 및 필요한 기타 리소스(예: 이미지))은 이미 다운로드되어 있습니다.
- 앱에서 Chrome Storage API를 사용하여 소량의 데이터를 저장하고 선택적으로 동기화할 수 있습니다.
- 앱은 온라인 및 오프라인 이벤트를 수신 대기하여 연결의 변경사항을 감지할 수 있습니다.
하지만 이러한 능력만으로는 앱이 오프라인에서 작동한다고 보장할 수 없습니다. 오프라인 지원 앱은 다음 규칙을 따라야 합니다.
- 가능하면 로컬 데이터를 사용합니다.
- 인터넷의 리소스를 사용할 때는
XMLHttpRequest를 사용하여 가져온 다음 데이터를 로컬로 저장합니다. Chrome Storage API, IndexedDB 또는 Filesystem API를 사용하여 데이터를 로컬에 저장할 수 있습니다. - 앱의 UI를 데이터에서 분리합니다.
- UI와 데이터를 분리하면 앱 디자인이 개선되고 오프라인 사용 설정 작업이 쉬워집니다. 또한 사용자 데이터의 다른 뷰를 제공할 수도 있습니다. MVC 프레임워크를 사용하면 UI와 데이터를 별도로 유지할 수 있습니다.
- 앱은 언제든지 닫을 수 있다고 가정합니다.
- 애플리케이션 상태를 로컬 및 원격으로 저장하여 사용자가 중단한 부분부터 이어서 시작할 수 있도록 합니다.
- 앱을 철저히 테스트합니다.
- 앱이 일반적인 시나리오와 까다로운 시나리오 모두에서 잘 작동하는지 확인합니다.
보안 제한사항
Chrome 앱은 리소스를 배치할 수 있는 위치가 제한되어 있습니다.
- 로컬 데이터는 사용자의 컴퓨터에 표시되며 안전하게 암호화할 수 없기 때문에 민감한 정보는 서버에 보관해야 합니다. 예를 들어 비밀번호나 신용카드 번호를 로컬에 저장하지 마세요.
- 앱에서 실행하는 모든 JavaScript는 앱의 패키지에 있어야 합니다. 인라인일 수는 없습니다.
모든 CSS 스타일, 이미지, 글꼴은 처음에 앱의 패키지 또는 원격 URL에 위치할 수 있습니다. 리소스가 원격인 경우 HTML에서 지정할 수 없습니다. 대신
XMLHttpRequest를 사용하여 데이터를 가져옵니다 (외부 리소스 참조 참고). 그런 다음 blob URL로 데이터를 참조하거나 Filesystem API를 사용하여 데이터를 저장한 후 로드합니다.
하지만 외부 사이트에서 동영상 및 사운드와 같은 대용량 미디어 리소스를 로드할 수 있습니다. 규칙에 이 예외가 적용되는 이유 중 하나는 앱의 연결이 제한되거나 끊겼을 때 <video> 및 <audio> 요소의 대체 동작이 적절하기 때문입니다. 또 다른 이유는 XMLHttpRequest 및 blob URL을 사용하여 미디어를 가져오고 제공할 때 현재 스트리밍 또는 부분 버퍼링이 허용되지 않기 때문입니다.
샌드박스 처리된 iframe을 제공하려면 <webview> 태그를 만들면 됩니다. 콘텐츠는 원격일 수 있지만 Chrome 앱 API에 직접 액세스할 수는 없습니다 (외부 웹페이지 삽입 참고).
Chrome 앱에 적용되는 일부 제한사항은 콘텐츠 보안 정책 (CSP)에 따라 시행되며, 이 정책은 항상 다음을 따르며 Chrome 앱에서는 변경할 수 없습니다.
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
오프라인 사용 설정 지정
앱이 오프라인에서 잘 작동한다고 가정합니다. 표시되지 않는다면 사용자가 오프라인 상태일 때 실행 아이콘이 어둡게 표시되도록 해당 사실을 광고해야 합니다. 이렇게 하려면 앱 매니페스트 파일에서 offline_enabled를 false로 설정하세요.
{
"name": "My app",
...
"offline_enabled": false,
...
}
로컬에 데이터 저장
다음 표는 데이터를 로컬에 저장하는 옵션을 보여줍니다 (데이터 관리 참조).
| API | 최적 용도 | Notes |
|---|---|---|
| Chrome 스토리지 API | 소량의 문자열 데이터 | 설정 및 상태에 적합합니다. 원격으로 쉽게 동기화할 수 있지만 반드시 그럴 필요는 없습니다. 할당량으로 인해 대량의 데이터에는 적합하지 않습니다. |
| IndexedDB API | 구조화된 데이터 | 데이터를 빠르게 검색할 수 있습니다. unlimitedStorage 권한으로 사용합니다. |
| 파일 시스템 API | 기타 | 파일을 저장할 수 있는 샌드박스 처리된 영역을 제공합니다. unlimitedStorage 권한으로 사용합니다. |
원격으로 데이터 저장
일반적으로 원격으로 데이터를 저장하는 방법은 개발자가 결정하지만 일부 프레임워크와 API가 도움이 될 수 있습니다 (MVC 아키텍처 참고). Chrome Storage API를 사용하는 경우 앱이 온라인 상태이고 사용자가 Chrome에 로그인할 때마다 동기화 가능한 모든 데이터가 자동으로 동기화됩니다. 사용자가 로그인하지 않은 경우 로그인하라는 메시지가 표시됩니다. 그러나 사용자가 앱을 제거하면 사용자의 동기화된 데이터가 삭제됩니다. {질문: 참?}
사용자가 앱을 재설치할 때 만족스러운 경험을 할 수 있도록 앱을 제거한 후 최소 30일 동안 사용자의 데이터를 저장하는 것이 좋습니다.
데이터에서 UI 분리
MVC 프레임워크를 사용하면 데이터에 관한 앱의 뷰와 데이터가 완전히 분리되도록 앱을 설계하고 구현할 수 있습니다. MVC 프레임워크 목록은 MVC 아키텍처를 참고하세요.
앱이 맞춤 서버와 통신하는 경우 서버는 HTML 청크가 아니라 데이터를 제공해야 합니다. RESTful API의 관점에서 생각해 보세요.
데이터가 앱과 분리되면 데이터에 대한 대체 보기를 더 쉽게 제공할 수 있습니다. 예를 들어 공개 데이터의 웹사이트 뷰를 제공할 수 있습니다. 웹사이트 뷰는 사용자가 Chrome을 사용하지 않을 때도 유용할 뿐만 아니라 검색엔진이 데이터를 찾도록 할 수 있습니다.
테스트
앱이 다음과 같은 상황에서 잘 작동하는지 확인합니다.
- 앱이 설치된 후 즉시 오프라인으로 전환됩니다. 즉, 앱을 처음 사용할 때 오프라인입니다.
- 앱이 한 컴퓨터에 설치된 다음 다른 컴퓨터에 동기화됩니다.
- 앱이 제거되었다가 즉시 다시 설치됩니다.
- 앱이 프로필이 동일한 두 대의 컴퓨터에서 동시에 실행됩니다. 한 대의 컴퓨터가 오프라인 상태가 되고 사용자가 그 컴퓨터에서 여러 작업을 수행한 다음 컴퓨터가 다시 온라인 상태가 되면 앱이 정상적으로 작동해야 합니다.
- 앱의 연결이 간헐적으로 끊어져 온라인과 오프라인을 오갈 때가 많습니다.
또한 앱이 사용자의 컴퓨터에 민감한 사용자 데이터 (예: 비밀번호)를 저장하지 않는지 확인합니다.