跳转到内容

PWA 离线与更新:随时随地工作,保持最新版本

了解 SnowB BMF 如何作为渐进式 Web 应用离线工作、自动更新如何保持工具最新,以及如何手动检查新版本。

SnowB BMF 是渐进式 Web 应用 (PWA),第一次访问后就能离线用。Service Worker 自动缓存所有应用资源(HTML、CSS、JavaScript、字体和图标),断网也能创建和编辑位图字体。

  1. 第一次访问:浏览器通过 Service Worker 下载并缓存所有文件。
  2. 离线就绪通知:屏幕左下角弹出绿色通知:“App is ready for offline use”,5 秒后自动消失。
  3. 之后再访问:应用从本地缓存加载,有没有网都一样。

所有项目数据存在浏览器 IndexedDB 里,不会发到任何服务器。

  • 字体和项目一直在本地。
  • 不会给外部服务器发数据。
  • 项目跨会话保留(清浏览器数据除外)。

数据持久化详情见项目管理

有网的时候 SnowB BMF 发了新版本,Service Worker 自动检测。更新不会打断你的工作,你来决定什么时候更新。

Service Worker 在后台检查新版本。有新版本时通知会引导你:

  1. 更新下载中:蓝色通知带刷新图标,新版本在后台下载。
  2. 更新就绪:黄色通知:“New version available, click update to experience now”,带 Update 按钮。
  3. 应用更新:点 Update 开始更新,显示加载动画和 “Updating to new version…”
  4. 更新完成:页面自动刷新,加载新版本。

更新失败会弹红色通知和 Retry 按钮。点 Retry 重试。还是不行的话,刷新页面或清浏览器缓存。

随时可以手动检查。

  1. 通知面板有 “Check for Updates” 按钮。
  2. 点一下就开始检查,会显示加载动画。
  3. 有新版本的话,弹更新通知。
  4. 没有新版本,通知 2 秒后自动关闭。
  5. 通知上显示 “Last checked: {time}“,是你上次检查的时间。

检查失败(比如没网),弹错误通知:“Failed to check for updates”,带 Retry 按钮。

屏幕左下角的彩色通知显示 Service Worker 和更新状态:

状态级别图标消息操作
离线就绪成功(绿色)对勾”App is ready for offline use”5 秒后自动消失
更新下载中信息(蓝色)刷新正在下载新版本无(自动进行)
更新就绪警告(黄色)更新箭头”New version available, click update to experience now”Update 按钮
更新中警告(黄色)加载动画”Updating to new version…”更新期间按钮禁用
更新失败错误(红色)错误图标错误信息Retry 按钮
检查失败错误(红色)错误图标”Failed to check for updates”Retry 按钮

所有通知都能点关闭 (X) 按钮手动关掉,但点通知区域外面不会关闭。