HTML5 Offline Appcache Updates Not Showing In Firefox

StackOverflow https://stackoverflow.com/questions/7314671

Question

I have an index.php file in my docroot. It produces output that starts with this:

<!DOCTYPE html> 
<html manifest="manifest.appcache">

The manifest.appcache tells browsers to cache it for offline use. Again, the relevant parts:

CACHE MANIFEST

#version 8-25-2011

CACHE:

#internal HTML documents
#this tells the browser to cache the HTML it retrieves from http://example.com/
/

NETWORK:
*

Offline access is working fine with this setup, but updating is not working as I would expect in Firefox.

In Chrome and Safari, when I update the index.php file and then change a comment in the cache.manifest file, the browsers will grab the new index.php output and use that in the cache.

However, in Firefox, it seems to not care that I've updated the manifest.appcache file. I suspect that if I wait long enough, it will update, but I've tried waiting hours.

How can I find and eliminate my caching problem?

Was it helpful?

Solution

What HTTP cache headers are you sending with your index.php file? If you've not set things like the Cache-control: and Expires: headers then Firefox could be refreshing the application cache version of the page from it's regular cache instead of requesting it again from the server.

EDIT BY POSTER OF THE QUESTION:

For anyone that wants to know what exactly it took, here's what I put in my .htaccess file based on this answer and a perusal of http://www.diveintohtml5.info/offline.html:

<Files *.appcache>
    ExpiresActive On
    ExpiresDefault "access"
</Files>

Hope that helps the next person!

OTHER TIPS

I know I'm really late to the party but I've been seeing this issue in Firefox for years and was hoping that the underlying bug would be fixed.

Unfortunately that hasn't happened but I've finally come up with a workaround. In my case, whilst the new .appcache file is loaded and processed, a page reload does not cause the newly cached versions to be used. The process I'm using goes as follows:

  1. index.html is loaded and specifies the .appcache file in the html tag.
  2. The .appcache file is generated dynamically using a PHP script. The script hashes all included files to create a unique version hash, which is included in the manifest. This means a change in any files listed in the manifest forces a cache reload.

  3. My .htaccess file has the following to prevent the .appcache manifest from being cached:

    <Files *.appcache> ExpiresActive On ExpiresDefault "access plus 0 seconds" </Files>

  4. My Javascript code detects the appcache update and reloads the page once the updated files have been fetched:

    appCache.addEventListener('updateready', function(e) { console.log("Appcache update finished, reloading..."); setLoadingBar(100, "Loading..."); appCache.swapCache(); location.reload(); });

  5. Once the page reloads, the old cache is still used in Firefox until the cache is manually cleared by the user. In all other browsers I've tested, the newly cached files take immediate affect.

The fix turned out to be painfully simple!

All that was needed was to change the location.reload() line to include the true parameter:

location.reload(true)

This seems to indicate that Firefox serves the files from it's normal cache rather than using the appcache stored files, even when the appcache'd files are newer. I'm guessing this is because Firefox puts the normal caching mechanism in front of appcache like so:

Request -> Normal cache -> Appcache -> Network request

But that's just a guess.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top