의견 : 오늘 우리의 콘텐츠는 오프라인 웹 응용 프로그램을 만드는 방법에 관한 것입니다. 장점은 브라우저가 지정한 웹 리소스를 다운로드하여 사용자가 오프라인 상태에서 정상적으로 사이트를 사용할 수 있도록 할 수 있다는 것입니다.
오늘날 우리의 콘텐츠는 오프라인 웹 응용 프로그램을 만드는 방법에 관한 것입니다. 장점은 브라우저가 지정한 웹 리소스를 다운로드하여 사용자가 오프라인 상태에서 정상적으로 사이트를 사용할 수 있도록 할 수 있다는 것입니다.
1. 매니페스트를 정의하십시오
우리는 매니페스트를 사용하여 오프라인시 액세스 해야하는 리소스를 나열합니다. 자체는 텍스트 유형 파일입니다. 첫 번째 줄은 종종 캐시가 나타나고, 필요한 리소스를 한 줄에 하나씩 나열합니다. 파일에 대한 고정 이름 지정 규칙이 없으며 접미사 이름에 대한 요구 사항이 없습니다. 유일한 요구 사항은 서버 측의 접미사 이름을 MIME 유형의 텍스트/캐시 관리로 정의하는 것입니다.
IIS 7 서버 인 경우 아래 단계를 따르십시오.
예를 들어, 접미사가 .appcache 인 경우 iis7을 열고 루트 노드를 선택합니다 (이것은 모든 사이트에서 상속되고 단일 사이트에 대해 구성 할 수도 있음);
2. 오른쪽의 MIME 유형을 두 번 클릭하십시오.
3. 마우스 오른쪽 버튼을 클릭하여 MIME 유형을 추가하여 구성이 완료되도록하십시오.
서버 구성이 완료되면 매니페스트 파일을 추가하십시오.
캐시가 나타납니다
manifestfile.html
IMG/1.JPG
IMG/2.JPG
IMG/3.JPG
그런 다음 다음 예를 살펴 보겠습니다.
<! doctype html>
<html manifest = "manifest.appcache">
<헤드>
<title> 예 </title>
<스타일>
IMG
{
국경 : 중간 더블 블랙;
패딩 : 5px;
여백 : 5px;
}
</스타일>
</head>
<body>
<img src = "img /1.jpg" />
<div>
<버튼> car1 </button>
<버튼> car2 </button>
<버튼> car3 </button>
</div>
<cript>
var buttons = document.getElementsByTagName ( 'button');
for (var i = 0; i <buttons.length; i ++) {
버튼 [i] .onclick = handlebuttonpress;
}
함수 핸들 부트 턴 프레스 (e) {
document.getElementById ( 'imgtarget'). src = 'img/' + e.target.id + '.jpg';
}
</스크립트>
</body>
</html>
프로그램이 실행되면 브라우저에 따라 일부 브라우저는 오프라인 데이터를 로컬로 저장할 수 있는지 여부를 묻습니다. 이러한 간단한 오프라인 응용 프로그램이 작성됩니다.
2. 의심에 대한 답
또한 지식 의이 부분을 배울 때 다음과 같은 몇 가지 문제와 의문을 발견했습니다.
1. 왜 VS2010을 직접 실행하고 (내 개발 환경) 오프라인 응용 프로그램이 올바르게 실행되지 않습니까?
2. 오프라인 응용 프로그램이 성공적으로 생성되었는지 어떻게 알 수 있습니까?
3. 현재 응용 프로그램이 오프라인인지 어떻게 알 수 있습니까?
4. IIS 서비스를 일시 중지 한 후 오프라인 상태가되어야합니다. 페이지를 새로 고침 할 때 404 오류를보고하는 이유는 무엇입니까?
이제 나는 내가 겪은이 질문에 대답 할 것입니다.
2.1. 첫 번째 질문을 먼저 설명하십시오. 이 문제와 관련하여 핵심 요점은 애플리케이션 웹 구성 항목을 구성하는 방법입니다. A VS Development Server의 형식을 사용하는 경우 MIME 유형을 설정할 방법이 없으므로이 경우 오프라인 응용 프로그램을 사용할 수 없습니다. 나머지 두 개의 웹 구성 메소드의 경우, IIS 서버를 구성하기 위해 위에서 소개 한 MIME 유형 방법을 따르는 한 오프라인 응용 프로그램이 올바르게 실행됩니다.
2.2. 두 번째 문제는 아래에 설명되어 있습니다. 여기에서 Chrome 브라우저의 디버깅 도구를 사용하고 Chrome 브라우저를 사용하여 웹 프로그램을 열고 F12를 누르고 리소스 탭으로 전환해야합니다. 구성 정보가 응용 프로그램 캐시에서 발견되고 캐시 된 파일을 찾을 수있는 한 오프라인 응용 프로그램이 성공적으로 생성되었음을 증명합니다.
2.3. 또는 Chrome의 디버깅 도구를 사용하거나 리소스 탭에서 Red Coil이 온라인으로 온라인을 의미합니다.
네트워크 케이블을 뽑고 오프라인을 표시하는 오프라인을 의미합니다. 현재 오프라인 응용 프로그램의 효과가 표시 될 수 있습니다.
2.4. 마지막 질문과 관련하여 여전히 크롬 브라우저의 디버깅 도구를 사용해야합니다. IIS 서비스를 일시 중지하면 리소스 탭의 표시를 살펴 봅니다. 여전히 온라인이지만 유휴 상태에서 나중에 쓸모없는 것으로 바뀝니다. 또한 로컬 IIS를 일시 중지 할 때 오프라인 응용 프로그램의 오프라인 효과를 표시 할 수없는 이유를 설명합니다.
이것은이 섹션의 내용입니다.