【单页面 】发版后如何【通知用户端更新】
现象描述:
首先技术栈,是vue全家桶技术栈。典型spa单页应用,每次有新功能的上线,都需要主动通知,使用者自主刷新页面【强刷】,才能出现新功能。
产生原因:
每次打包发版【代码有变化】,index.html,网站即入口文件是变化的。
但是在单页面应用,页面跳转,都在同一个浏览器线程中,不会再一次请求index.html 资源,即使你对 index.html 资源不缓存策略,即设置响应头部信息为cache-control: no-store 也是不好使。用户还得必须刷新。
那么解决策略如何,一图胜千言:
// 获取并注入版本号 未写点【这里还可以写 把版本号 和 项目 名 发送到服务器,作版本记录】
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,否则不操作
页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位...
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移...
filter和backdrop-filter具有一定区别: Filter不仅仅作用于当前元素,后代元素...
HTML5基于flash实现播放RTMP协议视频,具体代码如下所示: !doctype htmlhtmlhea...
作者:Matt Maribojoc 译者:前端小智 来源:stackabuse 有梦想,有干货,微信搜...
第一部分:基础知识 1.与:active 和 :hover这些伪类不一样,他们都是伪元素。 2....
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前...
DevOps 代表开发和运营。 这是一种新的软件开发形式,彻底改变了软件产品的开发...
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态...
解决方案 在父元素中加入position:relative; 子元素中加入position:absolute; ri...