Cached CSS loading error - css

Hey I'm working on a site that loads CSS and images that are generated server-side. Some times the images and CSS that is loaded in shows up as the incorrect template but with the correct images.
Since this template is created on the server and not on the actual page I was thinking that the web server that hosts the actual page may have a cached version of that page and may sometimes ignore the CSS and images that are generated from the main server.
In short:
Do webservers sometimes keep cached versions of page Styling?
I there an easy way to make it get the live version always?
Also this happens very infrequently and at random. It seems very hard to replicate. But I have seen it happen a few times.
Any other Ideas?

For the first answer, yes they do but only if setup that way. There is the CDN or varnish. These system are used for website with huge loads where content must be cached locally or on other server, allowing the user to visualize the cached content and not the one generated by the webserver at the moment the user requested.
Exclude this for your case then ;)
I always use chrome or firebug on firefox to debug a website.
Press F12 while in the page you want to check and, on chrome, go to "Network" tab and pin "Disable Cache".
This is incredibly handy if you refresh your page quite often and want the content not cached.
For the question itself, I don't think I/we can help you without seeing the code. But try my suggestion with F12 before.

There are two kinds of caches to think about. One of them is server cache. If you use server cache, then whenever CSS was modified, you need to empty the CSS cache if you have such a cache. If not, then you need to empty the cache, which might be painful.
As about browser cache, if you add a new parameter to your css file, then it will be loaded even if it was cached in the browser of a given user, therefore it is recommendable to add a parameter to your css file where you include it. This parameter should be either a version or a timestamp, or something uniquelly distinguishable from earlier versions. That value should be stored and you need to refresh (preferably) automatically whenever the CSS changes. The exact steps are up to you, since they differ greatly in different environments.

Related

How to block anyone downloading web page from browser using Ctrl+S or through browser download option?

I am trying to restrict the user from downloading the page as .html or .aspx file from browser.
Or is there a way to change the content of file if its downloaded?
This is a complex area, with lots of moving parts. The short answer is "there is no way to do this with 100% success; there are a few things you can do which make it harder".
Firstly, you can include JavaScript to disable the right click context menu. This doesn't stop Ctrl+S, but might discourage casual attempts.
Secondly, you can use DRM in the browser (though this is primarily aimed at protecting media content. As browser support is all over the show, this isn't realistic right now.
Thirdly, you could write your site as a single page web application, and build some degree of authentication into the "retrieve content" logic. This way, saving the page to disk wouldn't bring the content along, just the "page furniture". However, any mechanism you include to only download content when you think you should is likely to be easily subverted by anyone who is moderately motivated.
Also, any steps you take to stop people persisting your pages locally are likely to break the caching mechanisms on which the internet depends for performance, so your site would likely be dramatically slower.
No you can't stop them.
Consider how the web actually works here: once the user has visited your website and loaded your page into their browser, they have already downloaded it - the web page was transmitted from your server to their computer and appeared on their screen.
All they have to do then is click the Save button to keep it permanently on their disk. That doesn't involve downloading it again, it just copies the page data from a temporary folder to a permanent one. Of course it's also possible for people to use another HTTP client (i.e. not a browser, but maybe an existing program, or some code they wrote themselves) to visit the URL of your page and save the returned contents.
It's not clear what problem think you would solve by stopping people from saving pages. Saving the page is something done within the browser - you as a site developer don't control the user's browser, so you can't prevent that. And if you stop them from downloading your page in the first place then - by definition - you also stop them from using your website...which kind of defeats the point of having one :-).
If you've got some sort of worry about security, you'll have to clarify exactly what you are concerned about, and maybe you can get advice about a sensible way to deal with it.

ASP MVC. Some users get old scripts, despite that we use bundles

