인터넷 연결이 취약하거나 존재하지 않을 수 있으므로 오프라인을 우선으로 고려해야 합니다. 인터넷에 연결되어 있지 않은 것처럼 앱을 작성합니다. 앱이 오프라인으로 작동하면 네트워크 기능이 있어야 합니다. 다음에 대한 팁을 읽어보세요. 오프라인 사용 설정 앱을 구현할 수 있습니다.
개요
Chrome 앱에서는 다음을 무료로 사용할 수 있습니다.
- 앱의 파일—모든 자바스크립트, 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를 사용하여 데이터를 저장한 다음 로드하는 것이 좋습니다.
하지만 외부 사이트에서 동영상이나 사운드와 같은 대용량 미디어 리소스를 로드할 수 있습니다. 1개
이 규칙에 예외가 발생하는 이유는 <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 | 최적 용도 | 참고 |
|---|---|---|
| Chrome 스토리지 API | 소량의 문자열 데이터 | 설정 및 상태에 적합합니다. 원격으로 쉽게 동기화할 수 있습니다 (필수는 아님). 할당량으로 인해 대량의 데이터에는 적합하지 않습니다. |
| 색인화된 데이터베이스 API | 구조화된 데이터 | 데이터를 빠르게 검색할 수 있습니다. unlimitedStorage 권한이 있는 경우 사용할 수 있습니다. |
| 파일 시스템 API | 기타 | 파일을 저장할 수 있는 샌드박스 영역을 제공합니다. unlimitedStorage 권한이 있는 경우 사용할 수 있습니다. |
원격으로 데이터 저장
일반적으로 데이터를 원격으로 저장하는 방법은 개발자가 결정하지만 일부 프레임워크와 API가 도움이 될 수 있습니다 (MVC 참조). 아키텍처 참조). Chrome Storage API를 사용하면 동기화 가능한 모든 데이터가 자동으로 앱이 온라인 상태이고 사용자가 Chrome에 로그인할 때마다 동기화됩니다. 사용자가 로그인하지 않은 경우 로그인하라는 메시지가 표시됩니다. 하지만 사용자가 동기화된 경우, 사용자의 동기화된 데이터는 앱을 제거합니다. {QUESTION: true?}
사용자의 데이터 센터 또는 최소 30일간 더 높은 수익을 기록해야 사용자가 좋은 경험을 할 수 있습니다.
데이터에서 UI 분리
MVC 프레임워크를 사용하면 데이터를 완전히 포함하도록 앱을 설계하고 구현하는 데 도움이 될 수 있습니다 앱의 데이터 보기와 별개로 분리되어 있습니다. MVC 프레임워크 목록은 MVC 아키텍처를 참고하세요.
앱이 맞춤 서버와 통신하는 경우 서버는 HTML 청크가 아닌 데이터를 제공해야 합니다. 생각해 보기 살펴보겠습니다
데이터가 앱과 분리되면 데이터의 대체 뷰를 훨씬 쉽게 제공할 수 있습니다. 예를 들어 모든 공개 데이터의 웹사이트 뷰를 제공할 수 있습니다. 웹사이트 조회수뿐 아니라 는 사용자가 Chrome을 사용할 수 없을 때 유용하지만 검색엔진이 데이터를 찾도록 할 수 있습니다.
테스트
앱이 다음 상황에서 잘 작동하는지 확인하세요.
- 앱이 설치된 후 즉시 오프라인으로 전환됩니다. 즉, 앱을 처음 사용할 때 님은 오프라인 상태입니다.
- 앱이 한 컴퓨터에 설치된 다음 다른 컴퓨터에 동기화됩니다.
- 앱이 제거된 후 즉시 다시 설치됩니다.
- 앱이 동일한 프로필로 두 대의 컴퓨터에서 동시에 실행됩니다. 앱이 작동해야 함 한 컴퓨터가 오프라인 상태가 되면 사용자는 해당 컴퓨터에서 여러 가지 작업을 하게 되는데, 컴퓨터가 다시 온라인으로 전환됩니다.
- 앱의 연결이 간헐적이며 온라인과 오프라인 간에 자주 전환합니다.
또한 앱이 사용자의 비밀번호와 같은 민감한 사용자 데이터를 가상 머신을 만드는 데 도움이 됩니다