I am designing on offline html5 application, which works fine in desktop browser(IE, Chrome, Safari etc) and supports offline capability.
The same application will not work in iPad Safari Browser, but works fine in Chrome browser.
I have set the MIME type to text/cache-manifest and also validated my manifest file online which is fine.
Are there any special settings required for the application to make it work in ipad Safari?
The problem in my cache manifest was
1. I specify the homepage as "/" that need to be cached.
The above works fine on all browsers except on iPad which throws error.
I have removed the "/" that represent home page from the cache section. It works fine now on all the browsers including iPad.
Ensure the cache.manifest file only uses relative URLs not ABSOLUTE.
Ensure the cache.manifest was saved in right charset in your IDE/Text redactor
Don't include page where cache.manifest is inited (page with <html manifest="cache.manifest">)
Related
I'm implementing an appcache in my application and I have a lot of problems with setings it correctly.
For this specific moment I have problems to determine, if files loaded are for sure from the appcache and not from the regular cache?
Can someone provide me with links/tips how can I check that? E.g. in Chrome in the dev tools in Network tab there is placed a (from cache) text for cached resources, but how can I know this is the correct cache?
In Firefox sometimes on files which should be cached in appcache I have nitification in Firebug, that they are loaded from BFCache not AppCache and something like tjat houldn't happen.
So once again, can you provie me with e.g. some plugins for popular browsers (IE, Firefox, Chrome) to check that?
You explicitly declare a page to be cached by the AppCache by referencing a manifest file so you can be sure its using AppCache. A manifest file is
simple text file that lists the resources the browser should cache for
offline access.
and,
The manifest attribute should be included on every page of your web
application that you want cached.
<html manifest="example.appcache">
....
</html>
http://www.html5rocks.com/en/tutorials/appcache/beginner/
BFCache on the other hand is specific to Firefox (other browsers have similar implementation) and serves its purpose differently from AppCache.
AppCache helps your web apps be accessible offline while BFCache speeds up your backward and forward page navigation between visited pages.
You will no longer require any plugins aside from Firebug and the browser's built-in Developer tools if AppCache is implemented correctly
I use cache.manifest (with correct content-type and expire=-1 http-header) to cache a very very simple page for offline use. (this page)
The page works correctly with chrome browser, but FF 29 doesn't display it when I am offline.
I also use this code but I couldn't find the problem.
I cannot get appcache to work on the iPad and iPhone.
At first I thought the problem was that it was called manifest.appcache so I changed it to appcache.manifest because the Safari documentation specified that it should end in .manifest
didnt work.
When logging appcache events on a mac mini while debugging safari on the ipad I see
checking
error
But when I debug safari on the mac mini i see
checking
noupdate
It works as expected on every other non ios device i have tested and on all 5 browsers on my pc.
I have confirmed that the doc type returned is text/cache-manifest
Here is what the manifest looks like from one of the pages
https://mysite.com/Mobile/appcache.manifest?page=MyPage.aspx
CACHE MANIFEST
CACHE:
MyPage.aspx
Mobile.jpg
js/vendor/jquery/jquery-1.7.1.min.js
# Resources that require the user to be online.
NETWORK:
/Mobile/appcache.manifest?page=MyPage.aspx
*
Also I do not see a request in the Safari debugger timeline profiler to the manifest file
HTML5 appcache is not working in chrome as expected?
For example
http://html5demos.com/offlineapp
when you load the above URL is will save locally,but when you refresh the page again it will not render properly.
MANIFEST file:
http://html5demos.com/html5demo.appcache
will cache the following files :-
images/shade.jpg
images/bin.jpg
/js/h5utils-offline.js
/css/html5demos.css
expect these files every other resources are not rendering when we refresh the page.
expected behavior:
All other resources(which are not in MANIFEST file) should load properly when user comes online.
but in Firefox this is working almost fine.
Why chrome is not working as expected ?
It will be great if there is some perfectly working demo.
html5 appcache is at risk and may be removed:
http://www.w3.org/TR/html5/
http://w3-video.com/Web_Technologies/HTML5/html5_attributes/html/html5_html_manifest_attribute.php
Non-cached resources will not load on a cached page. See Gotcha #5 from this article:
http://alistapart.com/article/application-cache-is-a-douchebag
Using the network wildcard:
NETWORK:
*
...would fix this.
I have run into an issue with one of my webpages that was changed to use the HTML5 appcache feature. Chrome 19 (ad I assume earlier versions) is blocking my cross site css files when the appcache is enabled on a page. The page, http://www.ericperrets.info/index.html, loads a number of image/css files from my server and a number of css files from a google url/servers. Below is the epi.appcache file content
CACHE MANIFEST
#
CACHE:
/default.css
/800px.css
/images/bg.jpg
/images/spwright.png
/images/spwright2.png
/images/meme.jpg
/favicon.ico
/Resume%20-%20Eric%20Perret.pdf
NETWORK:
/index.html
*
http://*
https://*
This works find when the page is loaded in the latest safari or firefox, but when I try to load it in Chrome, it blocks the calls to http://fonts.googleapis.com/css?family=Reenie+Beanie|Candal&v1&text=ERIC%20PT%E2%80%99SINFOAesumWorkaplntcfLidh%2C
Update: I fixed the issue by disabling one of my plug-ins that I had for Chrome: HTTPS Everywhere. This is a really useful plugin. Is there a way around this issue other than changing the URL to https?