Ionic 3, angular 5 - cache problem with webapp

user_7258178 0
Viewed 1898

We have a Web-App (We build for browser platform) and our users get to it using their browsers on the mobile (this is a fall-back for thos who don't want to use the App itself).

We have many times (not always and only for several users) that after a big change in the code, those users can't use the application properly as the files are not updating until they are clearing their browser's cache.

We have tried several solutions to "force" the client to reload the updated file from the server with no luck.

We tried setting no-cahce to our nginx configuration. Tried adding timestamp to index files. Tried setting up custom Service workers. So far, still we encounter some users that until they clear their cache, it doesn't work properly.

Any suggestions? Is there a way to force the client to re-download the updated files after an update? Is there a way to change ionic build settings to include a timestamp or something like that to all the generated files?

Thanks :)

ionic-framework angular caching web-applications
2 Answers

I Managed to solve the issue. The solution was adding a hash to the pages files generate by ionic build.

This row needs to be added to the top of the webpack.js file:

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

And then in the module.exports function add the following:

useDefaultConfig.prod.output['chunkFilename'] = "[name].[chunkhash].chunk.js";

This causes the files generated to be hashed differently on every build.

user_72581780

As an expansion to @S.Moran's answer (which is great , thanks!) I did this;

Create a /src/config/webpack.config.js file like this;

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
    console.log("Custom webpack.config");
    useDefaultConfig.prod.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
   return useDefaultConfig;
}

Then have this in my package.json

"config": {
    "ionic_webpack": "./src/config/webpack.config.js"
},
user_43718510
Related