For performance purposes, I want to have some of my web pages use resources that have been cached for offline use (images, CSS, etc.) but to not have the page itself cached as the content will be generated dynamically.
One way to do this would be to refactor my pages so that they load the dynamic content via AJAX or by looking things up in LocalStorage. Details may vary, but broadly speaking, something like that.
If it's possible, I'd prefer to find a way to simply instruct the browser to use cached resources (again, images, CSS, etc.) for the page but to not actually cache the (dynamically generated) HTML content itself.
Is there a way to do that with HTML5 offline appcache? I'm under the impression that the answer is "no" because:
Any page that includes the manifest will be cached so I can't specify the cached resources in the page itself.
There is no way to tell a previous page "use offline assets for this other page but don't actually cache the HTML on that page". You have to specify the page itself, which means the HTML will be cached.
Am I wrong about that? It seems like there is probably some tricky (or not-so-tricky) way around that. Now that I've typed it out, I wonder if including the page explicitly in the NETWORK section of the appcache manifest will do the trick.
My answer is "yes".
I have worked on a web-app where I listed all the necessary resources in the manifest, and set the NETWORK section to *.
The manifest is then included only on the main landing page. So all resources are cached the first time you visit the site and and it works a treat.
In short,
one of your pages must include the manifest and will therefore be cached.
maybe you can have the manifest loaded in a iframe and not have the whole page cached, just a thought.
list all your resources to be cached in the CACHE section
set the NETWORK section to *
I'm fairly certain that the answer to this is no.
If you use the Network section in Chrome, then it shows which resources are loaded from the cache and which are loaded from the server. I have attempted to set the appcache as described above and the resources are always loaded from the server.
Would I be correct in assuming that if the current page is not in the appcache then it wont bother to check in the appcache for any of the resources?
What I've found that is working is to list those files that you don't want cached in appcache in the NETWORK: section of the manifest. For me, that meant adding *.asp* to the network section. Now, none of the classic asp files, or aspx files are cached.
Related
I have an appcache (with NETWORK *). So now I visit my page with <html manifest="/cache.appcache">. Then the page itself is cached as all the images are. But I want the page self to not be cached. How can I do this? I thought NETWORK * would do the trick.
Regards,
Kevin
The appcache manifest always caches the master page.
If you are using Chrome check the cached files for your page here: chrome://appcache-internals
A workaround could be to put a hidden iframe somewhere on your page, which contains the appcache file to cache offline content. (take a look at "Preventing the application cache from storing masters with an iframe" here: http://labs.ft.com/2012/11/using-an-iframe-to-stop-app-cache-storing-masters/ )
A better solution could be to write your page to fetch new content from your server when it is opened - if the server cannot be reached, it can serve the last known content from the HTML5 local storage.
I have tried the iframe work around, and find it ripe with errors. Most browsers cache the data for the iframe where the page cannot get it.
Instead make the page's content load via AJAX. Basically have a blank html page with the manifest and javascript which pulls and adds its content from the server. This way only the blank html is cached, and content is always updated from the server.
Converting a page to this method can be very difficult, but it works. Making sure the appropriate javascript gets run at the correct time, probably requires some detangling. Moving around server code which won't be called when pulling from cache to the new ajax method.
Note: no need to pull conditional content from the server if the condition is in the query string, different query strings make a separate cache
Can Amazon CloudFront be used to cache HTML pages, and no just image, css files, etc?
If not, is there a comparable service out there that does this? I.E., I overlay the service on a domain, and literally it only queries that site again, when the cached page has expired.
I looked at CloudFlare as well and they don't yet do this.
Yes, you can serve HTML through Cloudfront.
The main disadvantage is when you need to update the HTML as you are unable to version HTML for SEO reasons.
So by setting a cache into cloudfront of 1 hour for example it means that the page is kept into cloudfront for maximum 1 hour, and only after cloudfront will retake the HTML from your source and update it.
You can use invalidations on cloudfront to speed up the process but you need a full list of your html pages for a fast copy and paste into aws for invalidating.
Of course all this work for fixed webpages, that do not change for user.
You can apply it even to ASP / PHP only if the generated content is fixed between all users.
So you have the PHP into your origin , and cloudfront save the HTML of it.
My English is not the best one, so i hope i clear somethink...
Yes, you can serve HTML through CloudFront as long as you don't mind every user getting the same content until the cache expires.
I can't imagine a CDN that would not support this. They might not advertise it since many web sites are dynamic and can't be cached, but if your site is basically static, then any CDN should work.
I am experimenting with HTML5 caching and i have stumbled onto a problem.
CACHE MANIFEST
/Default.aspx
/Offline.aspx
/js/jquery-1.6.4.min.js
/js/jquery.mobile-1.0rc2.min.js
/css/jquery.mobile-1.0rc2.min.css
/css/images/ajax-loader.png
/css/images/icons-18-white.png
FALLBACK:
/ Offline.aspx
NETWORK:
*
So my starting page is Default.aspx, when the device goes offline it should redirect to /Offline.aspx but it doesn't. Now all i can figure is because /Default.aspx is cached.
Now let's say i remove /Default.aspx from the manifest, It would still be cached because it's referencing the manifest in the HTML tag.
I have read dozens of pages concerning html caching but i can't find an answer.
Any advice would be great!
Thanks
Yes, this is the behavior that you should expect because if the page that references the manifest is not declared in the manifest itself (explicit), it will be considered part of the manifest implicitly as a "master" page - and from that point forward will be cached and not updated until the manifest changes.
This was not entirely clear to me either until I experienced that same behavior (in the application that I was adding offline capabilities to) and dug into the spec to better understand the observed behavior.
My solution to this was to turn the dynamic parts of that page into separate Ajax calls so that even though the page was cached (implicitly or explicitly) the parts of it that updated continued to be updated through the (non-cached) Ajax calls. However, you'll want to create fallback entries for said Ajax calls if you want them to behave nicely when offline (or handle the resulting Ajax errors if not).
I'm trying to work out if something is possible with cache-manifest.
I have a mobile web app with about 5 pages. They all require connection to work in a meaningful way.
I'd like to handle gracefully the possibility that the user is offline.
So, would it be possible to use cache-manifest to replace every page on the site with another, "offline-only" page, while the user is offline?
I was hoping this was what the FALLBACK section of cache-manifest does, but it seems not.
It does work, your fallback section should look like this:
FALLBACK:
/ offline.html
If you reference that from a page in the root then any random string you type in will result in offline.html being loaded, including pages which don't exist, whether the server is online or not.
I'm guessing that the issue you're seeing is that any page which references the manifest is always cached. So if you've referenced the manifest file from each of your five pages then all of those pages will be in the Application Cache.
One approach which might work (I've not tried it): create a new page specifically to reference the manifest file and redirect your users to it when they first visit. You could put some content on the page like 'initializing application'. Verify the Application Cache has been loaded with JavaScript, then redirect back to the page they came from.
I have a web site with an index.html homepage that is updated from time to time. We sometimes add offers for our clients, special messages and so on, which have to be visible by next day for everyone.
If index.html is cached by browsers, many users will not notice that anything has changed, unless they explicitly refresh the contents of the page...
Which is the best way to be sure that 100% visitors have an up-to-date index.html page, without compromising cache performance?
My best answer would be to skip out on updating the index.html each time and go with a server-side programming language, like PHP. You can then set the headers for the page to not cache, and you can also set up an admin page that you can use to change the content. Or you could go with a browser-side script with JavaScript using AJAX. Then the page has an ability to update before the next loading of the site.