What is caching & what is a cache manifest?
Please visit http://www.webreference.com/authoring/languages/html/HTML5-Application-C... to understand what Offline Applications are & what a cache manifest can be used for.
A.Events & More:
- When a browser sees a manifest attribute on tag it fires => checking event (on the window.applicationcache obj)
- If the browser has never seen this cache manifest before :
Fires => downloading event and starts to download all the resources in the manifest file
- After everything is downloaded. Fire=>updated event
- If it HAS seen the cache manifest before, It might already have some resources of the manifest in the cache.
So now it must check if the cache manifest has changed, since the last time it was checked.
if NO , fire => noupdate
if YES, fire=> downloading. And download every single resource listed in the cache manifest.
(You can face a couple of problems here that you might not have thought of! Refer to Problems and details)
- After everything is downloaded, fire=> updateready. Means : fully cached, and ready to be used offline.
The new version is not yet in use. To hotswap teh new version without reloading the page. call the window.applicationCache.swapCache()
B. Problems & Solutions :
I. In step 4. How does the browser check if the cache manifest file has changed?
- The browser of-course has its own cached copy of the Manifest file (like all other files it stores in it’s cache)
- So it first checks if its copy of the manifest file has expired. These copies usually expire in an hour or 2.
- If it hasn’t, it continues to use its own! What does this mean?!!
If you forgot to add image “mypic.jpg” in the manifest and did it 10 minutes later, the browser won’t even bother to ask the server for a new manifest coz its cached copy hasn’t expired yet.
To get around this you want to say:
Cache everything in the manifest file! but please don’t cache the manifest file coz i might change it!
If you’re running an Apache-based web server, these two lines in your .htaccess file will do the trick:
ExpiresActive On ExpiresDefault "access"
That will actually disable caching for every file in that directory and all subdirectories. That’s probably not what you want in production, so you should either qualify this with a directive so it only affects your cache manifest file, or create a subdirectory that contains nothing but this .htaccess file and your cache manifest file.
II. If you make changes to one of the files mentioned in the manifest file but don’t change the location,(for eg, say u increased the size of the mypic.jpg but of-course dint want to change the path or the name of the file) the browser will never know that the file changed (coz it looks at the 2 manifests and nothing seems to have changed!)
Maintain a revision number in the cache manifest file.
So if you make any changes in a file (which is mentioned in the cache manifest) change the revision number in the manifest.
#rev 1 to #rev2
Iphone cache: does not get cleared always on saying "clear cache" .Restart your phone or kill all safari instances.
Generate the manifest on the fly depending on what widgets the user has.
Iphone Native Web Apps & Caching
A. Introduction and Setup
To get a basic offline iphone native webapp to work is simple. All it takes is the manifest file to specify which files to cache, declare it in on the tag using the manifest attribute and you have yourself a site still accessible even if the user has no network connection. (everything you do for a cache manifest basically..)
So basically you can do this :
• setup the entire cache manifest structure.
• Visit the link through your safari browser.
• Add the link to your home screen. Like you do for an app.
• Close the link & Exit the safari browser.
• Go into airplane mode (everything off).
• Access the app through your home screen in offline mode, like any other home screen app.
• It should work perfectly well.
• You should make provisions to hide the URLbar at the top and the nav bar below so it looks like a native app.
o Additionally you could have a hierarchy of pages on Index.html (your app page)
o which link to
• (and you may have never visited these links before, when you were online, but they are a part of your manifest..) and all of them should work fine in the cached mode.
• When you go online again and open the app
• It should check for changes in the manifest and if there are any, it will download the new file.
• The page will have to be refreshed again! Or the app will have to be closed & reopened (since even though it downloaded the new cache, the page had already loaded with the old one..)
- The page that calls the manifest file doesn’t need to be in the manifest file, it will be cached automatically.
- One may encounter several problems if the MIME headers are not informed of the manifest correctly. It can be tricky and will take a while to get right..(the .htaccess file stuff)
A Tool to make sure manifest file is being fed through with the correct mime type : Web Sniffer. Helps check if the Content-Type is set as text/cache-manifest.
- There are several events happening in the cache (mentioned in the last doc: caching, downloading, updateready, etc..)
We can attach several event listeners to tell the web app what to do on a particular status of the appcache.
Say for eg,
- when you are connected! and the new cache is ready to be updated, swap the old cache with the new (code below..)
- You could also use these event listeners for show a “loading spinner” when the appcache is “downloading new info” to inform the user that new content is being downloaded..
- In such a case, u could even add an event on to ask the user if he would like the updated version or not
- var webappCache = window.applicationCache;
- function updateCache()
- webappCache.addEventListener("updateready", updateCache, false);
- Cache size limit seems to be at-most 5 MB
- ApplicationCache doesn’t work with UIWebview (but they have some different technique)
- Swapcache method is used to change the stale cache with the updated cache( as shown in the code above). If it’s absent, browser will never update the cache, even though there is a change.
Browser will download the new cache but still uses the old cache (wow.. I didn’t know that..)
- Dashcode 3.0 ( comes with Snowleopard with XCode ) has an option to “make your webapps available offline” does all the caching work for you..
- To delete an app!! The best way would be to delete the cache, and then delete the icon from the screen.
- Since clearing the cache is an all or nothing process, (ALL the applications then get removed from the cache..this doesn’t seem nice at all!) Even if there is a finer control, it will be at the app level and not at the individual cached resource level.
So even if the appcache return a “404/410 error code” the obsolete event is fired and the browser will delete the cache
- On mobile safari , if you are trying to play a cached .mov file, the native app for video opens and tries to look for the file in the original URL and not cached safari. (Assuming the plugin doesn’t understand caches)
- Audio/Video/doc(all office docs) n (pdf..maybe) files wont cache (as they are loaded in external apps.. like videos in media player..)
- To prevent certain links from jumping out of the screen apply preventDefaults () ( need to find out more…)
- If you’ve added your webapp to the home screen, user opens the app. Navigates to an internal page, and receives a call ,i.e an interruption. On awakening again something weird happens.. I think jumps to a new browser page..need to check this…