Whenever there is a change in cache-manifest file i.e. a resource is changed, do I need to redeploy my web application on server or can I update the files dynamically i.e. is there any way to update the files dynamically when the server is running.
Assuming you are talking about the HTML5 cache manifest for an offline web application -- when you modify the cache-manifest file, all of the assets listed in the manifest are re-downloaded to the client browser when they access it next. There is no way to selectively update individual files in the cache. It's all or nothing unfortunately.
Also, I've found the the file containing the is automatically cached even if it's not listed in the manifest. When the manifest changes, this file is replaced, but only after it's loaded... so it effectively requires an additional refresh to see the changes. I've seen various JavaScript hacks to force a reload if the cache updates.
I wrote a fairly extensive blog post on html5 app cache and the various aspects of the manifest file at http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/
Related
I am working on a pretty basic website where I am updating csv files which I display as tables using html/bootstrap. My problem is that even though I update the csv file the html pages are not updating. Also this is really inconsistent being that some html pages will update and others will not. I am trying to figure out when S3 decides to update changes or if I can do so manually. I should mention that I am routing the domain to S3 from namecheap.com.
Thank you in advance I am still very new to AWS.
S3 updates reflect immediately when you request downloads again.
The issue is that you have not disabled your browser cache. So your browser is using the cached html instead of downloading from S3.
To disable cache during development on Chrome for example, is to press F12 then go to Network tab and check Disable cache.
Do not close the window until you are happy with caches. If you do not want to keep the window open, alternatives are to use plugins or to modify your registry which are not really suggested.
Finally if you plan to use Cloudfront in the future, whenever you make an update to S3 and you will want to invalid Cloudfront caches before they automatically expire.
I am getting ready to develop an HTML5 application. It's not a game but for sake of discussion let's call it a simple game.
Let's say I host the app/game on my web server.
User clicks to my web server, downloads the game (may take several seconds, to a minute?), sends a high score to the server, is put on a leaderboard.
Tomorrow the user comes back and wants to play again. Does the user need to download the game again?
Or, is this where the cache manifest can be used to prevent a re-download?
And, if they don't have to download the whole thing everytime, how can I force a download if I want an update to the game?
Browser Cache
If you do nothing the browser will download and cache copies of any static files your application uses the first time it encounters them. This is automatic and the files are stored in the browser cache.
The next time the file is requested by your application the browser will send a request to the server and include the date and time of the copy it already has. If the file has changed on the server a new copy will be provided. If not, the server will respond with a 304 code - Not modified and the browser will use its existing copy. In this case a request is always sent to the server, but the file is only downloaded if it's changed.
You can configure your server to add an expiry date to static files. The browser still caches the file locally as before, but on the next access the browser checks the expiry date sent with the copy it already has. If that date hasn't passed no request is sent to the server. Now, you've saved the round-trip time of every request that refers to a cached file.
A manifest
A manifest works differently. When the initial file is downloaded the cache maifest is read and every file listed in it (apart from some specific exceptions dependent on the content of the manifest) is downloaded and store in the application store. Often, this requires the user to give permission for it to happen.
On subsequent access the manifest file is requested from the server. If the manifest hasn't changed nothing more is done and the application is loaded and run from files stored in the application store.
if the manifest has changed in any way then the new manifest is used to download and update the existing application store files.
Pros and cons
Browser cache
For
Automatic & transparent
Largely maintenance free
Many files need not be downloaded or checked
Against
Distribution of new files may be delayed
Application must run online
Manifest
For
Application can run offline
Manifest gives good control over update distribution
Against
User permission often required to use the application store
Additional maintenance is required to update the manifest appropriately.
I have a site which uses HTML5 App Cache and I'm having trouble determining why the cache update started. I haven't made changes or added/removed files.
The manifest file is generated dynamically and includes all files from the app's folder, except a few which should not be cached. I would like to check the cached manifest file to see what is the difference between it and the current version.
How do the browsers store the manifest file so they are able determine when it has changed and when should the cache update kick in ?
Can this file be found somewhere on the hard drive in the browser's cache folder ?
Yes they have to. How it should work otherwise? Stored in RAM it would be lost after reboot and stored only in web could not lead to an offline app.
But where they store them and if they are encrypted is another question. In Firefox: C:\Users\brach\AppData\Local\Mozilla\Firefox\Profiles\xxxxx.default\OfflineCache\0\9\77546B5B27E111-0
The content of that file is
CACHE MANIFEST
CACHE:
style.css
script.js
index.htm
So that's a manifest how we know it. But for other browsers you have to explore it by yourself... ;)
In Firefox you can easily find it out entering about:cache as URL and look in Offline cache device section.
In chrome you can enter chrome://appcache-internals as URL and let you show the content of any cached file including the manifest directly in the browser.
I have an HTML document with an associated appcache manifest. But now I want to get rid of offline application caching for a while.
If I remove mention of the manifest from the <html> tag, browsers that already have a cached version will continue to use that cached version.
If I update the appcache manifest, well, whatever, there is still an appcache.
What is the most sensible way to go about removing offline application caching? I suppose that I could just change the manifest to have no entries other than:
NETWORK:
*
Then it won't actually cache anything.
But surely there must be a way to get rid of the appcache and the manifest file altogether, no?
You simply need to remove the appcache manifest from your server. If the browser can't access the manifest file, it will stop caching your app and remove all cached data.
Some useful information from two sites:
If the manifest file itself can't be retrieved, the cache will ignored
and all cached data associated with it will be disregarded.
http://appcache.offline.technology/
Application caches can also become obsolete. If the manifest is
removed from the server, the browser removes all application caches
that use that manifest, then sends an "obsoleted" event to the
application cache object. Then the application cache's status is set
to OBSOLETE.
https://developer.mozilla.org/en/Offline_resources_in_Firefox
FOR anyone coming across this question and who've deleted the appcache manifest, deleted the browser's cache and removed the manifest from the server and the reference to it in the HTML: If this still did not cause your HTML document to load the update version in Google Chrome, you can go to chrome://appcache-internals/ in your browser and click REMOVE next to the manifest you wish to get rid of.
Manually delete app cache: Only for Chrome
Enter the follow URL in your chrome browser: chrome://appcache-internals/
There you will see a list of every application cache you have in storage with the possibility to remove any of them.
Reference
In modern Firefox you can manipulate the offline cache with Edit Preferences Advanced Network.
In windows it is now (v27.01) Tools Options Advanced Network
I'm working on a web application that caches html pages and saves it on the user's computer. I want to create a link, so that the user can click on the link and access the cached webpage.
Following is my link to a cached page:
BBC
When I click on the link, nothing happens. I'm not even getting any error.
Can someone please suggest how to create a link to a cached html page?
First of all, not all browsers handle local files equally, indeed, not all computers will be running windows or have a C: drive. Secondly, you don't have much control over a user's cache. Cached pages are usually handled by the browser automatically. You can use headers to specify how a browser ought to cache files, but it's not even required to do so. You can read the W3C recs on caching for more information.
It's unclear what you're trying to do here, but it sounds like it might make more sense for you to use HTML5 local storage or offline files than trying to mess around with their file system directly. The security model of most browsers is such that web apps don't interact with local files, which may be why it's not working for you with your current setup. Dive Into HTML5 has a good overview of HTML5 local storage and offline pages.
Edited based on comment below:
Most browsers' security settings won't let a page on a website access files stored locally. Only locally saved files can link to other locally saved files. Therefore, if the page with a link is on a website, your link won't work. Try creating a link to your file from another locally stored file and see if that works.
Instead of providing the .html extension in the main page where you provide the link you should do something as below:
< href="file:///C:/Users/xxx/yyy/bbc">BBC</a>