网络受限环境下 iPad图片同步应用开发经验总结

一、项目背景与目标 #

在 18 至 20 年间，在公司(蜜獾信息HPA项目组)主导开发几款app应用，主要面向维修人员(vendor)在网络受限环境中的工作场景。该应用的核心功能是拍摄照片并同步至服务器，即使在无网络连接的情况下，维修人员也能正常拍摄，网络恢复后自动完成数据同步，旨在提高维修人员的工作效率并确保数据的完整性与一致性。

二、技术挑战与解决方案 #

（一）离线照片管理 #

1. 挑战描述 维修人员在现场作业时会拍摄大量照片，而网络不稳定或无网络的情况频繁出现。这就要求我们构建一个可靠的离线照片管理系统，以保障数据安全，防止数据丢失，并维持数据的一致性。
2. 基于 React Native 的解决方案 利用 React Native 的本地存储能力，结合 SQLite 数据库实现本地数据库系统。当用户拍摄照片时，将照片及其元数据（如拍摄时间、地点、设备信息等）存储到本地 SQLite 数据库中。这样，即使处于离线状态，用户也能够持续拍摄照片，数据会被安全地暂存于本地，不会因网络问题而丢失。

（二）照片上传队列 #

1. 挑战描述 网络恢复后，应用需要自动且高效地将本地存储的大量照片上传至服务器。这需要合理管理照片上传的顺序和状态，以优化上传效率，避免因无序上传导致的网络拥堵或其他问题。
2. 基于 React 和 Redux 的解决方案 在 React 组件中，通过 Redux 管理应用的状态。设计一个专门的照片上传队列状态对象，包含照片的上传顺序、当前上传状态（等待、上传中、已完成、失败等）等信息。当网络恢复时，根据设定的上传策略（如顺序上传或并发上传），从队列中依次取出照片进行上传。对于并发上传，可以利用 JavaScript 的异步编程特性，如 Promise.all 来同时处理多个上传任务，但要注意控制并发数量，以避免网络过载。

（三）上传重试与丢失处理 #

1. 挑战描述 网络波动可能致使照片上传失败，需要确保每张照片都能成功上传至服务器。同时，要处理可能出现的照片丢失情况，保证服务器端与本地数据库的数据一致性。
2. 基于 React 和 Redux 的解决方案 在照片上传过程中，使用 Redux 记录每张照片的上传状态。当上传失败时，触发上传重试机制。可以设置一个重试次数上限，例如 3 次，每次重试之间设置一定的延迟时间（如 5 秒），以避免过度频繁地重试对网络造成压力。重试逻辑可以在 Redux 的 action creator 中实现，根据照片的当前状态决定是否进行重试操作。对于照片丢失处理，在所有照片上传完成后，发起服务器端与本地数据库的比对校验。通过向服务器发送包含本地所有照片信息（如文件名、文件哈希值等）的请求，服务器端根据这些信息检查是否存在缺失的照片，并将结果返回给应用。如果发现有丢失的照片，应用再次将这些照片加入上传队列进行上传。

（四）断网停传与队列控制 #

1. 挑战描述 为节省网络流量和设备电量，应用需要在网络断开时自动暂停上传操作，并在网络恢复后继续。同时，还应提供给用户手动控制上传队列的功能，以便在特定场景下灵活控制上传行为。
2. 基于 React Native 的解决方案 利用 React Native 的网络状态监测 API，实时监听网络连接状态。当网络断开时，在 React 组件中触发相应的状态更新，通过 Redux 通知照片上传队列暂停上传操作。当网络恢复时，同样根据网络状态的变化重新启动上传队列。对于用户手动控制上传队列，在 React Native 的界面中设计相应的按钮组件（如暂停、恢复按钮），点击按钮时触发 Redux 的 action，改变上传队列的状态（如暂停、继续），从而实现用户对上传操作的手动控制。

三、技术实现细节 #

（一）图片上传同步库 #

为解决上述一系列挑战，开发了一个图片上传同步库。该库基于 AWS 云服务构建，主要利用 AWS S3 进行照片存储，将拍摄的照片安全地保存在云端。借助 AWS Lambda 实现照片处理和状态监控功能，例如在照片上传至 S3 后，Lambda 函数可以对照片进行格式转换、压缩等处理，并更新照片的上传状态信息。同时，结合本地缓存技术（如 React Native 的 AsyncStorage）和 SQLite 数据库，确保在离线状态下应用的稳定性和数据安全。在 React 和 React Native 项目中引入该库后，能够方便地实现照片的拍摄、离线管理、上传队列控制以及与服务器的同步等功能, 某些表单页面需要自动暂停同步等。

四、项目总结与经验分享 #

通过本项目的开发，成功打造了一款适用于网络受限环境的照片同步应用，有效提升了维修人员的工作效率。在这个过程中，积累了丰富的前端开发经验，尤其是在处理离线数据管理、网络状态敏感操作以及利用 React、React Native 和 Redux 构建复杂应用逻辑方面。希望这些经验能够为公司内部的各位开发者在面对类似的网络受限应用开发挑战时提供有效的参考和启发，助力大家在公司的前端开发工作中攻克更多难题。