Using Cache-Manifest correctly

4.5k views Asked by At

I face the following problem: Even if I have my cache manifest, I cannot use my website correctly.

I am working with Visio 2012, asp.net MVC.

Here is what I have done so far:

I created my Manifest.manifest file, it contains the following lines of code:

CACHE MANIFEST

../Content/images/icons-18-white.png
../LegalEntity/IndexLegalEntity.cshtml
../Home/Index.cshtml 

On every View I added the

<!DOCTYPE html>
<html manifest="~/Manifest/Manifest.manifest">

Now I access my browser (Firefox) and get asked if I allow my browser to store data for offline usage. I agree. Now I shut down the IIS Express, so the website is no longer accessible.

When I refresh my page, Firefox tells me, that localhost is not available, as expected. I now turn it into offline-mode. Now I can access the Index-page, but none of the other views I listed in the manifest.

All visited pages are available in offline mode, but if I understood the concept correctly, every element of the manifest should be loaded into the offline cache, as soon as I access that first page.

Some further information:

I emptied my browser cache (multiple-times). I refreshed my .manifest file. I deleted the offline-cache inside the Mozilla/Firefox/... Folder.

Did I place the manifest file at the wrong location? As you may have seen it lies within a "Manifest" -Folder.

Location of the .manifest

Thank you for your help!

1

There are 1 answers

5
Tallmaris On BEST ANSWER

Sadly, the Cache does not work like a "Full Website Downloader" but only instructs the browser to cache the pages after the first visit:

From http://www.w3schools.com/html/html5_app_cache.asp[update below], important bit in bold:

The manifest file has three sections:

CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time

NETWORK - Files listed under this header require a connection to the server, and will never be cached

FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

So yes, you need to browse all the pages at least once to be able to cache them... That is why this is probably a technique better suited for Single Page Applications to support offline usage rather that full website offline availability.

UPDATE

Please note that the documentation on the W3C website continues on with a quite confusing example:

The first line, CACHE MANIFEST, is required:

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of the web site. Then, whenever the user is not connected to the internet, the resources will still be available.

The part in bold is not entirely true. The browser will download the file only if they are requested in the page you are visiting (I assume also if they are loaded using ajax for example) and keep them cached.

UPDATE

App caches are being deprecated (from the Living Standard: https://html.spec.whatwg.org/multipage/browsers.html#offline) in favour of Service Workers for offline caching of resources. That's probably why the link above is not working anymore.

More info can be found on Mozilla developer network page: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache