CODEWITHSUNDEEP
angularbrowserbrowser-cachecache-control
Ulises 2010
Ulises 2010

Reputation: 508

Clear browser cache in Angular

I have a problem with an Angular application that I update very often.

I would like to avoid the browser cache and I am trying several alternatives but none of them work.

The first thing is that I have very difficult to test if the solution works because when I upload a new version, sometimes I see it without having to do more than refresh the page, and other times I need to open the console and force the refresh emptying cache.

I tried to include in the request header, Cache-Control: no-cache, as you can see in the image, but that does not work for me.

enter image description here

I have also tried, put in the app.component.ts

templateUrl: './app.component.html? v1'

as I have seen in some answers, but neither.

The truth is that I'm desperate because when I give something that I think works, when I check it with my boss he does not refresh it :-( , and the bad thing is that as I say I do not know how to really check that really, every time I enter the web, the latest version is requested from the server.

Thank you for your help

Upvotes: 34

Views: 125514

Answers (4)

Christopher Lowe
Christopher Lowe

Reputation: 101

I also update my app daily, I use this to notify the user that the app is out-dated and request for the page to be refreshed.

constructor(
    private swUpdate: SwUpdate,){

    public checkForUpdates(): void {
    this.updateSubscription = this.swUpdate.available.subscribe(event => this.promptUser());

    if (this.swUpdate.isEnabled) {
      // Required to enable updates on Windows and ios.
      this.swUpdate.activateUpdate();
      interval(300000).subscribe(() => {
        this.swUpdate.checkForUpdate().then(() => {
         console.log('checked for updates');
        });
      });
    }}

    // Important: on Safari (ios) Heroku doesn't auto redirect links to their-
    //https which allows the installation of the pwa like usual
    // but it deactivates the swUpdate. So make sure to open your pwa on safari
    //like so: https://example.com then (install/add to home)
    
      }

      promptUser(): void {
        this.swUpdate.activateUpdate().then(() => {
          const snack = this.snackbar.open('A New Update Is Available Click To 
          Reload', 'Reload');
          snack
            .onAction()
            .subscribe(() => {
              window.location.reload();
            })

  
 

       });
      }

Upvotes: 3

KLMN
KLMN

Reputation: 559

Try [window.]location.reload(true):

if (localStorage.getItem('refreshed') === null) {
    localStorage['refreshed'] = true;
    window.location.reload(true);
} else {
    localStorage.removeItem('refreshed');
}

According to w3schools:

By default, the reload() method reloads the page from the cache, but you can force it to reload the page from the server by setting the forceGet parameter to true: location.reload(true).

Upvotes: 6

RexRod
RexRod

Reputation: 51

You can force page reload with the following command:

window.location.replace('/path');

Upvotes: 0

wentjun
wentjun

Reputation: 42576

When you are building the application using ng build, you should use the following flag:

--outputHashing=all

This is to enable cache-busting. This adds a hash to every single built file such that the browser is forced to load the latest version whenever you have uploaded a new version to your servers.

Threfore, one way to do it would be to run this: 

ng build --prod --outputHashing=all

You may read more about the build options flags over here.

If you do not wish to append the flags when you run ng build, you should set it on your configurations at the angular.json file.

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
     .
     .
     .
  }
}

Upvotes: 51

Related Questions