前端线上部署,如何通知用户有新版本

这篇具有很好参考价值的文章主要介绍了前端线上部署,如何通知用户有新版本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

version-polling 是一个轻量级的 JavaScript 库,它可以实时检测 web 应用的 index.html 文件内容是否有变化。当服务端发布新版本后,前端会自动弹出更新提示,让用户刷新页面,以加载最新的资源和功能。这样可以提高用户体验和数据准确性。

设计目的

为了解决后端部署之后,如何通知用户系统有新版本,并引导用户刷新页面以加载最新资源的问题。

适用场景

用户在浏览器中打开某 web 应用(通常是后台管理系统)很长时间且未刷新页面时,如果应用有新功能添加或问题修复,用户可能无法及时知道有新版发布。这样会导致用户继续使用旧版,影响用户体验和数据准确性,甚至出现程序报错。

功能特性

  1. 针对前端 web 单页应用而设计

  2. 纯前端技术实现,使用简单,不需要后端支持

  3. 支持 TypeScript

实现原理

  1. 使用 Web Worker API 在浏览器后台轮询请求页面,不会影响主线程运行。

  2. 命中协商缓存,对比本地和服务器请求响应头etag字段值。

  3. 如果etag值不一致,说明有更新,则弹出更新提示,并引导用户手动刷新页面(例如弹窗提示),完成应用更新。

  4. 当页面不可见时(例如切换标签页或最小化窗口),停止实时检测任务;再次可见时(例如切换回标签页或还原窗口),恢复实时检测任务。

浏览器兼容性

适用于支持原生 ES 模块的现代浏览器,具体可参考以下 browserslist 配置

defaults and supports es6-module
maintained node versions

安装

# 本地项目安装
npm install version-polling --save

使用

  1. 通过 npm 引入,并通过构建工具进行打包

// 在应用入口文件中使用: 如 main.js, app.jsx
import { createVersionPolling } from "version-polling";

createVersionPolling({
  appETagKey: "__APP_ETAG__",
  pollingInterval: 5 * 1000, // 单位为毫秒
  silent: process.env.NODE_ENV === "development", // 开发环境下不检测
  onUpdate: (self) => {
    // 当检测到有新版本时,执行的回调函数,可以在这里提示用户刷新页面
    const result = confirm("页面有更新,点击确定刷新页面!");
    if (result) {
      self.onRefresh();
    } else {
      self.onCancel();
    }
    // 强制更新可以用alert
    // alert('有新版本,请刷新页面');
  },
});
  1. 通过 script 引入,直接插入到 HTML,无侵入用法,接入成本最低

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端页面自动检测更新-示例</title>
  </head>
  <body>
    <script src="//unpkg.com/version-polling/dist/version-polling.min.js"></script>
    <script>
      VersionPolling.createVersionPolling({
        appETagKey: "__APP_ETAG__",
        pollingInterval: 5 * 1000,
        onUpdate: (self) => {
          // 当检测到有新版本时,执行的回调函数,可以在这里提示用户刷新页面
          const result = confirm("页面有更新,点击确定刷新页面!");
          if (result) {
            self.onRefresh();
          } else {
            self.onCancel();
          }
        },
      });
    </script>
  </body>
</html>

最佳实践

在项目 index.html 下直接插入 script,类似于百度统计那种用法,具体代码参考:

https://github.com/JoeshuTT/version-polling

注意事项

  • version-polling 需要在支持 web worker 和 fetchAPI 的浏览器中运行,不支持 IE 浏览器

  • version-polling 需要在 web 应用的入口文件(通常是 index.html)中引入,否则无法检测到更新

  • version-polling 需要在 web 应用的服务端配置协商缓存,否则无法命中缓存,会增加网络请求

  • version-polling 需要在 web 应用的服务端保证每次发版后,index.html 文件的 etag 字段值会改变,否则无法检测到更新文章来源地址https://www.toymoban.com/news/detail-716997.html

