-1

we are developing a VueJS based application. We have huge caching problem.

Team members are constantly updating the site but we are getting feedbacks about the solved problems such as typos and miss placed elements.

I personnaly tried the inspect this situation, I found that Chrome reads the files from disk cache or memory cache until the page is refreshed. Even though sometimes chrome still loads the old page when we are re entering the site again (after the refreshing process (ctrl + shift + r)).

I' m sorry for my bad english but I tried my best to explain what I encounter. Also I found a topic about the problem, OP has explained the what I was encounteing. You can also check that out. How to clear cache of service worker?

I created a website on IIS (local machine windows 10), published the project and tried to reaching it with local ip adress (127.0.0.1:8093), in the network tab I can see the .js and .css files being downloaded then I restart the browser and tried again, this time files are being served from disk cache, I tried couple of times and sometimes files are served from cache and sometimes downloaded.

I tried to add serviceWorker but I got empty handed. Also I created a base project to test some vuejs features and I added same serviceWorker code to the project. It cached again.

Our servers is windows 2012 server with IIS 8.

If it is possible we want no-caching approach or we want to manage what's cached and not. If you can help we would be appreciated.

You can checkout the base project vue-base project

What I tried

As I said above I tried to add service workers as github commit,

https://github.com/vuejs-templates/pwa/pull/21/files

Also I tried deleting the cached data caches.delete(cacheName) did not seem to work.

I don't know if the serviceworkers related to this problem but did not solve my problem. May be I could not add the code properly. If you can help I would be very appreciated. Thank you for your helps.

Edit1: Screen GIF

Eren Yatkin
  • 186
  • 2
  • 9

1 Answers1

1

I dont know what you have been using to bundle your code and assets, but with webpack it is possible to create the files with a hashcode, which means that everytime the browser finds a new file reference in your browser it will download it.

Ex: you deployed yesterday a code which contained main.34534534534.js Today you deploy again but the file is main.94565342.js. Your browser will automatically invalidate cache.

Cleriston
  • 750
  • 5
  • 11
  • I'm using Webpack to bundle the code. When build the project css and js files named ilke you said. This is not the problem. – Eren Yatkin Nov 01 '18 at 17:03
  • 1
    Well if you doing so, you should not have cache issues. – Cleriston Nov 01 '18 at 21:23
  • I know I should not have caching problem. Let me explain the problem. we are developing a project that contains gamefied logic for education purposes so our customers are young learners at the age of 10 maybe less. We improve the projects weekly, now the problem starts here, users have done their assignments and closed site, then we update the site with bunch of bug fixes, after that some users tried to reach the site again, but the browser read the files from cache and served them from distk so they do not see the changes. If they remember the refresh the page they can see the changes. – Eren Yatkin Nov 02 '18 at 06:49
  • 1
    I am sorry but if you are changing the name of your assets, they will be downloaded, as there is no way the browser to know which file it is from cache. Please reassess the process to generate your files and check whether the hash is changing. – Cleriston Nov 02 '18 at 13:17
  • I captured the screen to show you what I was getting as a result. You can check it out [Screen GIF](https://imgur.com/a/tnRMnCb). Also I checked the generated files name, they are hashed differently. – Eren Yatkin Nov 02 '18 at 14:56
  • I don't know what that GIF is supposed to illustrate. Is it possible your actual HTML file itself is being cached, and not the CSS/JS files? – ceejayoz Nov 02 '18 at 15:00
  • @ceejayoz If the HTML were cached on server side or through the provider, then the HARD refresh would not work. – Cleriston Nov 04 '18 at 23:05
  • @Cleriston it's probably his webserver is caching the files. – Alexander Kim Sep 30 '19 at 17:51