Removing HTML5 Offline AppCache - html

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

Related

How do I refresh data on my website on AWS S3?

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.

Control appcache download

I've developed an iPad web app that uses the appcache. It's not intended to be a fully offline app but I use the appcache to store large image files so that they're not sent over 3G. Problem is when the manifest is updated the appcache updates whether the iPad is on wifi or 3G, which could be expensive.
Is it possible to have the user decide if the appcache can be updated or not? From what I've seen, this isn't possible, it all happens automatically, you just get events. But perhaps there's some trickery like writing the manifest on the fly or similar.
Using PHP on the server side if that helps. Thanks.
Connection Type: Theory & Future
There is a draft spec of Network Information API on W3C that provides the information of the connection type (ethernet wifi 2g 3g 4g etc.), but it hasn't been implemented on any browser yet apart from:
the stock Android browser on Android 2.2+ (not the Google Chrome browser)
navigator.connection.type // Based on W3C draft, (Implemented on stock Android browser)
and PhoneGap which is not exactly a browser
navigator.network.connection.type // on PhoneGap
Having that information in the future you could detect if the user has cellular data, then temporarily remove the src of the images and ask the user through a confirmation dialog.
You will also probably have to cancel the app cache update using:
window.applicationCache.abort() (documentation)
Reality
Unfortunately, the Net Info API is not available (at least not widespread) at the moment, but certainly will help in the future.
Long shot
There is a database that includes network speed (DIAL = dial up, DSL = broadband/cable, COMP = company/T1), but I haven't used it and I doubt it will help.
Dynamic App Cache
While checking into this, I tried to generate the html tag along with the manifest declaration on the fly, in order to combine it with the Network Info API but the AppCache manifest is loaded before javascript execution and is not affected afterwards.
So altering the manifest file on the fly through Javascript is not possible and data URI is not an option.
Alternative solution
HTML5 application cache is an untamed beast at the moment and there are talks to improve it. Until it changes to support more complex configurations (bandwidth level flag would be awesome), you could change perspective on the solution, although App Cache may be the best you have at the moment.
Depending on how big your images are you could rely on the normal browser cache. You could combine localStorage and far-future expiration HTTP headers. LocalStorage in order to keep track of the loaded/cached images.
First add a far in the future date for expiration on your images HTTP headers
On page load, remove all src from imgs
Loop the images and check localStorage if each image was loaded in the past
If there are images that were not loaded in the past, display a dialog confirming for the downloading of those images
If the image was loaded in the past, then put back the src on the img
For every image that is downloaded, save its URL on localStorage
I don't know what the status of indexedDB is on the iPad, but this could be an alternative solution.
In short: Indexeddb is a clientside database. Data is stored in object stores which are key/value pairs. The maximum storage capacity is in theory the maximum of your disk space. For more information about indexeddb:
Specification
My blog
What you could do with the indexeddb:
When someone navigates to a page:
Check every image tag if it is present in the indexeddb
if present
Get the image from the indexeddb and put it in the image tag
if not present
Download it
store it in the indexeddb
put the image in the image tag.
As extra (in the future) you can do as discribed by Sev: check the connetion type and only download the image when working on a fast internet connection.
I have 'invented' a working solution developing a webapp on the iPad (iOS 6.0.x) that may answer your question.
The idea is first to check if a localstorage variable is set/defined or not yet (I use the title of the page, thus the webapp name.)
If this localstorage variable exists, then assume (in webapp sandbox context) that its the first time the app is being run. At this point I populate a UUID in conjunction with $PHP_SESSION($uuid) to avoid 'cross app contamination' in server-side PHP land.
In addition to this I have a dynamic manifest.appcache.php which includes in the CACHE section a list of files to add to the manifest. Thus;
<?
echo $manifest_file_list[0]."\n";
?>
Using the JS appcache manifest event listeners I then monitor the progress to something like $('#manifestappcache').html(result);

Change in cache-manifest file

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/

HTML5 Application Cache manifest file location on hard drive

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.

How does the chrome cache work with auto updating extensions?

We are developing a chrome extension that has auto-updating capability.
When the extension is updated automatically, does it force a refresh on the cache for the files in that extension. I.e. what does a user have to do to actually see the changes in the new extension. Is it required that they do a hard refresh to guarantee that they see the latest version of the extension?
Never had any problems with updating, I would say it clears the cache.
Never seen any extension asking you to refresh something or re-enable itself either.