Refresh forced with gulp and browser-sync - gulp

Question

I use browser sync and gulp to reload my page on change of every file in my project. It half works : sometimes I have to ctrl+F5 for the changes on my page to be displayed and then I just have to save for next changes and the browser sync reload is enough. Here my code :
var cache = require('gulp-cache');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
injectChanges: true,
proxy: "http://localhost:8888/project/source/"
});
gulp.watch("source/**/*").on("change", function(e) {
cache.clearAll();
return gulp.src(e.path)
.pipe(browserSync.reload({stream: true}));
});
});
I want the browser to be refresh on every change on my project (every file in every folder/subfolder).
I thought the stream parameter to true found an another topic will do the job but I still have the same problem...And the gulp clear cache doesn't change anything.
On each save, my page is refreshed but the changes not always displayed, so I have to hard refresh with a ctrl+F5.
It's a small project that's why I don't wanna use webpack. And it's on MAMP server.
Any idea ?

Answer 1

The most likely culprit is asset-cache. A hard reload removes any cached data from the browser, and also unregisters service workers, indexeddb, etc.
go into devtools, click the application tab, select service worker, and check the box that says, "update on reload". I am pretty sure this does a hard reload on page refresh.