I am working on an offline web app using a cache manifest file. I am having trouble refreshing my javascript files. If I change a .js file (which is listed in the manifest file) and I then change the manifest file version no. and save it, then the changed .js file does not get reloaded on the client. What do I have to do to get .js files to refresh?
Thanks
That's because the webserver tells the browser cache static files for a few hours. So the browser doesn't know the manifest file is changed. You can clear all the application data 'or' config the web server the manifest is not cacheable...
Read http://diveintohtml5.info/offline.html for more info
If you want to clear your app cache on chrome use chrome://appcache-internals/
and by hand you have to search in C:\Documents and Settings\YOURUSERNAME\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
I had assumed that you if you use a cache manifest and then refresh the manifest, that the browser would request all of the files again. However, I have found that I needed to explicitly set headers in all of the files in the manifest to tell the browser not to cache the files. I believe that once the manifest tells the browser to request the file again, the browser treats it like any other non-manifest cached file. Maybe this is an error with Chrome, but I feel like I saw this in another WebKit browser.
Regardless, set the headers for the files in the manifest to never be cached and they should reload when you update the manifest. If these files are used outside of a manifest page, you may need to actually cache the files depending on your needs.
Type chrome://appcache-internals in your address bar then click ENTER
A list of cached manifests will appear then just delete the one you want and everything will be refreshed when you load your page again.
Hope this helps :)
I had the same problem until I came across this priceless warning on the
Mozilla Developer site
Important: Do not specify the manifest itself in the cache manifest
file, otherwise it will be nearly impossible to inform the browser a
new manifest is available.
woops. my bad.
However, every time I change something in the code, I need to change something in the manifest, and then reload twice, which is an unrelated issue.
In my case, i has to disable the traditional browser cache using meta tags. See this SO question how to that
Related
I've implemented this script on my Squarespace website using the wexley template to make images in a gallery act as links (Wexley does not support clickthrough URLs natively).
It works fine, but if I add any thumbnails to the gallery it will not work until the browser cache is cleared.
I am wondering if there is a way to fix this? Perhaps through:
1) setting an expiry on the cache? I am not in developer mode so this would have to go into a header injection
2) Versioning? I tried hosting the javascript as a file elsewhere on my site. This worked (it pulled the script from another location) but still get the same issue, even when I upload a new script file and point to that after updating the page!
You can force the client to download the field again. To accomplish this you need to make the clients browser to think it doesnt have the script in cache. You can do this changing the file name.
Imagine you have this folder structure:
index.html
index.js
If in your index.html you reference the script like src="index.js" you may force clients to download just apendding a query string to the import: src="index.js?0"
Now clients browsers will check if this file is in cache, and since it isnt, they will fetch from the server.
Checking the resource loading on my page I realized that the script was not being cached so it was something else getting cached that was interfering.
Because I am not in dev mode, I implemented a fix that relies on appending the URL with the date of the update, and then setting up 301 redirects.
The URL and redirects (2 total) would have to be updated when any content is added.
If anyone sees issues with this (relating to SEO or some unknown), I would appreciate your feedback.
everyone!
I'm using UwAmp 3.1.0 for my php development but I had some troubles
with it.
It worked perfectly at the beginning and the server still works
perfectly now but whenever I made a change to a .js file or .php
file it doesn't reflect that change when I update the page in the
browser.
I went to the chrome dev tools and opened the source section to see if the file is exactly what I wanted but it shows the original version which I've amended a while ago. The links to all files are correct and they are in a subdirectory in www folder.
It's so frustrating as I can't see the changes in action. I checked
the syntax and everything is ok but it doesn't want to stop an
animation in jquery after I it was fully shown to the user.
Can you help me with this situation as I have no idea what's causing the problem here?
It should update the file instantly when I click refresh in the
browser but it doesn't and keeps loading the version of the files
that I started to work with.
Uwamp is AMP stack (Apache, MySql and PHP) and "out-of-the-box" it doesn't have anything with caching of files.
Apache is normally reading/getting files from Uwmap www folder "as is" so basically if your last change is saved into file in www folder (please check directly with tools like notepad) Apache will read it instantly.
This is related to your Browser Cache (Empty yours Browser/Chrome cache manually or install Chrome extension like [Clear Cache Extension]:https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en) and try to clear cache but completely ("from begining of time" like Chrome said).
Also a workaround is to click that Empty Cache icon every save before refreshing the page beacuse it will clear it almost instantly (depending on how long time ago have you cleared your cache)
Also try to set OPCache in Php.ini (settings file) in Uwmap to Disabled (locate opcache settings in php.ini and put 0 to disable - you can access it from Uwamp GUI also).
Here is my manifest.appcache file.
CACHE MANIFEST
app.js
theme.css
logo.png
How can I force browser renew the app.js file only?
Application cache works slightly different to what you may think.
When a new version of the manifest becomes available, the browser goes through all the files and determines which have changed on the server.
The browser does this by sending the "If-Modified-Since" header with the request.
If the file hasn't been modified, the server will return code 304 (not modified) and the browser will skip the download and move to the next file.
Only files that have been modified get refreshed.
It's also a good idea to include a version or hash in the manifest, so a new manifest is always downloaded and checked.
In example, I use a php script to dynamically generate my appcache.manifest.
The script md5's all the included files to produce a hash/version number that's included in the manifest.
I had a same or similar situation to this.
I needed the browser to refresh the cache of file index.html.
And I could only see it refreshed when in incognito mode, which was not helping me much...
except for understanding why I wasn't seeing my file's update...
Anyway, what helped me was like the following:
Make backup of specific file that needs refreshing
Delete file in project
Run web application (without the file)
Return file to project, and then run application
For me, this worked.
I hope it will help others as well.
We use Appcache of our SubToMe button.
The benefit of loading the code once from the server and then keeping everything in the user browser is exactly what we want and it works grear. By loading in Chrome, you'll see in the dev console that all files are loaded the first time, and if you refresh that no other file is ever loaded.
However, the button is meant to be loaded form other sites like on a blog. The html button has a onclick listener which will just add a script element with an src point to https://www.subtome.com/load.js. For some reason, this file is not loaded via Appcache, even though it is in the manifest and if you get it directly (by putting its url in the browser bar), then it is fetched from AppCache.
Anyone knows how we can force the browsers to use the Appcache version when loaded from a 3rd party site? Or is that not possible with Appcache.
"Over SSL, all resources in the manifest must respect the same-origin policy."
See http://appcachefacts.info
I version all of my client side JS files like "/js/myfile.js?v=3903948" so that my clients don't need to clear their browser cache to ensure they get the updated files. But every time I push an update, without fail, at least one person runs into a problem where they are running the old version and get some kind of error. I used to think that this was just them having already been on the page during the release and just needing to reload the browser, but this happened to me today when I was definitely not previously on the page. I browsed to the live site and was running the old code. I needed to do a browser refresh on that page to get the new file.
What can cause this?
PS I was using Chrome on Win7, but I have seen clients report this before on all different browsers.
If your main web page can also be cached, then the old version of that page can be requesting the old version of the JS file. JS file versioning works best if the page that actually refers to the JS file cannot be cached or has very short caching time.
I agree with jfriend00 about the webpage itself being cashed and thus requesting the old javascript version.
To prevent this, you can have the javascript file loaded by an ajax (Post) request, either requesting the server what is the accurate(latest) version number to download, or requesting the javascript itself and inserting it, e.g. in the head of the page.
Edit: see for example here
I make a quick AJAX request to the server for the version it expects them to have, then force them to refresh the page if the client's script is old.
Seems that proxy or some load balancer is serving old content instead of new. Also check IIS/webserver settings how are these files cached/expired.
You can check what is going on on the wire with tools like Fiddler.