web应用及微信小程序版本更新检测方案实践

  • web应用及微信小程序版本更新检测方案实践已关闭评论
  • 109 次浏览
  • A+
所属分类:Web前端
摘要

背景:   随着项目体量越来越大,用户群体越来越多,用户的声音也越来越明显;关于应用发版之后用户无感知,导致用户用的是仍然还是老版本功能,除非用户手动刷新,否则体验不到最新的功能;这样的体验非常不好,于是我们团队针对该问题给出了相应的解决方案来处理;

技术栈:vue3+ts+vite+ant-design-vue

背景:

  随着项目体量越来越大,用户群体越来越多,用户的声音也越来越明显;关于应用发版之后用户无感知,导致用户用的是仍然还是老版本功能,除非用户手动刷新,否则体验不到最新的功能;这样的体验非常不好,于是我们团队针对该问题给出了相应的解决方案来处理;

技术栈:vue3+ts+vite+ant-design-vue

1、web应用版本检测方案:

        1.1、基于vite开发自定义插件version-update,vite打包流程运行version-update插件在项目结构目录public文件夹下生成version.json文件,通过读取version.json文件内容与服务器上的资源文件作为版本更新的比对依据

 1 /** src/plugin/versionUpdate.ts  **/  2 import fs from 'fs'  3 import path from 'path'  4 interface OptionVersion {  5   version: number | string  6 }  7 interface configObj extends Object {  8   publicDir: string  9 } 10  11 const writeVersion = (versionFileName: string, content: string | NodeJS.ArrayBufferView) => { 12   // 写入文件 13   fs.writeFile(versionFileName, content, (err) => { 14     if (err) throw err 15   }) 16 } 17  18 export default (options: OptionVersion) => { 19   let config: configObj = { publicDir: '' } 20   return { 21     name: 'version-update', 22     configResolved(resolvedConfig: configObj) { 23       // 存储最终解析的配置 24       config = resolvedConfig 25     }, 26  27     buildStart() { 28       // 生成版本信息文件路径 29       const file = config.publicDir + path.sep + 'version.json' 30       // 这里使用编译时间作为版本信息 31       const content = JSON.stringify({ version: options.version }) 32       /** 判断目录是否存在 */ 33       if (fs.existsSync(config.publicDir)) { 34         writeVersion(file, content) 35       } else { 36         /** 创建目录 */ 37         fs.mkdir(config.publicDir, (err) => { 38           if (err) throw err 39           writeVersion(file, content) 40         }) 41       } 42     } 43   } 44 }

  1.2、将该文件作为插件放入到vite的plugin中去执行,并在vite构建过程中声明一个全局变量process.env.VITE__APP_VERSION__(这里仅仅只是一个变量,只用来记录打包时间和服务器json内容对比),值为当前时间戳

  1 /** vite.config.ts  **/   2 import { defineConfig } from 'vite'   3 import vue from '@vitejs/plugin-vue'   4 import vueJsx from '@vitejs/plugin-vue-jsx'   5 import VueSetupExtend from 'vite-plugin-vue-setup-extend'   6 import { visualizer } from 'rollup-plugin-visualizer'   7 import viteCompression from 'vite-plugin-compression'   8 import versionUpdatePlugin from './src/plugins/versionUpdate' //Rollup 的虚拟模块   9 // vite.config.ts  10 import type { ViteSentryPluginOptions } from 'vite-plugin-sentry'  11 import viteSentry from 'vite-plugin-sentry'  12 // @ts-ignore  13 const path = require('path')  14   15 const NODE_ENV = process.env.NODE_ENV  16 const IS_PROD = NODE_ENV === 'production'  17 const CurrentTimeVersion = new Date().getTime()  18 /*  19   Configure sentry plugin  20 */  21 const sentryConfig: ViteSentryPluginOptions = {  22   url: 'https://sentry.jtexpress.com.cn',  23   authToken: '85ceca5d01ba46b2b6e92238486250d04329713adf5b4ef68a8e094102a4b6e1',  24   org: 'yl-application',  25   project: 'post-station',  26   release: process.env.npm_package_version,  27   deploy: {  28     env: 'production'  29   },  30   setCommits: {  31     auto: true  32   },  33   sourceMaps: {  34     include: ['./dist/static/js'],  35     ignore: ['node_modules'],  36     urlPrefix: '~/static/js'  37   }  38 }  39   40 // https://vitejs.dev/config/  41 export default defineConfig({  42   define: {  43     // 定义全局变量  44     'process.env.VITE__APP_VERSION__': CurrentTimeVersion  45   },  46   plugins: [  47     IS_PROD && versionUpdatePlugin({  48       version: CurrentTimeVersion  49     }),  50     vueJsx(),  51     vue(),  52     VueSetupExtend(),  53     visualizer(),  54     // gzip压缩 生产环境生成 .gz 文件  55     viteCompression({  56       verbose: true,  57       disable: false,  58       threshold: 10240,  59       algorithm: 'gzip',  60       ext: '.gz'  61     }),  62     IS_PROD && viteSentry(sentryConfig)  63   ],  64   resolve: {  65     alias: {  66       // @ts-ignore  67       '@': path.resolve(__dirname, 'src')  68     }  69   },  70   css: {  71     preprocessorOptions: {  72       less: {  73         modifyVars: {  74           // antd 自定义主题 https://www.antdv.com/docs/vue/customize-theme-cn  75           'primary-color': '#1890ff',  76           'link-color': '#1890ff',  77           'border-radius-base': '2px'  78         },  79         additionalData: '@import "@/assets/style/common.less";',  80         javascriptEnabled: true  81       }  82     }  83   },  84   server: {  85     host: '0.0.0.0',  86     port: 8080,  87     open: false,  88     https: false,  89     proxy: {}  90   },  91   build: {  92     minify: 'terser',  93     terserOptions: {  94       compress: {  95         /* 清除console */  96         drop_console: true,  97         /* 清除debugger */  98         drop_debugger: true  99       } 100     }, 101     rollupOptions: { 102       output: { 103         chunkFileNames: 'static/js/[name]-[hash].js', 104         entryFileNames: 'static/js/[name]-[hash].js', 105         assetFileNames: 'static/[ext]/[name]-[hash].[ext]', 106         manualChunks(id) { 107           //静态资源分拆打包 108           if (id.includes('node_modules')) { 109             return id.toString().split('node_modules/')[1].split('/')[0].toString() 110           } 111         } 112       } 113     }, 114     sourcemap: IS_PROD 115   } 116 })

  1.3、封装全局方法,请求当前域名下的/version.json资源,将vite中定义的全局变量和当前域名下的json文件内容做对比,如果不一致,我们则认为发布了新版本

 1 /** src/utils/checkVersion.ts **/  2 import { Modal } from 'ant-design-vue'  3 export default function versionCheck() {  4   const timestamp = new Date().getTime()  5   //import.meta.env.MODE 获取的是开发还是生产版本的  6   if (import.meta.env.MODE === 'development') return  7   8   fetch(`/version.json?t=${timestamp}`)  9     .then((res) => { 10       return res.json() 11     }) 12     .then((response) => { 13       if (process.env.VITE__APP_VERSION__ !== response.version) { 14         Modal.confirm({ 15           title: '发现新版本', 16           content: '检测到最新版本,刷新后立即使用...', 17           okText: '立即更新', 18           cancelText: '暂不更新', 19           onOk() { 20             window.location.reload() 21           } 22         }) 23       } 24     }) 25 }

        1.4 、在layout全局文件中,监听路由变化,去调版本检测的方法来决定是否弹出提醒(尊重用户的选择,是否更新页面由用户来决定)

1 /** src/layout/index.vue **/ 2  watch( 3     () => router.currentRoute.value, 4     (newValue: any) => { 5       /** 判断是否有更高的版本 */ 6       checkVersion() 7     }, 8     { immediate: true } 9   )

 

2、微信小程序应用版本检测方案:

 流程图:

web应用及微信小程序版本更新检测方案实践

  技术栈:Taro-vue+ts+nut-ui (京东物流风格轻量移动端组件库)

   2.1、基于微信开发文档提供的getUpdateManager版本更新管理器api去实现版本更新的检测与新版本应用的下载,封装全局方法

 1 /** 检查小程序版本更新 */  2 export function checkMiniProgramVersion() {  3   if (Taro.canIUse('getUpdateManager')) {  4     const updateManager = Taro.getUpdateManager();  5     updateManager.onCheckForUpdate(function (res) {  6       // 请求完新版本信息的回调  7       if (res.hasUpdate) {  8         Taro.showModal({  9           title: '新版本更新提示', 10           content: '检测到新版本,是否下载新版本并重启小程序?', 11           success: function (res) { 12             if (res.confirm) { 13               downloadAndUpdate(updateManager); 14             } 15           }, 16         }); 17       } 18     }); 19   } else { 20     Taro.showModal({ 21       title: '新版本更新提示', 22       showCancel: false, 23       content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。', 24       success: function () { 25         Taro.exitMiniProgram(); 26       }, 27     }); 28   } 29 } 30  31 /** 新版本应用下载 */ 32 export function downloadAndUpdate(updateManager) { 33   Taro.showLoading(); 34   updateManager.onUpdateReady(function () { 35     Taro.hideLoading(); 36     Taro.showModal({ 37       title: '新版本更新提示', 38       content: '新版本已经准备好,是否重启应用?', 39       success: function (res) { 40         if (res.confirm) { 41           // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启 42           updateManager.applyUpdate(); 43         } 44       }, 45     }); 46   }); 47  48   updateManager.onUpdateFailed(function () { 49     Taro.showLoading(); 50     Taro.showModal({ 51       title: '新版本更新提示', 52       showCancel: false, 53       content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~', 54       success: function () { 55         // 退出应用 56         Taro.exitMiniProgram(); 57       }, 58     }); 59   }); 60 }

  2.2、在app.ts入口文件onLaunch的生命周期钩子函数中去调用方法检测版本

 1 // src/app.ts  2 import { createApp } from 'vue';  3 import Taro from '@tarojs/taro';  4 import './app.scss';  5 import store from './store';  6 import installPlugin from '@/plugins/index';  7 import { wxLogin, checkMiniProgramVersion } from '@/utils/common';  8   9 const App = createApp({ 10   onLaunch() { 11     /** 检测小程序版本 */ 12     checkMiniProgramVersion(); 13   }, 14 }); 15  16 App.use(store); 17 installPlugin(App); 18  19 export default App;