I've got a fairly simple Angular2 application in the works, and I'm trying to demo it to my boss on our staging server (typical Ubuntu LAMP). Every time I update a template and redeploy, I also have to clear my browser cache -- and so does my boss, and so do my future users! Not good!
I'm using templateUrl to load in my components' templates, and they are always being cached by the browser. I've tried disabling caching in .htaccess but it only seems to set the headers on the initial request and not for any of the XHR.
Is there a way to configure apache to disable caching for XHR? Or just completely disable browser caching no matter what?
Or am I doing something wrong in Angular? Is it a bad idea to run an Angular app on Apache?
Any advice or ideas would be greatly appreciated!
It was Apache doing the caching, but the problem was simply a misunderstanding on my part. I never cleared my cache once I set Apache to stop caching. I assumed it would happen automatically, which is obviously not the way browser caching works.
So I'll have to clear my boss's cache one last time, and from there on out the problem will be solved.
Related
I fixed my service worker configuration of my SPA site and now it's not caching the index.html file.
The problem is what can I do with my anonymous old \ existing visitors that already have the old index.html file as part of they service worker cache?
I can not tell them to clear cache or do manual refresh because I don't know them. From time to time they are calling to my office and i explain to them what to do but I am sure that lot's of visitors not calling me and can not use my new release because of that problem.
Again, I don't have problems with visitors that coming to my site since the fix i did to the service worker configuration. I have a problem with visitors that have my old index.html before my fix.
I'm using NGINX and ReactJS.
you need to add some sort of check against the cached assets to see if they need to be updated.
I use different techniques depending on the application.
One is to make a HEAD request and compare the last updated time against the cached value. If it has been updated on the server since it was cache I replace it.
I may also add some sort of time to live value to IndexedDB that corresponds to the cached asset or data. When that time expires I trigger an update.
There is no one answer fits all for this. Cache invalidation can be a complex topic and you need to try different techniques and use what works for the data or asset and within your application's use cases, etc.
Also consider how to handle offline and authentication, etc. See even more layers of complexity.
I am working on a project that uses Angular1, we hit the problem where when we change an html template the users will not see the change until a hard refresh is performed. Ideal would be to have the cache service to check a timestamp and invalidate the cached file. As an example now I edited a template used by the $stateProvider.
My questions is what solutions or best practices are used to solve the problem?
P.S since our JS files are combined in 1 file we fixed the problem there by appending a timestamp in the script tag from our PHP backend
Interesting question! We've had the same issue in a project that uses Angular1.x. We solved it using angular-cache-buster.
It basically helps you put a httpInterceptor. All you need is have ngCacheBuster in module dependency injection, and inject httpRequestInterceptorCacheBusterProvider in the .config of your app to set the match list.
For example,
httpRequestInterceptorCacheBusterProvider.setMatchlist([/.*api.*/], true);
this tells it to cache everything except REST api requests. You can learn more about the configuration here.
Is there any way with AngularJS to force a page to refresh after it has been changed. What I mean by this is that I have multiple users actively working in the app but a change is required to the controller.js file. At this point the only way I'm aware of is for them to manually push refresh on the browser. Is there any code that I can use to make it "actively" watch that file for changes and reload when necessary without the users having to manually push refresh?
This isn't really an angular problem. You can do polling on the client side with setInterval, hitting the file on the server to trigger a refresh on the client.
If you're looking for something to speed up development, then you're probably looking for hot module loading. The solution depends on what version of angular and build tool you're using (e.g. grunt/webpack/npm).
Check out this article for angular 2, but you can find similar solutions for angular 1:
http://blog.mgechev.com/2015/10/26/angular2-hot-loader-hot-loading-tooling/
But if you just want to force a page refresh from the client side, you would just call: $window.location.reload()
Our team is constantly working on an angular application, and every week or 2 we update it with new features or correct some bugs that came out.
We are using a C# backend with webservices.
QUESTION: When we update the application on the server, we sometimes (this doesn't happen all the time) get the problem that user is still seeing the old HTML and functionalities. What is the way to solve this?
I didn't find this on google, maybe I'm not looking for the right terms,
any help is appreciated.
Users have to clear their cache to get the new version of the application.
What you are seeing are cached copies of the JS files (possibly HTML partials too).
When the browser parses the HTML page, it makes the request for getting the JS resource and looks at various information before deciding to retrieve either the cached copy (if any) or whether to query the server again.
You can find some extra details on the Google fundamentals on HTTP caching
A solution I have been adopting myself is to set the cache headers to cache the file for a very long period, and then use tools in the build to version the file either on the filename or with a request parameter.
I have used grunt-cache-breaker and found it to serve well for this purpose. I know there is a gulp equivalent too
The most common way to make sure cached versions of your javascript aren't used is adding the version as a parameter in the reference to the script like so:
<script src="/app.js?v=v1.0"></script>
modules loaded by requirejs are loading again on page refresh for e.g. Backbonejs and other js libraries. it should pick those modules from browser cache on page refresh . right ?
is there a way to implement this which will improve the performance to a great extent on page refresh.
Files required par require.js are retrieved using the normal browser's mechanisms (as if you add done a ). In other words, if they can be cached, they'll be cached.
If you are using Chrome and DevTool is open, make sure in the options that you haven't checked "Disable cache (while DevTools is open)"... there are probably similar options in Firefox / IE.
As implied by #Enders, it's not strictly a RequireJS issue. All you can do is make sure your server sends correct response headers which will encourage your clients' browsers to cache the resources. I say "encourage" because there is no way to force clients to cache, in the worst case they could run with "disable all cache".
Approachable information about caching best practices can be found in this Google Developers article