CODEWITHSUNDEEP
angularcachingionic3
Charly berthet
Charly berthet

Reputation: 1296

ionic/angular, How to force client to clean his browser cache after each release?

I have developed an app using ionic-native 4.7.0. Each time I want to publish my app online I use the command ionic build --minifyjs --minifycss --optimizejs. This is great but my client still get old JS and CSS. They have to clean browser cache in order to see evolutions.

Here a picture of my "compiled" sources : enter image description here

My 0.js, 1.js, ... Are lazy loaded pages and cached by my client browser. How can I force browser to reset cache after each deployement ?

Thanks !

Upvotes: 4

Views: 3521

Answers (4)

Francisco Daniel
Francisco Daniel

Reputation: 1029

Just build it for production:

ionic cordova build browser --release --prod

Upvotes: 0

jie
jie

Reputation: 431

Thanks for @andi's suggestion. Here is my ionic_webpack.config.js

const defaultWebpackConfig = require("../node_modules/@ionic/app-scripts/config/webpack.config.js");

module.exports = function() {
    defaultWebpackConfig.output["filename"] = "[name].[chunkhash].js";
    return defaultWebpackConfig;
};

Upvotes: 0

Andi
Andi

Reputation: 3498

I found a working solution at https://forum.ionicframework.com/t/bundled-files-and-cache-busting-lazy-loading/109114/9

Create the file config/webpack.config.js in your project with the following content:

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

    module.exports = function () {
        defaultWebpackConfig.prod.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
        defaultWebpackConfig.dev.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
        return defaultWebpackConfig;
    };

Reference this config in your package.json:

    "config": {
        "ionic_webpack": "./config/webpack.config.js"
    }

Then the files 0.js, 1.js, ... will get random names like 0.91d798902e4dca77e704.chunk.js, no caching problem any more!

Upvotes: 4

Jonatan Orozco
Jonatan Orozco

Reputation: 103

Try to use cache versioning

At the end of file path add ?v={the version} Like this

<script src="build/main.js?v=1"></script>

Upvotes: 1

Related Questions