We have an ASP MVC 5 applications. We use bundles with optimization enabled by default. But we have heard several times from users, that they get errors, that we think are caused by old versions of user scripts. Their browsers somehow take scripts from cache, despite the fact, that we have edited that script files and bundles should be updated. The worst part of the problem is that we can't imitate or recreate this problem. We don't know how. We already have tried to make test-changes to scripts like adding some "console.log('test')" lines in order to see, if the browser takes the cached version, but everything was ok, the hash in the end of <script src="....?v='hash'"> changed and the browser took the newest version from first time. I should mention, that our site is a single page application. Don't know, maybe its somehow related with the problem.
Have you faced this kind of problem?
There's not enough information here to give a definitive answer. The bundler detects changes in files and will regenerate the bundle along with the link to that bundle, which will include an updated query string param. Since the query string is part of the URI, it's considered a totally different resource at this point, and the browser should fetch it again, because there is technically no cache available. The only logical reason this would not occur is if the HTML with the link to the bundle is not being updated. This can happen if you're using OutputCache or otherwise caching the HTML document. It can also happen if the client's browser is aggressively caching the HTML document. Unfortunately, there's not much you can do about that, as the client browser ultimately has control over what is or is not cached and for how long.
That said, given that this is a single page app, it's very possible that it's also including a cache manifest. This manifest will very often include the HTML file itself, and the browser will not refetch any file in the manifest unless the manifest itself is updated.

Do css background images not get cached by default?

While tuning my web app, I noticed that certain of my images are never loading from cache, even though they're completely static:
This particular file always loads from the server, but it should be cached. The only thing somewhat special about the file, AFAICT, is that it's sourced via a CSS class, which specifies the file via a background-image style. I'm not specifying any tricky headers or anything; it's just a regular jpg file.
There's a lot online about preventing caching, but I can't find anything about making it work when it doesn't seem to be.
Do you have caching software on your web server? If yes is it enabled? Since some can be disabled such as UnixyVarnish what is mainly found in cPanel. Images do get cached by default. Regardless of how its displayed. And your browser should automatically cache websites you visit, unless you have disabled it.

CSS not refreshing - now deleted, not cached, inexistent - and still loading? How? Why?

I'm working on a Wordpress website and I have styles loaded from two stylesheets - original style.css and style-custom.css for additional style.
Unfortunately whatever I do, the styles do not refresh. I already tried to press Shift+F5 without success.
I've purged the server and browser cache entirely several times (even though it's actually permanently turned off via WP Engine). I've removed appended ?ver numbers to force the update of the file content.
Right now I've even deleted the file and it is still loading in the browser! Even worse - it's loading in all browsers that I have not even ever used on the damn site.
I don't know what else to do. The file is gone and the cache has been purged.
There is definitely some sort of caching mechanism still. Are you developing on your own server? If you try to refresh on somebody else's computer are they able to see the file?
If yes - then you need to contact the servers' administrator, or you hosting provider with clarification.
You should be developing your websites locally though, and once they are ready publish them on the web.

How can I properly refresh a Durandal SPA web app when new views are added?

I'm just starting to play with Durandal, using the starter kit. I've added a very simple new view/viewmodel combination (essentially a copy/paste of an existing one from the sample) and mapNav()'d the route.
The problem is happening when I try to refresh my browser...the new view simply does not appear. It's not in the nav bar, nor can I navigate directly to the view by typing in the address bar. I know the code is (or should be?!) correct because if I go to the page in a different browser, everything appears as it should.
Is there some browser caching that Durandal is doing somehow? Sometimes F5 or Ctrl+F5 works to refresh, sometimes it doesn't. I also can't deep-link to a specific 'page'. Ie:
http://localhost:52625/#/newpage just gives me a blank
What am I missing?
The option that I use in Chrome is to open developer tools and right-click on the refresh button. There is an option for 'Empty Cache and Hard Reload' which always fixes this issue for me. I don't know the equivalent in IE but try this and see if it fixes your issue.
Most browsers will cache modules returned via RequireJS, which is how Durandal obtains its modules and view models.
CTRL+F5 doesn't help because that just refreshes the initial page - all the modules are still requested using javascript (RequireJS), so they are usually pulled from cache first.
I've found it's best to disable caching in your browser's developer tools. Doing so will ensure that all network requests are loaded directly from the source and not from cache.
See this question for additional information: Debugging when using require.js cache
Another solution is configure RequireJS to set its urlArgs property: https://stackoverflow.com/a/8479953/91189
This solution works ok, but makes it harder to debug, at least in Chrome, because breakpoints are lost every time the module is loaded, since it's technically a different file being requested each time.

Resources