程序员

【单页面 】发版后如何【通知用户端更新】

作者:admin 2021-05-09 我要评论

【单页面 】发版后如何【通知用户端更新】 现象描述: 首先技术栈,是vue全家桶技术栈。典型spa单页应用,每次有新功能的上线,都需要主动通知,使用者自主刷新页...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

【单页面 】发版后如何【通知用户端更新】
现象描述:

首先技术栈,是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,否则不操作


本文转自网络,版权归原作者所有,原文链接:https://segmentfault.com/a/1190000039968885

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • “鸿蒙设备开发”选“址” --&gt;

    “鸿蒙设备开发”选“址” --&gt;

  • Nextcloud是如何成为终极开源生产力套

    Nextcloud是如何成为终极开源生产力套

  • 手把手教你用Pycharm连接远程Python环

    手把手教你用Pycharm连接远程Python环

  • Windows 10X镜像生成工具发布:任意PC

    Windows 10X镜像生成工具发布:任意PC

腾讯云代理商
海外云服务器