HTML5 AppCache with dynamic pages

Question

I have a php file called pages.php that returns a page specified by a query parameter. The user selects a number from a dropdown and then an ajax request is sent to pages.php with that number like:

pages.php?page=1

The number of pages is dynamic. I am using HTML5's AppCache to cache the index page, but how do I get the browser to cache the the ajax requests. Adding pages.php to the manifest file just caches the response that has no page. But it does cache any requests with a page number. I want to do something like this in the manifest file:

CACHE:
pages.php?page=*

I am trying to get it so that the user can access pages they have viewed previously if they go offline. AppCache doesn't seem suited to making websites offline capable (only making static resources load quicker), is there some other feature I should be using?

Answer 1

I had a hell of a time figuring out how to cache dynamic pages accessed by a URI scheme like this:

domain.com/admin/page/1
domain.com/admin/page/2
domain.com/admin/page/3

Now the problem is that the appcache won't cache each individual admin/page/... unless you visit it.

What I did was use the offline page to represent these pages that you may want to allow a user to access offline.

The JS in the offline page looks up the URI and scrapes it to find out which page it should show and fetches the data from localStorage which was populated with all the page data when the user visited the admin dashboard before being presented with the links to each individual page.

I'm open to other solutions but this is all I could figure out to bring a bunch of separate pages offline with only visiting the single admin page.

Answer 2

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

The process is

1. 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.
2. 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 [];
}