利用 PWA 或者说 Service Worker 有没有可能做到完全离线的体验?

2021-07-08 23:06:38 +08:00
 nijjba
据我所知 Google Docs 这种可以做到网络断开时, 所有的操作都保存在本地, 网络恢复后再将变动更新到服务器

那么像那些每次操作都依赖网络请求的系统, 如大部分业务系统、表格表单类的管理系统, 能否做到类似 Google Docs 的离线体验呢?
2392 次点击
所在节点    PWA
9 条回复
3dwelcome
2021-07-08 23:16:32 +08:00
我没用楼主提到的技术,但用了类似的理念。

比如同一段表单提交认证代码,服务器上放一套,本地浏览器也放一套一样的,由路由来控制走哪个流程,服务器数据或者本地数据,二选一。理论上可以把用户体验优化到极致。

这个大前提,是服务器和客户端用的语言是一致的,一套代码库。现在有了 wasm 后,世界上所有语言在我眼里看起来,长得都像 JS 。
crclz
2021-07-09 02:37:25 +08:00
谷歌能这么做是因为 Angular 强大的工程化能力允许它这么做,不是因为用了什么黑科技。
不存在什么黑科技。离线的用户体验都是用业务逻辑代码写出来的。不存在哪一种技术可以减轻业务逻辑的负担。

至于具体的业务逻辑,应该是和 git 一样的流程:本地 commit,然后再异步 push 到云端。如果发生冲突,则覆盖,或者强制用户保存到一个新的文档。我没用过 Google Docs,但是 Google Colab 就是这样设计的。

“那么像那些每次操作都依赖网络请求的系统, 如大部分业务系统、表格表单类的管理系统, 能否做到类似 Google Docs 的离线体验呢?”

回答:可以这么做,但是不推荐。如果你按照一般方法进行开发,那么 UI 就是给 api 套一层壳。如果按照能够离线使用的标准进行设计,那么还涉及到 push 的逻辑、并发修改问题、解决冲突的逻辑。既然网络不成问题,那么合并给自己额外的开发任务呢?
test3207
2021-07-09 02:50:50 +08:00
楼上说的对,手写两套逻辑+维护冲突,成本本来就很高了。另外 sw 现在在不同平台和浏览器的实现也略有不同,一不小心就会踩坑,兼容性成本更高了。非技术驱动的团队还是谨慎点考虑……
myCupOfTea
2021-07-09 08:47:55 +08:00
可以是可以 但是成本太高了
可能比写两套系统成本都高很多
codehz
2021-07-09 08:52:53 +08:00
咱之前试过将数据保存到 sqlite 数据库,整个数据库传输到前端,然后提交时通过 session 模块( https://sqlite.org/session.html )生成 patchset,发送给服务端,然后在服务端做冲突合并。
离线不过是推迟提交 patchset 这一步而已)
Mark24
2021-07-09 11:52:42 +08:00
我觉得可以。很未来。
nijjba
2021-07-09 22:16:16 +08:00
@crclz
你说的没错,而且我 F12 看了一下 Google Docs,能做到完全离线的原因估计是这种类编辑器的产品,可以做到将所有状态存储在 IndexedDB 上,对于你说的按离线使用的标准来设计的话比较容易实现

为什么会有这种想法,是因为我们的网页目前主要市场是东南亚、非洲、南美洲等国家,根据错误日志来看,排查到断网导致接口超时的情况非常多,想到能否利用这种技术解决该类问题

如果按离线使用的标准重构的话,成本确实非常地高,而且 3 楼也提到了存在兼容性这块的问题
seducer0719
2021-07-10 00:19:50 +08:00
https://cloud.google.com/firestore/docs/manage-data/enable-offline

google 自己的 firestore 本身就提供了类似的离线持久化功能
opentrade
2021-07-10 13:21:21 +08:00
做不到,还是得自己写逻辑

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/788406

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX