【單頁面 】發版後如何【通知用戶端更新】

【單頁面 】發版後如何【通知用戶端更新】
現象描述：

首先技術棧,是vue全家桶技術棧。典型spa單頁應用，每次有新功能的上線，都須要主動通知，使用者自主刷新頁面【強刷】，才能出現新功能。

產生緣由：
每次打包發版【代碼有變化】，index.html,網站即入口文件是變化的。
可是在單頁面應用，頁面跳轉，都在同一個瀏覽器線程中，不會再一次請求index.html 資源，即便你對 index.html 資源不緩存策略，即設置響應頭部信息爲cache-control： no-store 也是很差使。用戶還得必須刷新。

那麼解決策略如何，一圖勝千言：

1. 介紹 webpack【4版本】 中 插件如何實現

// 獲取並注入版本號 未寫點【這裏還能夠寫 把版本號 和 項目 名 發送到服務器，做版本記錄】
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = class WebpackVersionPlugin {
  constructor(options = { }) {
    this.options = Object.assign({
      versionName: '$AppVersion'
    }, options)
  }
  apply(complier) {
    const { versionName } = this.options;
    complier.hooks.emit.tapAsync('WebpackVersionPlugin', (compilation, callback) => {
      const { hash } = compilation
// 須要在 index.html 注入變量 【在htmlWebpackPlugin 鉤子裏處理 詳細看官方文檔】     HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'MyPlugin', 
        (data, cb) => {
          const htmlScriptStr = `<script>window.${versionName}="${hash}"</script>`
          // 插入到第一個 script標籤前面
          data.html = data.html.replace(/(<script)/,  `${htmlScriptStr}$1`)
          cb(null, data)
        }
      )
      callback()
    })
  }
}

效果以下：

2 爲何用 location.reoload, 經過輪訓hash版本比較，能夠通知 用戶是否 刷新頁面【ui層面】，是則調用reload,不然不操做