angular web應用更新後強制刷新瀏覽器緩存的一種解決方案

先後臺分離的WEB應用項目上線時，會因瀏覽器的自動緩存策略而發生一些錯誤。好比項目的先後臺同時由V1.0升級爲了V1.1。此時因爲瀏覽器緩存，用戶在打開項目地址時仍然使用了緩存中的V1.0的代碼。這便會發生V1.0的前臺調用V1.1的後臺的BUG。

本文以angular爲例，闡述一種前臺更新後項目瀏覽器自動刷新的解決方案。

本文示例代碼地址：https://stackblitz.com/edit/angular-2k4qy2

基本思路

想實現前臺若是更新後便從新強制瀏覽器刷新的功能，則須要加入一個版本號來進行控制。在系統啓動時讀取前臺的版本號，而後與服務器上的版本號進行比對。若是版本號相同，則說明瀏覽器當前加載的前臺與服務器提供的前臺的版本是統一的，則什麼也不作；若是版本號不一樣，則說明瀏覽器當前加載的版本與服務器提供的版本不統一，則強制瀏覽進行刷新以清除緩存帶來的影響。

加入版本號

在項目的src/assets文件夾中新建config.json，並加入如下信息以記錄當前應用的版本號：

{
    "version":"1.0.0"
}

線上演示的需求，咱們必須將其創建在src/assets中。實際的生產項目中，能夠將其按需創建在src文件夾下的任意位置。

獲取版本號

若要對版本號進行比對，則須要獲取兩個版本號：第1個爲WEB應用運行的版本號，第2個爲服務器提供的WEB應用的版本號。

當這兩個版本號不統一時，則說明當前運行的版本與服務器提供的版本不一致，便應進行強制刷新。

運行應用的版本號

export class AppComponent implements OnInit {
  private config: {version: string}; ➊
  ngOnInit() {
    this.config = require('./../assets/config.json'); ➋
    console.log(this.config.version);
  }
}

• ➊ 聲明config類型
• ➋ 使用require加載config.json文件，並將其值賦予this.config

服務器提供應用的版本號

export class AppComponent implements OnInit {
  constructor(private httpClient: HttpClient) {
  }
  private config: {version: string};
  ngOnInit() {
    this.config = require('./../assets/config.json');
    console.log(this.config.version);
    this.httpClient.get<{version: string}>('/assets/config.json')
      .subscribe(config => {
        console.log(config);
      }); ➊
  }
}

• ➊ 獲取config.json並打印

值得注意的是，在請求後臺的config.json時，瀏覽器最終調用的可能也是緩存的數據，這時候就須要在請求的header上作點文章，強制瀏覽器在請求config.json時棄用緩存：

ngOnInit() {
    this.config = require("./../assets/config.json");
    console.log(this.config.version);

    const headers = new HttpHeaders()
      .set('Cache-Control', 'no-cache')
      .set('Pragma', 'no-cache'); ➊
      
    this.httpClient
      .get<{ version: string }>("/assets/config.json", {headers➋})
      .subscribe(config => {
        console.log(config);
      });
  }

• ➊ 新建不使用緩存的header
• ➋ 在請求中加入header信息，此請求則不使用瀏覽器緩存

強制刷新當前頁面

location中提供了reload(true)方法來進行頁面的強制刷新：

.subscribe(config => {
        if (config.version !== this.config.version) {
          location.reload(true); ➊
        }
      });

• ➊ 強制刷新頁面

但不知何種緣由，該方法被標識爲棄用。簡單的查了一些資料，有人說這個方法可能在後面的版本中被瀏覽器棄用，因而使用如下代碼進行頁面刷新操做：

if (config.version !== this.config.version) {
          this.httpClient
            .get(""➊, { headers➋, responseType: "text"➌ })
            .subscribe(() => location.reload()➍);
        }

• ➊ 從新拉取首頁
• ➋ 禁用緩存
• ➌ 響應類型爲text
• ➍ 此時再進行reload操做，則瀏覽器即便調用了緩存，該緩存也是➊中拉取的服務器中最新的前臺應用了。

總結

在前臺後分離的應用中，自動的進行緩存的判斷當有助於客服人員大幅的減輕壓力，加強用戶對系統的粘稠度。本文使用暴露前臺的版本文件並進行比對的方法，來判斷是否要強制刷新瀏覽器緩存；再結合httpClient發請對loading頁的請求，以達到間接的強制刷新瀏覽器緩存的目的。