What is "asset_version" role in html - html

so, i was checking some web page source code and I've noticed this at the end of some CSS links and images :
?asset_version=
and also this ?v=
What is their role ?? sorry for the English.
Thanks

This tends to be a solid way to force browsers to fetch a new version of a file if you modify it. Often, browsers will not respect the cache-control header specified, or you may not have the option to configure that (for example, a limited shared hosting environment). In that case you simply modify the URL by incrementing a version number, which convinces the browser it's a new version, even though it will likely return the same file.
as far as the browser is concerned, resources/css/application.css?v=1 and resources/css/application.css?v=2 are different files, even if the css file itself is totally unaware and uncaring of the trailing query parameters.

They are used for cache busting. Most web severs will tell a browser to hold onto various resources like image, css and javascript files so that on the users next visit they do not have to be downloaded. By appending a version control value they can force the browser to download the newer versions, otherwise the browser might not download the newer files because it still has a version that's within the time frame it was told to hold onto the same file for the domain.
The process might go a little something like this:
Hold onto my CSS file for 180 days, <link href="path/to/css/style.css">.
30 days later I update my CSS file. Browser will want to use the one you already gave it as it's valid for another 150 days. But you want it to use the newer version so you use a cache busting technique. So you might do this <link href="path/to/css/style.css?v=09252015">.
The browser uses the complete path to identify resources from a domain. Changing the query string value effectively makes the browser think it's a different file.
You will also come across people cache busting in the actual file name also.
<link href="path/to/css/style-09252015.css">

Related

How to ensure changes to website are seen by returning visitors?

I have a 'static' website (there is no content management system database).
I've just made changes to the .html files and .css file of the site.
I've renamed the .css file: version2.css because I thought that would help.
I've uploaded the changes to my server and checked the site. However, because of cache (I presume) the site doesn't look any different.
When I refresh I can see the changes to the content and style, but I can't see changes to images (where the name of the image has remained the same). I can only see the changes to images after clearing browser data.
So my question is how can I ensure returning visitors see the new site / changes? How long do browsers store history / cache for? From other posts it looks like browsers store around 50mb of info. If this is the case then for a lot of people their browsers could be emptying the cache every day, in which case it isn't a big problem for me?
Is there a solution that doesn't involve PHP or apache conf (both of which I know nothing about)?
Thank you (from a beginner)
You are sort of on the right track you can provide version numbers to existing files which will force browsers to reload the data.
<img src="/logo.jpg?version=1">
<link rel="stylesheet" type="text/css" href="/style.css?version=1">

How to force browser to clear cache so changes on my website are shown?

Whenever I make a change on my website I have to clear the cache of my browser so I can see said change. Is there a way to automatize this process? I have seen some similar posts here (suggesting using the cache-control meta tag) but all of them are from years ago, and I would love to get some updated answers. Also, I'm not sure if using those meta tags (eg. ) is the right way, as I've seen some people discouraging their usage.
You can add ?xxx to the css and js filenames and browsers will reload them whenever xxx changes. You won't need to rename your source files.
i.e.
<link rel="stylesheet" href="/animations.css?12345678"></link>
You may have seen content managers do this, with random strings generated on each session to force a reload on first load, and then cache for the remainder of the session.
If this is regarding .css and .js changes, one way is by appending something like "_versionNum" to the file name for each release. For example:
script.css // This is the URL for release 1.0
script_1.1.css // This is the URL for newest release [1.1]
You should also refer to this link for more information.

HTML and CSS doesn't update online due to browser caching

