Geek Answers Handbook

Appcache for a dynamic site

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

As you already know, when using Appcache, the calling html page is always cached → bad for dynamic websites.

My decision. Create the first static page and on 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, resources will already be available. (Of course, this second dynamic page will not have a manifest tag). The problem is that if the second page is updated by the user, resources are not loaded from the cache; they are downloaded directly from the server!

This solution is very similar to using an iframe in the first dynamic file. I found that the Iframe solution has the same problem.

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

+4
source share
2 answers

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

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

Process

  • Internally from the page, when you were usually anchored or redirected, call the redirect function for you instead. This function stores parameters from url to localstorage, and then redirects only the URL without parameters.
  • On the landing page. Get parameters from localstorage.

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

Landing 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 []; }
+1
source

I had time to figure out how to cache dynamic pages accessed by a URI scheme as follows:

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

Now the problem is that appcache will not cache every single admin / page / ... unless you visit it.

What I have done is to use an offline page to represent these pages, which you can allow the user to access offline.

JS on the page offline looks at the URI and resets it to find out which page it should show and retrieves data from localStorage that was filled with all the page data when the user visited the admin control panel before submitting its links to each individual page.

I am open to other solutions, but that’s all I could understand to bring a bunch of individual pages offline, only by visiting a single admin page.

0
source

More articles:


All Articles