到了这里,关于前端线上部署,如何通知用户有新版本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端项目部署后,如何提示用户版本更新

    项目部署上线后,特别是网页项目,提示正在操作系统的用户去更新版本非常 important 。一般我们都会用“刷新大法”来清理缓存,但是对于正在操作网页的用户,不造系统更新了,请求的还是老版本的资源。 为了确保用户能够及时获得最新的功能和修复的 bug,我们需要通知

    2024年04月11日
    浏览(37)
  • 线上通过Nginx部署前端工程,并且配置SSL

    介绍、为了更好的帮助大家学习,减少歧义,IP地址我就不隐藏了,公司也是我自己的公司。你们就别来攻击了。 下面给出步骤: 一、前期准备工作 通过在目标服务器上安装宝塔面板、安装redis、mysql、nginx、jdk环境等 1、 2、前端工程通过npm run build 打包成 dist文件 3、在线下打

    2024年02月14日
    浏览(44)
  • 基于微信小程序+Springboot线上租房平台设计和实现【三端实现小程序+WEB响应式用户前端+后端管理】

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟 2022-2024年

    2024年02月08日
    浏览(44)
  • 前端包部署到线上net::ERR_SSL_PROTOCOL_ERROR(跨域/同源策略)

    部署到线上报错一堆文件: js、css、html报如下错误 1.因为服务器用的域名有:https、http两种 部署到线上地址,https开头用第一行代码,http用第二行代码 (本地启用项目一般都是http开头,用第二行代码即可,但线上是https开头,部署时需要更换为下面第一行代码) 2.跨域详解

    2023年04月09日
    浏览(44)
  • nodejs前端项目部署到k8s,导致线上故障的排查与解决方法

    因我们的前后端项目都部署在k8s集群中,前端项目采用npm和node管理 事故背景: 某天前端同事在测试环境更新完一个前端服务后,访问正常,然后按照正常流程上线到生产环境,但是,在生产环境更新完成后,测试同事反馈访问报502错误,我就去服务器排查刚才发布的服务,检查pod状态

    2024年02月02日
    浏览(40)
  • Windows用户如何安装新版本cpolar内网穿透

    在科学技术高度发达的今天,我们身边充斥着各种电子产品,这些电子产品不仅为我们的工作带来极大的便利,也让生活变得丰富多彩。我们可以使用便携的电子设备,记录下生活中精彩和有趣的瞬间,并通过互联网方便的与大家分享。但由于互联网的特性和安全要求,让我

    2024年02月15日
    浏览(42)
  • 微信小程序的订阅消息是一个允许开发者向用户发送重要通知的功能。这里为您展示如何实现小程序订阅消息的基本步骤和代码示例

    步骤 1: 获取模板 ID 首先,您需要登录微信公众平台,进入「小程序管理」后台,找到“设置” “开发设置” “订阅消息”,然后选择并配置所需的模板,记录模板 ID。 步骤 2: 小程序前端请求订阅 在小程序的某个页面或组件中,当用户执行某个操作(例如点击按钮)时,可

    2024年02月04日
    浏览(89)
  • 如何在本地(个人电脑上)安装Tomcat服务器并部署web项目?【2023最新版】

    服务器软件:apache-tomcat-8.5.27 操作系统:Windows 10 64位 家庭版 构成: 硬件 : 电脑 ,提供服务供其它客户电脑访问 软件 : 电脑上安装的服务器软件 ,安装后能提供服务给网络中的其他计算机, 将本地文件映射成一个虚拟的url地址供网络中的其他人访问。 作用: Web服务器

    2024年02月10日
    浏览(95)
  • 小程序进阶-用户消息通知

    在使用或开发小程序过程中,我们会发现消息通知是非常重要的一个环节。我把小程序消息通知分为“ 小程序内通知 ”和“ 微信内通知 ”两种。小程序内通知包含各种步骤提示、错误提示以及各种实时消息通知,这些通知只有在用户进入小程序才会看到。微信内通知则是跳

    2024年02月09日
    浏览(43)
  • 前端如何统计用户在一个页面上的停留时长?

    前面笔者写了一篇关于前端如何对点位的 click 事件 和 impression 事件 埋点的文章 浅谈前端如何做无痕埋点?前端的埋点不仅仅是这两个事件埋点,此外还有 uv(user view,即多少用户访问了当前页面) 、 pv(page view,即当前页面被访问了多少次) 、 用户停留时长 。今天我们

    2024年02月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包