JS前端重新部署通知用户刷新网页

目录
  • 1.目标场景
  • 2.思考解决方案
  • 3.代码实现
  • 4.测试

1.目标场景

有时候上完线，用户还停留在老的页面，用户不知道网页重新部署了，跳转页面的时候有时候js连接hash变了导致报错跳不过去，并且用户体验不到新功能。

2.思考解决方案

如何去解决这个问题 思考中...

如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯，前端部署完之后,后端给个通知，前端检测到Message进行提示，还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往前端推送消息，前端无法给后端发送，我们也不需要给后端发送。

以上方案需要后端配合，奈何公司后端都在忙，需要纯前端实现。

重新进行思考...

根据和小伙伴的讨论得出了一个方案，在项目根目录给个json 文件，写入一个固定的key值然后打包的时候变一下，然后代码中轮询去判断看有没有变化，有就提示。

果然是康老师经典不知道。

但是写完之后发现太麻烦了，需要手动配置json文件，还需要打包的时候修改，有没有更简单的方案， 进行第二轮讨论。

第二轮讨论的方案是根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了.

3.代码实现

interface Options {
    timer?: number
}
export class Updater {
    oldScript: string[] //存储第一次值也就是script 的hash 信息
    newScript: string[] //获取新的值 也就是新的script 的hash信息
    dispatch: Record<string, Function[]> //小型发布订阅通知用户更新了
    constructor(options: Options) {
        this.oldScript = [];
        this.newScript = []
        this.dispatch = {}
        this.init() //初始化
        this.timing(options?.timer)//轮询
    }
    async init() {
        const html: string = await this.getHtml()
        this.oldScript = this.parserScript(html)
    }
    async getHtml() {
        const html = await fetch('/').then(res => res.text());//读取index html
        return html
    }
    parserScript(html: string) {
        const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig) //script正则
        return html.match(reg) as string[] //匹配script标签
    }
    //发布订阅通知
    on(key: 'no-update' | 'update', fn: Function) {
        (this.dispatch[key] || (this.dispatch[key] = [])).push(fn)
        return this;
    }
    compare(oldArr: string[], newArr: string[]) {
        const base = oldArr.length
        const arr = Array.from(new Set(oldArr.concat(newArr)))
        //如果新旧length 一样无更新
        if (arr.length === base) {
            this.dispatch['no-update'].forEach(fn => {
                fn()
            })
        } else {
            //否则通知更新
            this.dispatch['update'].forEach(fn => {
                fn()
            })
        }
    }
    timing(time = 10000) {
         //轮询
        setInterval(async () => {
            const newHtml = await this.getHtml()
            this.newScript = this.parserScript(newHtml)
            this.compare(this.oldScript, this.newScript)
        }, time)
    }
}

代码用法

//实例化该类
const up = new Updater({
    timer:2000
})
//未更新通知
up.on('no-update',()=>{
   console.log('未更新')
})
//更新通知
up.on('update',()=>{
    console.log('更新了')
})

4.测试

执行 npm run build 打个包

安装http-server

使用http-server 开个服务

重新打个包npm run build

这样子就可以检测出来有没有重新发布就可以通知用户更新了。

