Firefox does not load page from offline cache manifest, but works fine on Chrome (+ cache manifest troubleshooting tips)
Asked Answered
G

0

8

This is basically identical to this SO questions which has not been answered: Offline Web App not caching on Firefox but ok on Chrome

I'm experiencing the same problem and I'll provide a bit more information because it might help someone trying to figure out the arcane mysteries and traps of trying to implement cache manifest.

The problem: hit page reload/refresh and the page should reload from the offline cache, but it doesn't.

It works fine in Chrome 23: when I disconnect from the internet and refresh the page, it loads fine and the console shows Application Cache NoUpdate event.

However, Firefox 15.0.1 shows me my 404 page.

Troubleshooting (Firefox): Go to Firebug and click on DOM, then applicationCache. The status shows 0, which means uncached (the page has not been stored offline).

Troubleshooting (Firefox): Go to Firefox Options -> Advanced and look at Offline Web Content and User Data. It shows that my domain is using 1.4MB of data for offline use. (This is a good place to check for whether your page has been cached).

Troubleshooting (Firefox): Open a new tab and go to about:cache. Here you should see a heading for Offline cache device. Here you can see the Cache Directory, which is where your offline cache files are saved. If you click on List Cache Entries you'll see the files in your offline cache manifest.

There are 2 things that I find strange here: 1) is that when I click on any of the files on the list it goes to a blank page that says "Cache entry information The cache entry you selected is not available." However, the files do exist and are not blank in the Cache Directory 2) Although all of the files from the cache manifest are listed, the page that I'm calling is not listed here (in Chrome DevTools it shows up in the manifest as Master: it is cached automatically even though it's not explicitly listed in the cache manifest file).

Here's what I see when I'm online: With a cold (empty) cache, when I load the page the console shows the checking, downloading, progress, and cached events, but the cache status is uncached. Basically, the cache files are downloaded, but they cannot be accessed. Firebug DOM applicationCache says: 0 items in offline cache (this contradicts what is shown in about:cache and Options -> Advanced). The status is 1, which means idle. When I look at the Net tab in Firebug when online, it shows a GET request for the page with a 200 OK response. The Expires setting shows Wed Dec 31 1969, which I think means that the page will always be fetched. The other files show a 304 Not Modified response, which means they are being loaded from the browser cache, not the offline cache (the analogous response from Chrome for these files is 200 OK (from cache), which means they are loaded from the offline cache, not the browser cache).

When I'm offline: With the "uncached" cache the GET request fails and it loads the offline fallback 404 page with a 200 OK (BFCache) response.

It seems the offline cache is downloaded because it physically exists on disk and progress events are shown in the console, but Firefox never fires the cached event, so some of the resources have not downloaded successfully. The files are all png, js, or php format, so no crazy file formats. Chrome downloads the exact same files into the cache without a problem. I've also tried mobile Safari and it successfully reloads the page from the offline cache.

Are there any known issues with Firefox not caching certain file types? I use the .html.php extension on some of my files. I also generate the manifest dynamically using a php file, so it is only getting files that exist and it hashes them to detect changes and update the manifest.

Next Steps: I will try a bare-bones manifest to see if I can get it to work, then add files one by one to see which file triggers the error. Perhaps Firefox doesn't like the fact that I'm dynamically generating the cache manifest instead of manually updating a static file?

I've learned a lot about the arcane intricacies of cache manifest, but I'm more of a hacker than a computer expert. Has anyone else experienced this quirkiness with Firefox?

The beginning of the page:

<!DOCTYPE html> 
<html manifest="/directory/manifest.php"> 

and then the manifest.php is just

header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";

etc. etc. It uses RecursiveDirectoryIterator to get all the files in the directory (except the cache itself, which is included by default).

Gnathonic answered 29/9, 2012 at 17:37 Comment(1)
i am working in app offline at this moment, update version of manifest cache so: # version 20180316144403900, and the browser can detect this change and update all contain in manifest fileSelene

© 2022 - 2024 — McMap. All rights reserved.