greatauk / plugin-web-update-notification Goto Github PK
View Code? Open in Web Editor NEWDetect webpage updates and notify user to reload. support Vite, Umijs, and Webpack.
License: MIT License
Detect webpage updates and notify user to reload. support Vite, Umijs, and Webpack.
License: MIT License
In Vite Vue 3 width typescript
I'm receiving this error
I try to use injectFileBase but when I'm building always receive this error
How can I solve
Thansk
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6917) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
silence属性值目前不支持动态设置,silence的值除了人工可知的情况下控制,部分场景存在运行时才能确定值的情况,能否考虑增加一个功能?
require() of ES modules is not supported
尝试了一下,感觉效果很棒,不过针对多语言的场景不知道是否能支持?
没有属性不支持忽略后再次提醒嘛
TypeError: hook is not a function
at applyHtmlTransforms (file:///Users/xxx/projects/node_modules/vite/dist/node/chunks/dep-2faf2534.js:43464:27)
at Object.generateBundle (file:///Users/xxx/projects/node_modules/vite/dist/node/chunks/dep-2faf2534.js:43384:32)
at file:///Users/xxx/projects/node_modules/rollup/dist/es/shared/node-entry.js:25544:40
node version: v16.20.2
vite/dist/node/chunks/dep-2faf2534.js:43464:27
part code ↓
for (const hook of hooks) {
const res = await hook(html, ctx);
if (!res) {
continue;
}
if (typeof res === 'string') {
html = res;
}
else {
let tags;
if (Array.isArray(res)) {
tags = res;
}
else {
html = res.html || html;
tags = res.tags;
}
const headTags = [];
const headPrependTags = [];
const bodyTags = [];
const bodyPrependTags = [];
for (const tag of tags) {
if (tag.injectTo === 'body') {
bodyTags.push(tag);
}
else if (tag.injectTo === 'body-prepend') {
bodyPrependTags.push(tag);
}
else if (tag.injectTo === 'head') {
headTags.push(tag);
}
else {
headPrependTags.push(tag);
}
}
html = injectToHead(html, headPrependTags, true);
html = injectToHead(html, headTags);
html = injectToBody(html, bodyPrependTags, true);
html = injectToBody(html, bodyTags);
}
}
return html;
}
package.json:
"name": "arco-design-pro-vue",
"description": "Arco Design Pro for Vue",
"version": "1.0.0",
"private": true,
"author": "ArcoDesign Team",
"license": "MIT",
"scripts": {
"dev": "vite --config ./config/vite.config.dev.ts",
"build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
"preview": "npm run build && vite preview --host",
"type:check": "vue-tsc --noEmit --skipLibCheck"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@arco-design/web-vue": "^2.53.3",
"@tinymce/tinymce-vue": "^5.1.1",
"@vueuse/components": "^10.1.0",
"@vueuse/core": "^10.1.0",
"arco-design-pro-vue": "^2.7.2",
"axios": "^0.24.0",
"clipboard": "^2.0.11",
"dayjs": "^1.11.10",
"echarts": "^5.4.3",
"html2canvas": "^1.4.1",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"mathjs": "^11.11.1",
"mitt": "^3.0.1",
"nprogress": "^0.2.0",
"pinia": "^2.0.23",
"qrcode.vue": "^3.4.1",
"query-string": "^8.0.3",
"sortablejs": "^1.15.0",
"spark-md5": "^3.0.2",
"stylelint-config-prettier": "9.0.5",
"uuid": "^9.0.1",
"vue": "^3.2.40",
"vue-echarts": "^6.2.3",
"vue-router": "^4.0.14",
"vue3-draggable-resizable": "^1.6.5",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@arco-plugins/vite-vue": "^1.4.5",
"@plugin-web-update-notification/vite": "^1.7.0",
"@types/lodash": "^4.14.200",
"@types/mockjs": "^1.0.9",
"@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.15.4",
"@types/spark-md5": "^3.0.3",
"@types/uuid": "^9.0.6",
"@typescript-eslint/eslint-plugin": "^5.40.0",
"@typescript-eslint/parser": "^5.40.0",
"@vitejs/plugin-vue": "^3.1.2",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"@vue/babel-plugin-jsx": "^1.1.5",
"consola": "^2.15.3",
"cross-env": "^7.0.3",
"less": "^4.1.3",
"mockjs": "^1.1.0",
"rollup": "^3.29.4",
"rollup-plugin-visualizer": "^5.11.0",
"typescript": "^4.8.4",
"unplugin-vue-components": "^0.24.1",
"vite": "^3.2.5",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-imagemin": "^0.5.3",
"vite-svg-loader": "^3.6.0",
"vue-tsc": "^1.6.5"
},
"engines": {
"node": ">=14.0.0"
},
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china",
"rollup": "^3.29.4",
"gifsicle": "5.2.0"
}
}
Umijs: 3.5.37
@plugin-web-update-notification/umijs: 1.5.1
config.ts配置:
plugins: ['@plugin-web-update-notification/umijs'],
webUpdateNotification: {
logVersion: true,
notificationProps: {
title: '📢 系统升级通知',
description: '系统版本已更新,请刷新页面后使用',
buttonText: '刷新',
dismissButtonText: '忽略',
},
notificationConfig: {
placement: 'topRight',
},
} as WebUpdateNotificationOptions
删除notificationConfig: {placement: 'topRight'})后则不报错。
API: /pluginWebUpdateNotice/web_version_by_plugin.json
The API request reported an error, What is the reason for this, and under what circumstances it will appear
报错信息:DevTools failed to load source map: Could not load content for http://192.168.1.194:3000/pluginWebUpdateNotice/webUpdateNoticeInjectScript.global.js.map: HTTP 错误:状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE
html中的webUpdateNoticeInjectScript.global.js有缓存导致一直提示有更新。
是不是应该加上版本号或时间戳。
【@plugin-web-update-notification/vite'】1.7.0
import { webUpdateNotice } from '@plugin-web-update-notification/vite'
webUpdateNotice({
versionType: 'custom',
customVersion: '1.0.1', // default: '0.0.0
logVersion: true,
checkInterval: 0,
notificationProps: {
title: "📢 system update",
description: "System update, please refresh the page",
buttonText: "refresh",
dismissButtonText: "dismiss",
},
notificationConfig: {
primaryColor: "red",
secondaryColor: "blue",
placement: "topRight",
},
})
因为目前我司的产品打包后会在根目录生成一个 version.js 文件,文件是一段git_commit_hash+时间,想通过直接读取这个根目录文件的内容来判断是否更新,所以大佬这边能否支持自定义更新文件path以及自定义文件嘛
window.pluginWebUpdateNotice_.onClickRefresh = () => window.location.reload()
我放在 入口文件 main.js 中的,
控制台 console.log(window.pluginWebUpdateNotice_) 也没有
目前我的项目中使用的是vite是 2.9的!请问作者是否有考虑兼容 低版本的vite ?
这是什么原因啊? 是不是需要强制刷新之类的?
web_version_by_plugin.json use "t=${performance.now()}" as suffix.
When there is a high number of visiting users and the website utilizes a CDN, it can result in the file being cached and frequently prompting the need to refresh the page. Is it possible to change the file's suffix to a timestamp?
请问是否支持umi4 按照文档设置后不生效 umi4版本
rendering chunks (13)...[vite:build-html] hook is not a function
error during build:
TypeError: hook is not a function
at applyHtmlTransforms (D:\vscodeProject\vue\vite-chatGPT\node_modules\vite\dist\node\chunks\dep-9c153816.js:21725:27)
at Object.generateBundle (D:\vscodeProject\vue\vite-chatGPT\node_modules\vite\dist\node\chunks\dep-9c153816.js:21677:32)
at D:\vscodeProject\vue\vite-chatGPT\node_modules\rollup\dist\shared\rollup.js:22841:40
error Command failed with exit code 1.
spa项目 部署以后, 点击路由跳转, 并没有显示notification
之前设置了checkInterval为 5 * 1000,生效了,后面修改了参数如下:
plugins: [
new WebUpdateNotificationPlugin({
logVersion: true,
checkInterval: 30 * 1000,
notificationProps: {
title: '检测到有新的版本!',
description: '请使用ctrl + F5 刷新页面,然后点击右上角退出当前用户重新登录体验全新内容',
buttonText: '刷新',
dismissButtonText: '忽略'
},
}),
],
请求间隔还是五秒,弹窗文案也没变,还是默认的那一套。不过每次发版都能检测到。也没报错。。是啥问题呢
new WebUpdateNotificationPlugin({
checkInterval: 1 * 60 * 1000, // 1分钟刷新一次
logVersion: true,
checkImmediately: true,
hiddenDismissButton: true,
notifyProps: {
title: '系统更新',
description: '系统有新版本发布,请刷新界面及时更新!',
buttonText: '刷新'
},
notificationConfig: {
placement: 'topRight',
hiddenDismissButton: true
}
})
操作步骤:
1、提示升级后,点击了刷新
2、关闭窗口
3、再次打开刚才的界面
4、还是提示 升级。
大佬 这个只能是git自动化部署这种才能吗?如果公司是svn可以解决吗
我很喜欢这个插件,感谢作者。
最近更新vite 5 后打包出现提示:
plugin 'vue-vite-web-update-notice' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'vue-vite-web-update-notice' uses deprecated 'transform' option. Use 'handler' option instead.
webpack构建的,项目不是部署在根目录下的,点击刷新之后404,该怎么配置
当有提示时,假如不点或者拒绝刷新, 那么 这个 session 不会有值, 点了之后就会有值
https://mantine.dev/hooks/use-local-storage/
我用的这个 session 库
umi 打包出来缺少 pluginWebUpdateNotice 路径
In the file packages/vite-plugin/src/index.ts, the function webUpdateNotice, line 63 gets the version to put into the json file, line 97 gets the version to put into the index.html file.
When the versionType is build_timestamp, these two values can be different depending on the speed that the code runs, which causes the update notification to pop up repeatedly even when it should not.
Hi, do you mind pointing me to a doc that implements it with react.
1.我在viteConfig中设置
webUpdateNotice({ logVersion: true, versionType: "build_timestamp" })
I'd like have option to refresh page via api or as option, because some of pages should be always up-to-date.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.