How can I use HTML5's application cache (appcache) to cache dynamic pages?

Question

I have dynamic pages that I would like to make available offline. I'd like to use HTML5's application cache to do this. The problem is that I don't know all of the resources (JavaScript and CSS) for the page upfront as these parts are dynamic.

I have a manifest.appcache file that looks like this:

CACHE MANIFEST
#1330475607
CACHE:
/

But this seems to only cache the page's HTML and not the rest of the page's resources. Is there a way to do something like this?

If not, might it be possible to programmatically set the cache with JavaScript (I suppose I could loop through link and script tags)?

If you are okay to use PHP, this could be done.

markasoftware
– markasoftware

2013-04-19 03:49:36 +00:00
Commented Apr 19, 2013 at 3:49 — markasoftware
– markasoftware, Commented Apr 19, 2013 at 3:49

Tejesh Alimilli · Accepted Answer · 2012-03-11 14:10:14Z

2

In cache manifest file cache section, every resource file has to be mentioned individually.

So you should generate your cache manifest file dynamically along with the page. This way every time page changes its manifest file is also updated.

The resources in manifest file are downloaded along with the page. Most of the times page's javascript is executed after these downloads complete. So there is no way we can set cache manifest with javascript.

answered Mar 11, 2012 at 14:10

Tejesh Alimilli

1,8001 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

florent · Accepted Answer · 2012-03-05 15:32:01Z

0

As far as I know, you can't use a wildcard under the cache section (althoug it works under the failback section) You also can't loop in javascript, since the manifest is loaded before the javascript file.

Is it possible to use a server side script that pack all the js/css in one file ?

answered Mar 5, 2012 at 15:32

florent

11

Comments

Jay Byford-Rew · Accepted Answer · 2015-09-23 10:07:37Z

If you go old school (not restful) and use url parameters you can do this like so.

I solved this by using local storage (I used the jquery localstorage plugin to help with this).

The process is

Internally from the page when you would normally href from an anchor or redirect, instead call a function to redirects for you. This function stores the parameters from the url to localstorage, and then only redirects to the url without the parameters.
On the receiving target page. Get the parameters from localstorage.

Redirect code

function redirectTo(url) {
    if (url.indexOf('?') === -1) {
        document.location = url;
    } else {
        var params = url.split('?')[1];
        $.localStorage.set("pageparams", params);
        document.location = url.split('?')[0];
    };
}

Target page code

var myParams = GetPageParamsAsJson();
var page = myParams.page;

function GetPageParamsAsJson() {
    return convertUrlParamsToJson($.localStorage.get('pageparams'));
}

function convertUrlParamsToJson(params) {
    if (params) {
        var json = '{"' + decodeURI(params).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}';
        return JSON.parse(json);
    }
    return [];
}

Collectives™ on Stack Overflow

How can I use HTML5's application cache (appcache) to cache dynamic pages?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related