Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

给 manifest 加超时

  在前端页面使用 manifest 可以让页面像 native 一样快。但是 manifest 并没有自带的超时机制,它的更新机制是每次访问时检测 manifest 文件,即便有更新也是用户下一次访问页面时才会使用使用新的资源。可实际上用户的两次访问时间间隔可能超过一个月甚至更久,那应该怎么办?
  上个月对一个开启 manifest 的页面做了接口迁移后发现旧接口的调用量一直掉不下来。时隔一个月依然有小部分用户使用的是旧版本。这导致了旧版本接口迟迟不能下线,增加了后端的维护成本。
  所以让 manifest 缓存自然更新是不现实的,用户可能间隔好久一段时间不用某个产品,然后某天重新打开。如果旧接口已经下线就会看到一个报错的页面。虽然这时候刷新即可解决问题,但也会因此流失掉部分用户。所以我们希望缓存是有超时的,比如用户如果一个月都没访问页面,一个月后进来就强行清掉缓存,不再走旧的 manifest 缓存。
  虽然 manifest 没有自带的缓存实现,但是它提供的一系列事件可以完成这件事。比如我们在 cached 事件中往 localStorage 记录当前时间,这个事件在首次访问的 manifest 生效时触发。然后在后续的 updateready 事件中检测当前时间减去之前记录的时间是否超过一个月,如果超过则直接强制刷新页面(因为这时已经 update ready,刷新页面就可以得到最新的资源)。否则什么也不做,使用 manifest 默认的机制。
applicationCache.addEventListener('cached', event => { localStorage.setItem('manifest:cached', Date.now()); }); applicationCache.addEventListener('updateready', event => { let diff = Date.now() - localStorage.getItem('manifest:cached'); localStorage.setItem('manifest:cached', Date.now()); if (diff > 30 * 864E5) location.reload(); });   之所以不在每次 updateready 后都执行 reload 是因为 relaod 的用户体验并不好。假如用户的网络有丢包,manifest 检测可能 10 秒后才完成。在检测完成之前,用户可能已经开始填写某个表单了,此时 reload 可能让用户丢失表单数据。总之,我们应该尽量避免 reload,只有在用户时隔一个月都不打开页面的极端情况下(可能只有 5% 的用户会中招)才去 reload。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^