我正在开发一个Web应用程序,我正在尝试使用HTML5应用程序缓存。
我可以在线时成功缓存文件并从AppCache加载文件。但是当我离线时,所有的css和js文件都使用MIME类型text / html而不是application / x-javascript或text / css进行传输,因此它无法在离线状态下正常工作。
这是我在离线时请求页面时收到的内容。
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错误。
如何正确设置css和js文件在离线时从appcache以适当的MIME类型传输? 谢谢你的建议
更新: 这就是我在服务器上提供清单文件的方式
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类型的缓存文件之一以及chrome:// appcache-internals /
的其他详细信息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
另一个更新:这在firefox上正常工作,没有任何MIME类型错误。 直哉
答案 0 :(得分:0)
实际上这不是MIME类型的问题。它给了我text / html内容类型错误,因为它返回offline.html,当我请求非缓存文件时返回。 问题是我添加了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哈希作为注释来解决它。