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.
Related
Up until recently (since installing some caching plugins) my website worked fine whether I went to:
https://[my website].co.uk
or
https://www.[my website].co.uk
it always just redirected to:
https://[my website].co.uk
I installed:
WPRocket - Browser caching, optimizing CSS, JS deferred
Autoptimize - Aggregete JS files
Asset Cleanup - CSS files Minification / inline css files
and I setup Cloudflare CDN
Everything was working fine up until I cleared the Cache from cloudflare, on WPRocket I cleared the cache and Clicked 'regenerate critical path CSS' and 'preload cache', I also cleared the cache from autoptimize.
Also I would like to add that I use Elementor and the page design is all distorted whenever the non-www URL is loaded.
I have since removed all the plugins and removed CloudFlare,
I have redirected all internal links in Elementor from https:// to https://www. but the issue still persists, as on Google search the website link comes up as https://[my website].co.uk so it always takes you to the distorted page design.
It seems to work okay when I go to:
https://www.
http://
http://www.
but not on:
https://
If some one could help me understand what is causing this and how I can resolve this it would be much appreciated, I have researched there is a way to re-direct it from https:// to https://www., but I still would like to know whats causing this and if I can get it back to how it used to redirect before.
Thanks for reading.
The correct location is
https://www.[my website].co.uk/wp-content/cache/busting/1/wp-content/cache/busting/1/sccss-1599078865.css
while it's being searched for at
https://www.[my website].co.uk/wp-content/cache/busting/1/wp-content/cache/busting/1/sccss-1598045687.css
The files have different ends.
The other file is looked for unsuccessfully at
https://www.[my website].co.uk/wp-content/uploads/elementor/css/global.css
but a correct load does not load that file. It loads
https://www.[my website].co.uk/wp-content/uploads/elementor/css/post-2.css
instead.
It appears that the different domains are maintained separately. You might want to look for differences and to synchronize your versions.
On cloudflare I want to disable caching and see my website changes immediately that I've pushed live.
Things I've tried:
I've put development mode on.
Create a bypass on caching in page rules.
Purged an individual webpage.
Purged the website.
Set cache to clear every 2 hours.
None of the above worked.
Tech I'm using:
Angular2
SystemJS
Typescript which becomes javascript on build.
Firebase for hosting and database.
Cloudflare for SSL etc.
The only way people see my website changes, it if they hard refresh.
The main problem is I've got a javascript file called app.js and its has all my javascript in for my Angular app. And it doesnt seem like its trying to get the resource in the browser.
I've changed the app.js to app.js?1490959855777
And still doesnt fetch the file again.
I basically want to see my JS file without a user having to hard refresh.
Based on the discussion above, it looks like the caching is happening on the browser - since a hard refresh will get the new file contents.
I think what happened is CF told the browser to hold onto that file for a very log time. And the browser is listening to that request.
Because you can't ask your users to do a hard refresh, you'll need to rename the static files that are being cached so aggressively.
I have a dotnet web application running on a server with IIS7. I have to replace 2 .js files. Some pc's are getting the new file and other are not. I tried to update the time-stamps on the web.config file and those two .js. There is no specific caching set.
How can I force the browser (IE11 in my case) to go get the file from the server and not use the one in the local cache? I won't go on every users pc and clear there cache. I need a better solution and everything I tried so far is not working.
thanks!
You can add something unique to the script tag like:
<script src="myscript.js?version=1.1"></script>
This will force the browser to fetch the new verison.
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.
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.