如何实现【前端热部署】？前端部署通知用户刷新页面？

Question

如何实现【前端热部署】？前端部署通知用户刷新页面？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

为什么需要？

• 当前端静态资源被重新部署时，由于用户页面无法感知，导致用户一直在旧的页面上进行操作最终产生异常数据，或者进行页面跳转时由于更新信息没有及时同步，导致页面尝试去加载旧的静态资源文件（css、js）导致失败等

解决方案

• ​Websocket

  • ​使用 webSocket 实现前后端实时通讯，当前端部署完之后，后端通过 websock 发生通知，前端接收到更新消息进行提示或帮助用户刷新页面

• ​EventSource

  • ​EventSource 是服务器推送的一个网络事件接口，其实例会对 HTTP 服务开启一个持久化的连接，以text/event-stream 格式发送事件，会一直保持开启直到被要求关闭
  • ​与 WebSockets 不同的是 ​EventSource 的推送是单向的，只能 服务端 向 客户端 进行推送，不过在【热部署】中是单向推送完全符合要求的

• ​后端判断 version 版本号

  • 由于每次部署会产生一个新的 version 版本号，因此可以在前端发送的每个请求头上携带上上次发布的 version，后端对比 上次 和 当前 version 是否相同，已决定是否 给客户端提示 或 进行资源重定向​

• 前端判断文件 hash 值

  • ​前端资源每次打包后，会生成不同的 hash 值，在客户端可以通过轮询的方式获取页面的 html 结构，即 fetch('/') 的内容，和当前页面的 script 的 hash 值进行对比，不一样则通过提示或刷新的方式实现更新

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。