Cache manifest file question

shaunthomson · 11-18-2012, 10:36 PM

Gidday guys

Am having a little trouble with a cache manifest file - maybe I'm misunderstanding what they do. Can anyone point out an obvious error to me?

Here's my set up -

My c.mf file has the following in it:

Code:

CACHE MANIFEST
2012-11-19:v2

CACHE:
js/com.js

NETWORK:

My php/html file has this in the html tag:

Code:

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"manifest="http://www.mysite.com/c.mf">

What I'm trying to achieve:have the js file cached, but refreshed when I change the code in it. This is ensure any new js I add is updated when a user has an 'Add to home screen' bookmark of my site on their phone.

How I'm trying to do it: changing the js, uploading it, then replacing the date or V number in the c.mf file with a new one eg 2012-11-19:v3

My test: The js code has a function that shows an image when a button is clicked ie img01.jpg. It works fine - the image appears when I click the button.

I then change the js file to show a different image when the button is clicked ie img02.jpg - I upload the new js, change the v number in the manifest file and upload it, and ensure the new image is on the server.

I open my site with the home screen book marked icon. On testing, the old image appears when the button is clicked (not what I want). However, if I open my site in the phone's browser (as opposed to using the home screen icon), clicking the button shows the new image.

Also, strangely, if I home screen bookmark the new working version of my site (that shows the new image), and then click the bookmark to test running the site from the bookmark, the old image is shown on the button click.

So my js and image are fine. It's the caching where I'm coming unstuck.

Anything wrong with what I'm doing here?

Thanks for your time and help.

rnd me · 11-19-2012, 09:12 AM

any syntax errors in a manifest file hoses your app.
you cannot have any urls listed with a 404, or your app will be hosed.

you may have to use chrome://appcache-internals/ or run a small firebug script in about:config on firefox to fix the damage. if this has gotten out into the wild, you'll basically have to change the url. this is why it's good to test with baked-in query params so you can change file urls if need be.

so "js/com.js" could be something like "js/com.js?123"

i didn't validate your markup, but i can tell at a glance that that date is not supposed to be hanging out up there own it's own.
also, make sure the content-type header on your manifest url says "text/cache-manifest" or better yet, "text/cache-manifest; charset=utf-8"...

a proper manifest setup will update the page's resources on the following page reload() IF, and only IF

no 404s or syntax errors in the manifest or it's pointed-at urls
the manifest file, with comments and whitespace removed, has changed
one or more urls listed in the manifest has changed paths
a listed url, after fetching by the browser, does not match the stored local copy
the page is open long enough for onload() to fire

if those conditions are met, you should see your file changes the second time you visit the page after uploading the changes.

one trick i use that has cut down on the pain of changing two files for every update is to have a small server script grab the file dates of any pointed-at resources, concat those dates together, replace non-wordy chars, and use that as a query string on a 0-byte file, /blank.txt.

this ends up looking something like:

Code:

/blank.txt?ThuNov15225439MST2012MonApr4001728MST2011SatAug4061910MST2012SunAug5070049MST2012SunApr3235740MST2011SunOct7120832MST2012

under this system, altering any linked resource will alter the date of the file, and thus the url of blank.txt, triggering an appcache update() event and refreshing all resources.

two last bit's of advice;
it's under-documented that changing commented text ina manifest works in chrome but not firefox.

use http://manifest-validator.com/ to check your manifest beofer publically linking to the page.

shaunthomson · 11-21-2012, 05:55 AM

Thanks rnd me

Upon testing, I have found that regular browser caching seems to be ok. It seems too many potential problems for me to use the manifest.

The main problem seems to be round trip time on mobile networks. A php that contains the word 'test' sometimes takes three seconds (I am in Aussie, the server is in the US). So I think I will look at CDN.

Thanks for your thorough explanation - it forced me to squeeze every optimization out of my code so that I could NOT use the manifest file.