karott7 最近的时间轴更新
karott7

karott7

V2EX 第 339178 号会员,加入于 2018-08-07 14:35:48 +08:00
今日活跃度排名 6666
请问线上 web 项目如何自动更新?
程序员  •  karott7  •  1 天前  •  最后回复来自 Finnn
54
做 App + H5 混合应用的请进,想听听看看
程序员  •  karott7  •  5 天前  •  最后回复来自 karott7
33
请问哪些电商打印快递单控件都用了什么技术?
程序员  •  karott7  •  106 天前  •  最后回复来自 forever149
8
出 MBP 8/256/灰色 电池循环一次
  •  1   
    二手交易  •  karott7  •  352 天前  •  最后回复来自 karott7
    2
    求助各位吴彦祖!电信 50m 网络很差吗?
    宽带症候群  •  karott7  •  2021-06-05 09:35:48 AM  •  最后回复来自 karott7
    23
    请问哪里 iphone11 最便宜?
    iPhone  •  karott7  •  2021-05-31 10:42:10 AM  •  最后回复来自 AlwaysTY
    17
    想问问各位 V 友接这样一个私活会报价多少?
    外包  •  karott7  •  2021-05-06 16:30:18 PM  •  最后回复来自 linktom
    16
    各位公司项目经理或者产品会记录发布日志和版本包吗?
    问与答  •  karott7  •  2021-01-29 16:07:12 PM  •  最后回复来自 wzzzx
    1
    最近研究网页性能优化,于是打开了淘宝
    程序员  •  karott7  •  2020-07-07 14:33:38 PM  •  最后回复来自 peterjose
    12
    karott7 最近回复了
    1 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @janus77 你这么做完全没考虑资源加载速度的问题,万一刚好网络波动呢?万一更新的 js 资源过大呢?还有 load 的时候屏幕会闪烁吧,这体验也不好。
    再说我从头到尾都没说一定要实时更新。
    2 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @star7th 也不能说是假需求,只能说场景有限,自动售货机是一个场景
    2 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @shengchao 不需要用 service worker ,我就用 fetch('/') 方法每五分钟请求一次,拿到响应头 etag 对比一下,不一样的话就表示版本更新,然后我在适当的时机 location.reload() 就更新版本了
    2 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @menglizhi2333 我觉得没必要做成 PWA ,按照 #28 的方案,我觉得已经可以完成这个功能了,虽然有点瑕疵,但是对于 js 体积不大的项目来说已经完全够用了
    2 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @blankmiss 我不懂灰度部署,不过#15 的方案中对比以文件内容生成 hash 值其实更好一点,线上项目也可能遇到回滚。
    还有一种方式,fetch('/') 拿到 http etag 响应头,这也是个 hash 值,服务器自动生成,直接对比这个就好了
    2 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @heishu 抱歉,#10 的话我说错了,不是‘请求’,是请问;
    我觉得不用后端参与,越少人参与越好
    3 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @opengps '想知道如何在用户不点击刷新或者不重开网页的情况下让用户获取最新版本代码?'
    有前提,在用户不点击刷新,‘用户’
    3 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @opengps 我没有要求无感体验哦
    3 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @neoblackcap @opengps @dcsuibian @ryougifujino

    我觉得大家都把这个功能实现想复杂了,不必用 websocket ,也不搞热更新,也不用其他同事配合,只要前端一个人能就能完成。帖子开头和 #7 楼也把前提说清楚了,这个方案是针对 to b 的,比如自动售货机,肯定有一段空闲时用户不在使用的。
    其实有些人已经说到点子上了,自动更新版本肯定得用 js 执行 location.reload(),肯定得增加版本号(但这个版本号不用是 x.y.z 的形式,应为要额外为版本判断写代码);

    我昨晚也实验了一下,因为我目前就在做自动收银机的项目,大家看看这个方案咋样:
    -- 给 index.html 文件设置 http 缓存响应头 no-store 或者 no-cache ,保证每次拿到的 index.html 文件都是最新的
    -- 给 js/css/img 等其他资源设置一个比较长时间的缓存响应头,比如一年。
    -- 每次打包都给 index.html 文件中的 html 元素增加当前打包的时间戳,打包后的 <html /> 元素就变成了 <html data-timestamp="..." />, 这个时间戳其实就是版本号,因为我们只需要探测最新版本
    -- 我在全局增加一个每隔几分钟获取 index.html 的请求,fetch('/').then(response => const bodyString = response.text()), 拿到 document 字符串,再用正则解析出 data-timestamp 去和 document.documentElement.dataset.timestamp 对比,如果比这个值大,就是最新版代码,然后再检测用户没操作多少秒执行 location.reload(), 这样就更新代码了

    再说下 location.reload() 的执行前怎么才能不破坏用户体验
    - 如果是自动售卖机,我会给个 3 秒倒计时的弹窗,有文案提示系统检测到版本更新,即将更新,倒计时结束后就 reload
    - 如果是后台管理,我会像 vscode 每次更新一样,右下角给个提示,让用户自己觉得是否更新

    这个方案我昨天以为能最小代价更新代码,比如我只更新了一个 js 文件,我就希望刷新后除了这个 js 文件其他文件都能走缓存;其实不是,因为打包工具(比如 rollup )不止会给该 js 更新 hash ,所有引入该 js 文件的文件名中的 hash 都会改变,这就导致该 js 的祖先文件都不能走缓存了,现在服务器都是按请求收费的,这样肯定不划算,但目前没办法。

    不过如果你把外部库( node_modules )都单独分割出来,这个 js 文件(一般称为 vendor )基本是不变的,所以我觉得即使是在弱网环境下,reload 也不会太慢。

    不知道大家咋看?
    3 天前
    回复了 karott7 创建的主题 程序员 请问线上 web 项目如何自动更新?
    @blankmiss 我想过,其实不会,因为有 http 缓存配合,更新版本一般只更新几个文件,没更新的文件会走缓存。我不会也不想存任何文件在 storage 里;再说网络不好,那请求也走不通,那得不好页面也没事。
    你的方案和我想的一样,轮训,然后等用户没操作了就主动刷新浏览器。但我想知道你是如何去知道有版本更新的?
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4725 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 03:06 · PVG 11:06 · LAX 19:06 · JFK 22:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.