以上就是JS前端重新部署通知用户刷新网页的详细内容，更多关于JS通知用户刷新网页的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 前端必会的nodejs知识工具模块使用示例详解

    目录 Util 常用的判断属性,在util.types对象 常用的方法和属性 DNS OS 常用的方法和属性 Path 常用的方法和属性 总结 Util nodejs中有许多在框架中常用而我们又不知道的工具模块,本文介绍下这几个工具模块,算是自己的一个知识回顾吧. Node.js 的工具模块 常用的判断属性,在util.types对象 isDate:判断是否是日期格式的变量 isAnyArrayBuffer:判断是否是buffer isAsyncFunction:判断函数是否是异步的 let u

  • JS前端开发模拟虚拟dom转真实dom详解

    目录 引言 虚拟dom的介绍 虚拟dom转换真实dom 总结 引言 经常使用Vue或React的小伙伴肯定对虚拟dom这个词不陌生,虚拟dom的设计是推进前端框架发展的一大变革.今天带大家简单模拟下虚拟dom转换真实dom的js设计.废话不说了,上车吧. 虚拟dom的介绍 介绍 虚拟dom本质是一段js代码,用来模拟dom树的结果. 如下是对一段虚拟dom模拟真实dom的例子 真实dom <div class="box"> <p name="dog"

  • JS前端攻坚Eventbus实现更新示例详解

    目录 引言 全局注册 注册Ebus事件 触发Ebus事件 引言 最近复盘了一下公司的项目,之前一直没有做过相关的Eventbus的案例实现,这篇文章大概简要的介绍一下各个部分是如何实现的,实现的方法比较简单,主要分为三个步骤,分别是全局挂载,注册,以及注册事件的触发. 全局注册 在newVue的时候需要对我们的eventbus进行挂载,挂载方式如下,newvue中包含了需要用到的方法,eventbus的注册需要在beforeCreate钩子中进行实例化,在这里我们的对eventbus在vue的原

  • JS前端性能指标定位FMP使用详解

    目录 什么是FMP? 权重定位 权重计算 节点标记 计算权重值 第一步:简单粗暴,按大小计算 第二步:根据权重值推导主角元素 第三步:根据元素类型取时间 回归验证 什么是FMP? 可能大家对「白屏时间」这个名词并不陌生,他是「刀耕火种」年代,我们收集的页面性能指标之一,随着前端工程的复杂化,白屏时间已经没有什么实质性的意义了,取而代之的就是 FMP. 先来介绍几个与之相关的名词. FP(First Paint):首次绘制,标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点 FCP(First

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

  • JS前端错误监控捕获以及上报方法详解

    目录 前端错误捕获方法 不同场景错误处理方式 错误信息上报 ajax进行上报 image上报 sendBeacon 前端错误捕获方法 前端捕获错误的方法: try..catch:捕获的异常必须是线程执行进入到try...catch且try...catch未执行完的时候抛出来. 语法异常在语法检查阶段就报错了,线程尚未进入try...catch代码块,所以无法捕获到异常. try { a. }catch(e) { console.log('catch error:', e) } 不能捕获setTi

  • JS前端面试手写apply和bind实例

    目录 前言 apply && bind apply && bind 作用 相同点 VS 不同点 轻松手写 手写实现 apply 手写实现 bind 总结 前言 面试官问:“聊一聊你理解的 apply 和 bind.” 于是我便开始开始介绍起这两个知识点,最后顺带提了它们的实现代码. 这不提倒还好,一提就出了大事,一下子给面试官找到了面试题目. 面试官紧接着说:“既然你提到了代码,那就手写一下它俩吧.” 我一下子不知所措.虽然我了解过 apply 和 bind 手写代码,但是

  • JS前端攻坚浅析instanceof实现原理

    目录 正文 instanceof的实现 正文 无论是平时开发还是学习中,对于类型的判断总是非常的重要,常见的类型判断方法有很多,对于每种比较常用的api我们需要对其进行一定的了解,才能更好的判断其中的实现方法,对Js的了解程度才能更深,这篇文章带大家了解一下instanceof的实现 instanceof的实现 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上(来自MDN) 我们先来看下instanceof的用法,有点类似于对于一个父类,生

  • vue.js前端网页弹框异步行为示例分析

    目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情

  • 不刷新网页就能链接新的js文件方法总结

    如何不刷新网页就能链接新的js文件,其实在HTML语言中已经有相关的函数了,就是再添加一个<script src=.....></script>. 函数很简单,叫document.body.appendChild(script); 使用方法如下 <!DOCTYPE html><html><head><meta charset="utf-8"> <script language="javascript

  • js前端获取用户位置及ip属地信息

    js前端获取用户位置及ip属地信息

    目录 写在前面 尝试一:navigator.geolocation 尝试二:sohu 的接口 尝试三:百度地图的接口 写在后面 写在前面 想要像一些平台那样显示用户的位置信息,例如某省市那样.那么这是如何做到的, 据说这个位置信息的准确性在通信网络运营商那里?先不管,先实践尝试下能不能获取. 尝试一:navigator.geolocation 尝试了使用 navigator.geolocation,但未能成功拿到信息. getGeolocation(){ if ('geolocation' in

  • JS前端监控采集用户行为的N种姿势

    目录 引言 通用数据 获取用户信息 获取页面信息 设置时间 特定数据 手动埋点上报 全局自动上报 组件上报 总结 引言 上一篇我们详细介绍了前端如何采集异常数据.采集异常数据是为了随时监测线上项目的运行情况,发现问题及时修复.在很多场景下,除了异常监控有用,收集用户的行为数据同样有意义. 怎么定义行为数据?顾名思义,就是用户在使用产品过程中产生的行为轨迹.比如去过哪几个页面,点过哪几个按钮,甚至在某个页面停留了多长时间,某个按钮点击了多少次,如果有需求都可以记录下来. 但是记录行为数据是一个和业

  • JS实现刷新网页后之前浏览位置保持不变示例详解

    JS实现刷新网页后之前浏览位置保持不变示例详解

    目录 正文 这里有两个方法 方法一:这个比较集中 方法二:cookie存取各封装成函数 正文 在京东上浏览的时候,发现了一个比较人性化的小功能,浏览商品,浏览到一半的时候,如下图所示: 我重新加载网页,刷新之后,滚动条依然定位在我刚刚浏览的位置,这个小功能感觉还不错,挺方便的. 具体是怎么实现的呢,去网上大概查了一下. 这个是使用滚动条属性scrollTop来实现的. 基本实现流程:滚动条移动的时候,将滚动条实时的位置存入Cookie或者localstorage中,但是一些老旧的浏览器版本对lo

  • JS中showModalDialog关闭子窗口刷新主窗口用法详解

    本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法.分享给大家供大家参考,具体如下: 网上找了好长时间 大都是window.opener.location.reload(),等等 都不是我想要的 最后终于发现了一个 想知道的就往下看看吧 showModalDialog和showModelessDialog 一.showModalDialog和showModelessDialog有什么不同? showModalDialog:被打开后就会始终保持输入焦点.除非对话框被关闭,否

  • Listloading.js移动端上拉下拉刷新组件

    Listloading.js移动端上拉下拉刷新组件

    listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll

  • JS前端广告拦截实现原理解析

    这篇文章主要介绍了JS前端广告拦截实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 主流的浏览器,默认都开启了广告过滤,这对于用户(浏览者)来说,不但加快了访问网页的速度,而且也避免了勿点一些垃圾色情的东西,可以说绿色了网络环境. 第一.对于正常的广告拦截前端开发需要注意的是: 在请求图片与js文件.接口.文件内容最好不要包含ad.guanggao等关键词,可能被拦截 我们可以用一个请求来判断浏览器有没有开启广告拦截,如果我们需要插入

  • js前端解决跨域的八种实现方案

    由于同源策略的限制,满足同源的脚本才可以获取资源.虽然这样有助于保障网络安全,但另一方面也限制了资源的使用. 那么如何实现跨域呢,以下是实现跨域的一些方法. 一.jsonp跨域 原理:script标签引入js文件不受跨域影响.不仅如此,带src属性的标签都不受同源策略的影响. 正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式. 由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好处理函数.服

  • Vue Element前端应用开发之用户管理模块的处理

    Vue Element前端应用开发之用户管理模块的处理

    1.权限管理模块的设计 我们知道,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理

随机推荐