2012-03-09 4 views
0

HTML5 응용 프로그램 캐시를 사용하려고하는 웹 응용 프로그램을 개발 중입니다.오프라인 상태이고 AppCache에서 CSS 및 js 파일을 요청할 때 리소스가 스크립트로 해석되었지만 MIME 형식 text/html로 전송되었습니다.

온라인 상태에서 파일을 성공적으로 캐시하고 AppCache에서 파일을로드 할 수 있습니다. 하지만 오프라인으로 갈 때 모든 css 및 js 파일은 application/x-javascript 또는 text/css 대신 MIME 형식 text/html로 전송되므로 오프라인에서 제대로 작동하지 않습니다.

이것은 오프라인 상태에서 페이지를 요청할 때 발생합니다.

Application Cache Error event: Manifest fetch failed (-1) https://example.com/manifest 
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://example.com/offline_assets/stylesheets/cache/offline_all.css". 
Resource interpreted as Script but transferred with MIME type text/html: "https://example.com/javascripts/offline/respond.min.js". 
Resource interpreted as Script but transferred with MIME type text/html: "https://example.com/javascripts/yui3/3.1.1/build/yui/yui-min.js". 
Resource interpreted as Script but transferred with MIME type text/html: "https://example.com/offline_assets/sprockets.js". 

따라서 페이지 스타일이 지정되지 않고 모든 종류의 JS 오류가 발생합니다.

오프라인 상태에서 appcache에서 적절한 MIME 유형으로 css 및 js 파일을 전송하도록 올바르게 설정하려면 어떻게해야합니까? 는 제안

업데이트

주셔서 감사합니다 : 이 내가 서버

class ManifestController < ApplicationController 

    def show 
    headers['Content-Type'] = 'text/cache-manifest' 
    render :text => File.open("#{RAILS_ROOT}/public/manifest.appcache").read, :layout => false 
    end 
end 

에 매니페스트 파일을 제공하고 나는이 검증 테스트 통과하는 방법입니다 : 여기 http://manifest-validator.com/

내 매니페스트 파일입니다 :

CACHE MANIFEST 
#< 
/offline_assets/stylesheets/cache/offline_all.css 
/offline_assets/fonts/websymbols-regular-webfont.woff 
/offline_assets/javascripts/yui3/3.1.1/build/yui/yui-min.js 
/offline_assets/sprockets.js 
/offline_assets/javascripts/offline/respond.min.js 
/offline_assets/images/logoClio.png 
/offline_assets/images/search/icoSearch.png 
/offline_assets/images/icoArrow-down.png 
/offline_assets/images/gold/submenu_current.png 
/offline_assets/images/calendar/left_arrow.gif 
/offline_assets/images/calendar/right_arrow.gif 
/offline_assets/images/calendar/left_arrow_on.gif 
/offline_assets/images/calendar/right_arrow_on.gif 
/offline_assets/images/calendar-lg.gif 
/offline_assets/images/logo-tagline.gif 
/offline_assets/images/icoRecent-matter.png 
/offline_assets/images/icoRecent-contact.png 
/offline_assets/stylesheets/yui/dt-arrow-dn.png 
/offline_assets/stylesheets/cache/sprite.png 
/offline_assets/images/timer_stop.png 
/offline_assets/images/add3.png 
/offline_assets/images/arrow_down.gif 
/offline_assets/images/spinner.gif 
/offline_assets/images/timer_start.png 
/offline_assets/images/delete.png 
/offline_assets/images/offline/logoClio.png 
/offline_assets/images/offline/bgSteps-1.png 
/offline_assets/images/offline/bgSteps-2.png 
/offline_assets/images/offline/bgSteps-3.png 
/offline_assets/images/offline/icoReload.png 
/offline_assets/images/offline/dt-arrow-dn.png 
/offline_assets/images/offline/sprite.png 
#> 

# offline.html will be displayed if the user is offline and attempt to get uncached pages 
FALLBACK: 
//offline.html 

# All other resources (e.g. sites) require the user to be online. 
NETWORK: 
* 

그리고 이것은 캐시 된 파일 중 하나입니다. 크롬에 MIME 타입 및 기타 세부 사항 : // 앱 캐시 - 내부/

https://staging.goclio.com/offline_assets/sprockets.js?cec750eb3581f3d9f78c97d0ad8331df 
HTTP/1.1 200 OK 
Server: nginx/0.8.55 
Date: Fri, 09 Mar 2012 19:56:17 GMT 
Content-Type: application/x-javascript 
Last-Modified: Fri, 09 Mar 2012 19:51:10 GMT 
Expires: Thu, 31 Dec 2037 23:55:55 GMT 
Cache-Control: max-age=315360000 
X-Backend-Server: 333963-web02.rs.goclio.com:81 
Accept-Ranges: bytes 
Vary: Accept-Encoding, User-Agent 
Content-Encoding: gzip 

또 다른 갱신 :이 모든 MIME 유형의 오류가 발생하지 않고 파이어 폭스에서 잘 작동합니다. Naoya

답변

0

실제로 MIME 형식의 문제는 아닙니다. 캐시되지 않은 파일을 요청할 때 반환되는 offline.html을 반환하면서 text/html content-type 오류가 발생했습니다. 문제는 MD5 해시를 각 파일의 매개 변수로 추가했기 때문입니다. 그래서 매니페스트는 이렇게 보였다. 오프라인 동안 컨텐츠를 요청

CACHE MANIFEST 
/offline_assets/stylesheets/cache/offline_all.css?someMD5hash 
/offline_assets/javascripts/yui3/3.1.1/build/yui/yui-min.jsf?anotherMD5hash 
#and may more files with MD5 hash 

FALLBACK: 
//offline.html 

NETWORK: 
* 

, 캐시 파일 이름이 매개 변수로 MD5 해시를 포함와 같은 적절한 파일을 찾을 수 없습니다. 그래서 MD5 해시를 주석으로 포함하여 해결했습니다.