Отчёты без связи: как приложению не терять данные на объекте

Кому и когда это нужно

Подвал, лифтовая шахта, поле, склад с толстыми стенами. Сотрудник заполнил форму, нажал «Отправить» и увидел ошибку. Через час у него другая задача, а отчёт остался в закрытой вкладке. Вы видите пустой день и звоните. Если этим не заняться, люди вернутся к бумаге и вечерней перепечатке, а данные будут приходить с опозданием или не придут. Совсем другой способ, через экран и камеру, описан в статье про передачу данных без связи в поле. Здесь о приложении, которое хранит данные в телефоне само.

Как это делается: 7 шагов

1. Выпишите действия сотрудника и разделите их. Без сети должны работать: заполнить отчёт, снять фото, отметиться, открыть уже загруженное задание. Сеть нужна для нового задания и оплаты.
2. Выберите уровень. Первый: кэш просмотра, открываются экраны, которые уже видели. Второй: очередь отправки, действия записываются и уходят позже. Третий: полная локальная работа с синхронизацией и разбором конфликтов. Обычно хватает второго.
3. Очередь простыми словами. Кнопка «Отправить» кладёт запись в хранилище браузера и пробует отправить. Сервер ответил «принято», запись удаляется. Сети нет, запись остаётся с пометкой «ожидает». Повтор идёт, когда сеть вернулась, по таймеру и при запуске приложения.
4. Защита от дублей. Каждой записи телефон выдаёт свой уникальный номер, сервер второй раз запись с тем же номером не создаёт. Связь может оборваться после того, как сервер принял данные, но до того, как телефон об этом узнал.
5. Фото. Кладите файл в очередь вместе с отчётом, сжимайте до отправки, ограничьте число снимков. Лимит хранилища браузер задаёт сам, фиксированного числа назвать нельзя. По MDN каждый браузер решает, сколько отдать сайту, и при нехватке места может удалить данные. Постоянное хранилище можно запросить, но Safari и Chromium отвечают сами, без вопроса пользователю. Очередь не должна копиться неделями, держите счётчик на виду.
6. Время события. Телефон фиксирует дату и время нажатия и отправляет их с записью, сервер хранит ещё и время получения. Часы на телефоне могут быть неверными, поэтому большое расхождение помечайте для проверки.
7. Конфликты. «Последний выигрывает» подходит для отметки «я на объекте»: одна запись на человека и день. Для отчётов и статусов задач опасно: пока отчёт ехал, задачу уже приняли. Тут нужен отказ с понятной причиной или ручной разбор.

Что работает без сети

Испытания, платформы и безопасность

Проверяйте на реальном телефоне: 1) режим «в самолёте», отчёт с тремя фото, счётчик «ожидает» растёт; 2) сеть включили, всё ушло ровно один раз; 3) сеть выключили в момент отправки, запись цела, дубля нет; 4) приложение закрыли с неотправленной записью и открыли позже; 5) «Отправить» нажали дважды; 6) на телефоне неверные часы.

Платформы. Web Push на iPhone появился в iOS и iPadOS 16.4 и только у веб-приложений, добавленных на главный экран, запрос разрешения делается по действию пользователя (по блогу WebKit). Фоновая отправка Background Sync на MDN помечена как «ограниченная доступность», поэтому рассчитывайте, что очередь уходит при открытом приложении. По MDN, Safari при включённой защите от слежки удаляет созданные скриптом данные сайта, если неделю не было взаимодействия. Распространяется ли это на приложение с главного экрана, я не подтвердил, проверяйте на вашем телефоне.

Безопасность. Данные в браузере читает тот, у кого разблокированный телефон. Не храните лишнего, требуйте блокировку экрана, при потере телефона закрывайте сессию на сервере, при выходе очищайте кэш. Про персональные данные на устройствах работников общими словами в статье про 152-ФЗ. Это не юридическая консультация.

Где ошибаются чаще всего

«Работает без интернета», а открывается только кэш страницы: экран виден, кнопка не срабатывает.

Фото теряются: снимок прикреплён к экрану, а не к очереди, приложение закрыли, файл исчез.

Нет индикатора «не отправлено»: сотрудник уверен, что отчёт ушёл.

Дубли при повторной отправке: сеть мигнула, отчёт создался дважды.

Где здесь поможет автоматизация

В CRM для подрядной компании у меня сделано так (прочитал код перед статьёй). Сервис-воркер кэширует оболочку приложения и последние ответы сервера, при потере сети показываются они. Отчёты по задачам с фото и отметки «я на объекте» пишутся в IndexedDB, на экране висит «Ждут отправки: N» и строка «Нет связи». Отправка идёт при появлении сети, раз в минуту и при запуске. Есть подсказка установки для iPhone и Web Push по VAPID. При выходе чистятся кэш ответов и кэш фото.

Слабые места, которые вижу в этом коде. Ключа от дублей нет: повтор отметки безвреден, потому что запись одна на человека и день, а отчёт по задаче создался бы второй раз. Время события ставит сервер при получении. Отклонённая сервером запись удаляется из очереди с сообщением. Очередь при выходе не стирается, она привязана к пользователю. Делая заново, я бы закрыл это сразу.

Полноценный офлайн для всех экранов на старте не нужен. Хватит трёх действий и просмотра задания. Берусь за такое в рамках разработки приложений и PWA, подробнее про создание PWA в статье про PWA из сайта за выходные. Если отчёты прорабов пока идут в мессенджер, начните с формата отчёта.

Частые вопросы

Нужно ли приложение из магазина, чтобы работало без сети?

Очередь и кэш работают и в PWA. Камеру, геометку и уведомления проверяйте на ваших моделях телефонов, на iPhone уведомления только у приложения с главного экрана.

Сколько фото поместится в очередь?

Числа не назову: лимит определяет браузер, данные могут быть удалены при нехватке места. Сжимайте снимки и показывайте счётчик.

Что делать, если сервер отклонил запись?

Не повторять бесконечно. Оставить запись у сотрудника, показать причину и дать исправить. Похожий список для выездных работ разобран в статье про приложение замерщика.

Коротко о главном

Для объекта без связи нужны очередь с пометкой «ожидает», защита от дублей, фото в очереди и проверка в режиме «в самолёте». Полный офлайн для всех экранов на старте лишний.

Хотите, чтобы я собрал для вашей команды приложение, которое сохраняет отчёты, фото и отметки без связи и отправляет их позже? Напишите мне в Telegram слово «ОФЛАЙН».