Ionic 2, Chrome keeps loading from disk cache

Question

I'm developing a mobile app and use the following command to build and run a version that works in a browser (pulling in all necessary hooks, which ionic serve does not)

ionic build browser --desktop --testing && http-server platforms/browser/www/

Yesterday, and for weeks, this works perfectly. I stop and start that same command, it builds/compiles everything, everything is great.

Then I updated Google Chrome. Now, no matter what I do, Chrome keeps pulling all of these resources from disk cache, even after I delete and re-create them. Any ideas how I can solve? I don't want to have to clear my cache out every time I reload, and it seems this'll cause additional issues down the road.

I don't know why or how this changed, no project or config settings are different in my Ionic2 app.

Using cmd-shift-R instead of just cmd-R to reload seems to force Chrome to not load from disk cache but I'm confused and want to understand what happened here...

Answer 1

Chrome caches a lot but you can force it to load resources from your server instead of taking them out of cache by using cache busting:

Load templates:

var timestamp = (new Date()).getTime();

$ionicPopup.show({
    scope: $scope,
    title: 'Work!',
    templateUrl: '/templates/roll-timer-popup.html?update='+timestamp
});

Load scripts/stylesheets:

<script src="myscripts.js?update=123..."></script>

<link rel="stylesheet" type="text/css" href="theme.css?update=123...">

For script/stylesheets you might create them along with the timestamps dynamically and insert them afterwards.

Or when your scripts-files get bundelt together, you could use a script to write timestamps into your finally index.html file for deployment by using a nodejs-script, for I made this script for one of my projects:

const fs = require('fs');

var filename = process.argv[2];

var regExp = /[.|\w]+[.]js/;
var contentToAttach = ['<!-- CONTENT ATTACHED BY '+process.argv[1]+' -->','you can put other content in here that is put into at the end of your file'];

fs.readFile(filename, {
    flag : 'r',
    encoding: 'utf-8'
},(err, oldFileContent) => {
    if (err) throw err;
    var fileContent = oldFileContent;
    var oldScriptName;
    var now = (new Date()).getTime();
    var lastIndexPos = 0;
    while (oldScriptName = oldFileContent.match(regExp)) {
        var newScriptName = oldScriptName + '?update=' + now;
        var newIndexPos = fileContent.indexOf(oldScriptName);
        if (newIndexPos !== lastIndexPos) {
            fileContent = fileContent.replace(oldScriptName, newScriptName);
            lastIndexPos = newIndexPos;
        }
        else {
            // same filename found
            var fildContentSlice = fileContent.slice(newIndexPos+oldScriptName.length);
            fildContentSlice = fildContentSlice.replace(oldScriptName, newScriptName);
            fileContent = fileContent.slice(0,newIndexPos+oldScriptName.length)+fildContentSlice;
        }
        oldFileContent = oldFileContent.replace(oldScriptName, '');
    }
    var wholeContent = fileContent+'\n\r'+contentToAttach.join('\n\r');
    fs.writeFile(filename,wholeContent, (err) => {
        if (err) throw err;
        console.log('File: '+filename+' is updated!');
    });
});

It inserts ?update=123... in every script-tag it can find in a file. To execute this script in the shell write:

node updateScript.js path_to_your_html_file

Hope it helps.