I am using $templateCache.removeAll(); to remove cache on LogOut, it is working fine since when I tried $templateCache.get("abc.html") it returns undefined.
But when I again load angular app abc.html shows from cache in network of chrome development tool .
The $templateCache is an applicative cache: angular stores the template in a JavaScript object. As soon as the application restarts because, for example, you refresh the page, this cache disappears and is recreated in the new application.
The browser cache has nothing to do with $templateCache. The browser is responsible for this cache, and populates it based on cache headers sent (or not) by the server. This is what prevents the browser for completely reloading pages, images and other resources that don't change often when using the back and forward buttons, or simply when navigating between pages.
So what you're seeing is completely normal.
Related
I have a create react app SPA, and I have deployed it with a registered service-worker.js (Cache-Control: max-age=0)
Everything works totally fine: When I update my code, and redeploy, navigate away from my site (or close the page), and return to my site, the service-worker.js file is downloaded again. It caches my index.html file which contains the url for my app.HASH.js file. It notifies me that new content is available, I refresh the browser page, and now I am running my latest app version.
What doesn't work is: When I navigate to different parts inside my SPA, I use react-router to change the URL. The "url-changes" don't trigger a reload of my service-worker.js file (it's cached with max-age=0 - and I have confirmed this with curl -I). Therefore a new worker is never downloaded to eventually inform me that new content is available and that I need to do a refresh.
I am not sure what the expected behaviour is supposed to be. If react-router changes the URL - should this not trigger a reload of service-woker.js when it's set to not cache itself?
In order to be able to get a new version of the SW.js file while the user is using your app, you have to manually call ServiceWorkerRegistration.update().
You could do for instance:
navigator.serviceWorker.getRegistrations()
.then(registrationsArray => {
registrationsArray[0].update();
})
This code would then be called whenever you like! This forces the browser to check for updates to the SW.js file and then handle the situation in whatever way you've configured your script to do.
This update() call should be made in any place you want to check for updates. You could call it after every URL change / new route visit or once a minute or whatever. You decide.
Checkout the MDN documentation. They also show reference code for storing a reference to the registered SW which gives you the possibility of directly calling update.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update
I am working on angularjs 1.5 and i want to reload css stylesheet without hard refresh because currently it's creating caching so without hard refresh it's not possible to see changes most of changes are dynamic in css file that's why i need to reload is there any way in angularjs ?
If your browser cache is the problem you can try one of the following things:
If you are developing on chrome, you can open dev tools and under the network section, you can disable browser cache. Everytime you reload now will fetch all resources fresh.
You can fingerprint your CSS by appending a hash or a version number to your filename at the build step. Ex: http://example.com/path/to/style-v01.css
You can make the link tag which includes the css to use a randomized query parameter which ensures the cache does not kick in. Ex: http://example.com/path/to/style.css?v=1.0
Ideally, in a production environment, your files are fingerprinted to avoid this problem.
I have used Sw-precache in my React app to pre-cache my built assets(i.e vendor.js, app.js and, icons). however, the result is less than desirable. On page reload my app assets are all fetched again(from service worker), but never the less everything disappears (page goes blank) for a moment and assets appear.
Screen capture of my app on page reload. In comparison, here is an app the Session from a list from https://pwa.rocks/. That truly has a offline cached that even on reload does not re-fetch the static assets. Here is also a screen capture of the session app on page reload. I'm positive there is something I am Not doing. What am i missing?
It could simple be that your HTML is returning and empty page and it takes time for the Javascript to run and populate the DOM with content, where as The Session is returning the HTML populated from the service worker.
In my angularjs mobile app, I need the certain requirements. Initially, the app is in the home page. If the user needs to go to the next page in that app, he has to click on that certain content. And it will redirect them to the next page of that particular content. After that, If he wants to go to the previous(back) page, he has to click on the back button.
What I need is, when user is going back to the previous page where he was in, that page is reloading. Instead of reloading that previous page, he should be taken to the same place where he was before. So, how to disable the reload. And I think it can be achieved using 'ui.router' and its $stateChangeStart. For url routing I use '$routeProvider'. So how to achieve this one? Please help me out.
For homepage the url is -
'/myapp/landingpage'
For the next page (when he clicks on the particular content) the url is -
'myapp/content/:contentId'
If you home page is a plain static page - then nothing is required - the template for the home page is already cached in the $templateCache.
Else if your home page has some data that is fetched from some service, I would suggest you to cache the data in your angularjs service layer itself.
You can explore $cacheFactory for more details.
If you do not want to use $cacheFactory directly, you can simply use 'cahce:true' property in yout $http.get request :-
$http.get(url, { cache: true}).success(...);
From the $http docs:-
cache – {boolean|Cache} – If true, a default $http cache will be used
to cache the GET request, otherwise if a cache instance built with
$cacheFactory, this cache will be used for caching.
The idea is not to mess up view/states for caching and move that responsibility to your service layer.
I have fully bought into the benefits of using angular and have a a hybrid app (using PhoneGap) I'm going to convert over (from Jquery Mobile) but I'm having a problem figuring out how to get my new code to the app.
The app is currently hosted on our website (NOT local to the device) so normal caching works as expected. I update a web page or js and the app sees the new content (because the underlying webview/browser knows its new content).
But with angular's SPA approach the main module gets loaded up front and changes views based on loading new partials. Also not a problem.
BUT, what happens when I change my app module (the code loaded by ng-app="demo")? Such as adding new routes, controllers, or views.
Since that's already loaded in the browser at bootstrap how do I tell the app there are changes and it needs to reload the overall app?
There are 3 use cases to consider:
1) On a PC/browser you can just refresh the page. I can't depend on users knowing to do that but its not as bad because users are likely to open and close their browser thus reloading the new app/js.
2) When I issue a new PhoneGap app (to the app stores) it forces a browser close/reopen during the installation, so the user will get the new code.
3) THIS IS THE REAL STICKLER. During normal use of the PhoneGap app users may open the app and NEVER close it again (merely suspending and reopening). These are not tech-savvy users and might not even know how to restart an app never mind realize they should try.
So what's the angular way to force the app the refresh when the base app module has changed?
Or am I on my own to create some type of version checking system to force a reload() when I need it.
Seems like a common situation to me but everything I find on caching with angular says something to this effect:
"Since you probably want to maintain browser caching for your views, partials or other routes"
No I don't - I WANT to bust cache for my app/views/controller because i know it has changed.
angular phonegap cache buster
You could dynamically load/unload your controllers on each use. This article should get you started.