CODEWITHSUNDEEP
htmlcachinghtml5-appcache
webmobileDev
webmobileDev

Reputation: 121

Appcache for dynamic site

I am trying to use HTML5 Appcache to speed up my web-mobile app by caching images and css/JS files. The app is based on dynamic web pages.

As already known – when using Appcache the calling html page is always cached -> bad for dynamic websites.

My solution - Create a first static page and in this page call the manifest file (manifest="cache.appcache") and load all my cached content. Then when the user is redirected to another dynamic page the resources will already be available. (Of course this second dynamic page will not have the manifest tag). The problem is that if the second page is refreshed by the user, the resources are not loaded from the cache; they are loaded directly from the server!

This solution is very similar to using an Iframe on the first dynamic file. I found that the Iframe solution have the exact same problem.

Is there any solution for that? Can Appcache really be used with dynamic content? Thanks

Upvotes: 4

Views: 1323

Answers (2)

Jay Byford-Rew
Jay Byford-Rew

Reputation: 6014

Yes appcache can be used for dynamic content if you handle you url parameters differently.

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

Upvotes: 1

mattdlockyer
mattdlockyer

Reputation: 7314

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.

Upvotes: 0

Related Questions