I run a website for a small company. The websites mostly contains text and images. Whenever i update the website by replacing a image or updating the css, it doesn't get updated on other people's browsers because it's been cached. I've found a way to get around this by adding a version number where i'm linking my stylesheet, however, this doesn't apply to images. What is the most simple way to get around this?
I've done a lot of research on the web and on stackoverflow, but they are all complicated solutions. There must be a better way.
Just to be clear, i know i can clear the cache in my browser. I'm looking for a solution that works for everyone who access my website.
You can add these meta tags and it will force a page to reload from the server on every reload. However, you should realize that this could result in a lot more data usage for both you and your users.
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
If you have a reload link or button on your html page, you can add this attribute to it to force a reload from the server. The 'true' parameter is what forces a full reload instead of a cache reload.
onClick="location.reload(true);"
You can rename your images (preferably) automatically when you want to avoid them being cached, adding a version number to their name. If you have something which does this automatically, then you bypass the problem of caching them.
If you want to keep the name of your images, then you can make the change only temporary.
Try versioning(?version) to the files to avoid browser caching.
it will be like filename.jpg?v1 filename.jpg?v2
Or if you are replacing files frequently try adding current timestamp for every page load
In php,
filename.jpg?<?= time()?>"
where time() is current timestamp
This means you are just changing the urls everytime.

Download from URL (PATH) - iPhone

I got a little Question.
I'm working on an App, and for that I have to download an HTML File with the including CSS and Images.
And Yeah, there's an API for that (ASIHTTPRequest), but I wan't to publish my App to the App Store and I don't want to use 3rd party API's.
And Parsing the HTML code is a bit hard :(
And It would also work for me, if I could download the whole path of a URL.
For example:
I have this URL: http://example.org/smthg/.
At this path I have:
-index.html
-logo.png
-style.css
And I want to download all this files AUTOMATICALLY, and not every single file.
But I don't think, that you can find out which files are on the server, right? (without BruteForce).
I hope you know what I mean :)
You can use a UIWebView to download the content at the location and hold on to the WebView. You could also use NSURLConnection to download content at a URL if you want to save it unformatted and you have the URL's to the resources.
There's nothing wrong with using 3rd party frameworks, as long as they're good quality frameworks and you use them right. ; ) Apple just gives you the starting blocks to make an app, after all, and using open-source code can really speed up your project.
With that said, ASIHTTPRequest is a bit outdated and not well maintained. Instead, I'd recommend AFNetworking, which supports asynchronous downloads, background downloads, and blocks. See https://github.com/AFNetworking/AFNetworking .
Regarding your specific issue on downloading certain files, however, you might try creating a plist(s) on the server (if its yours that is, or else, bundled within the app perhaps) that would list all of the needed files and their download locations.
However, the issue you're liking going to quickly face- even if your app has all needed files downloaded, it still has to understand what to do with them. If its just HTML content, styles, etc, perhaps you can display it in a UIWebView ? However, be sure that your app is adding some useful functionality besides just being a web browser... (unless, of course, you're making an enhanced web browser... ;)
Good luck!

sprites - cache issue - especially on chrome

I have the following problem.
We have a site. I changed some sprites to make it look cooler. The thing is that we already have users and there is a big chance that their browser have the old images cached. Is there anyway to force a new request to images from them?
Note: On firefox (default settings) after some refreshes the new sprites are requested but seems like chrome (default settings) just doesn't request them unless you explicitly clear cache.
Another Note: One way would be to rename the sprites but this also means that we have to find them in css files and rename there also, etc. etc. etc.
Have a great day and ty for help.
One solution would be to add a random number onto the end of the image name e.g.
.mybackground {
background-image:url(../images/background.jpg?16549);
}
If you could make the number random every time the page is loaded via some JS or PHP or whatever that would work for you. YOu could maybe take the images out of your stylesheet and place then in a style tag in your header include or whatever so that you can do the random number bit to them. (Not sure if you could do directly into the stylesheet)
Renaming sounds more feasible. You can most likely automate it with (shell)scripts so it shouldn't be a too bad.
(Most IDE have a feature to find and replace in multiple files, you can use it to change the path to the sprite in the CSS files. Your best bet, is to give a new name for the new image for now.
As for later on, I suggest looking at your caching and expires headers of your web sever. (These are links to the Apache documentation, if your web server isn't apache, it would be same idea, but requires different implementation.)