HTML5 앱을 오프라인에서 사용할 수있게 만들기

클라이언트 용 HTML 앱을 만들고 있습니다. 앱 전체 프론트 엔드는 1 개의 HTML 파일, 1 개의 자바 스크립트 파일, 1 개의 CSS 파일 (jquery 포함) 및 몇 개의 이미지로 구성됩니다. 서버에 앉아 AJAX를 사용하여 호출되는 PHP 스크립트가 몇 개 있지만 인터넷 연결이 가능한 경우에만 사용합니다. 사용할 수있는 연결이 없으면 사이트는 로컬로 캐시 된 데이터 (localStorage 사용)를 사용합니다.HTML5 앱을 오프라인에서 사용할 수있게 만들기

사이트를 오프라인에서 사용할 수있게 만들려면 HTML에 캐시 매니페스트를 선언합니다. 내 HTML은 다음과 같습니다 :이 같은

<!DOCTYPE html> 
<html manifest="cache.manifest.php" language="en"> 
... 
</html>

cache.manifest.php의 출력보기 : 지금까지

CACHE MANIFEST 
#VersionHash: 80b9345e6c39efbbe8431e394b014b4f 

CACHE: 
/css/ebot.css 
/favicon.ico 
/images/appicon.png 
/images/list-arrow.png 
/images/list-checkmark.png 
/images/woman.png 
/index.html 
/js/jquery-1.8.3.min.js 
/js/ebot.ls.js 

NETWORK: 
/emaillog.php 
/getdata.php 
/uploadlog.php

너무 좋아. 이제 인터넷 연결이 가능한 브라우저에서 사이트에 액세스합니다. 사이트에서 오프라인 사용을 위해 정보를 저장할 수 있는지 여부를 묻는 약간의 알림을받습니다. 설정을 체크인하면 사이트가 316K의 데이터를 저장한다는 것을 알 수 있습니다.

이제 인터넷 연결을 끄고 http://www.mysite.com/index.html에 액세스하려고 시도하고 "인터넷 연결을 사용할 수 없음"(또는 그 정도까지) 오류 메시지가 표시되고 페이지가 표시되지 않습니다. 이것은 내 dev 컴퓨터 (파이어 폭스, 사파리, 크롬)뿐만 아니라 클라이언트의 ipad에서 테스트 한 3 개의 브라우저에서 발생합니다 (앱은 결국 ipad에서 사용하기위한 것입니다).

무엇이 여기에 있습니까? 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2012-12-18 Aleks G

대답이 아니지만이 기사를 읽었습니까? http://www.alistapart.com/articles/application-cache-is-a-douchebag/ appcache 사용과 관련된 많은 문제에 대해 이야기합니다. –

여기에는 여러 가지 이유가있을 수 있습니다. 이 기사에서 살펴 보자 : 매니페스트에 대한

난 당신이 적절한 콘텐츠 형식 (MIME)을 지정하지 않은 추측 . 그것은 'text/cache-manifest'가 될 것입니다. Chrome의 콘솔에서 일정을 확인하세요. 앱 캐시 매니페스트가 올 때이 같은 내용을 볼 수있을 것이다 매니페스트 http://example.com/manifest.appcache
응용 프로그램 캐시 확인 이벤트
응용 프로그램 캐시 다운로드 이벤트
응용 프로그램 캐시 진행 이벤트 (XXX의 YYY)
응용 프로그램 캐시 캐시와 응용 프로그램 캐시를 만들기

이벤트

가장 간단한 매니페스트부터 시작하여 매니페스트가 구문 분석되도록하는 것이 좋습니다. 시도하십시오 :

CACHE MANIFEST 
NETWORK: 
*

그런 manifest는 시작 HTML 페이지 만 캐시해야합니다.

출처

2013-01-24 17:30:17 Shrike

Manifest는 올바른 content-type을 명시 적으로 설정하는 PHP 프로그램에 의해 작성됩니다. 크롬과 파이어 폭스 (파이어 버그 포함)를 모두 체크인했다. 그러므로 그것은 분명히 다른 것입니다. –

어떻게 확인 했습니까?Chrome은 devtools의 네트워크 탭에서 앱 매니페스트 가져 오기를 표시하지 않습니다. cache.manifest.php에서 직접 브라우저를 가리 켰습니까? 또한 http 캐싱이 일어나지 않는지 확인하십시오 (서버에서 매니페스트를 반환하는 동안 적절한 헤더 추가). – Shrike

우선, cache.manifest.php를 직접로드하여 확인했습니다. 둘째, 사이트에서 오프라인 사용을 위해 데이터를 저장하려고한다는 팝업창이 표시됩니다. 여기서는 '예'라고 대답합니다. 이는 브라우저가 캐시를 이해하고 있음을 의미합니다. –

HTML5 앱을 오프라인에서 사용할 수있게 만들기

답변

관련 문제