Можно ли сохранить множество картинок оффлайн через PWA для последующей отправки?

Question

[Сергей]

Есть приложение на React + PWA, которое позволяет отправлять множество фотографий. Ориентировочно - до 50. Соответственно, когда сеть есть, то проблем нет.
А когда нет сети, то можно как-то сохранить/кэшировать все фото, чтобы при появлении интернета они сами улетали на сервер?
Есть ли какие-то ограничения при этом?

Answer 1

[Алексей Ярков]

На работе для сервис воркера в PWA используем workbox.
Картинки не отправляем, но разных форм много. И как раз схожий кейс.

import { NetworkOnly } from 'workbox-strategies';
import { BackgroundSyncPlugin } from 'workbox-background-sync';
import { registerRoute } from 'workbox-routing';
import { StatusCodes } from 'http-status-codes';

const bgSyncPlugin = new BackgroundSyncPlugin('APIRequestsQueue', {
  // Повторять попытку отправить запрос в течение 8 часов (указывается в минутах)
  maxRetentionTime: 480,
});

['POST', 'PUT', 'PATCH', 'DELETE'].forEach((method) => {
  registerRoute(
    ({ url }) => url.pathname.startsWith('/v1'),
    new NetworkOnly({
      plugins: [
        {
          ...bgSyncPlugin,
          /**
           * Этот обработчик будет вызван, когда не удалось выполнить запрос.
           * Информация о запросе будет помещена в очередь и запрос
           * выполнится при подключении к сети.
           * Возвращаем статус 202 Accepted, чтобы в приложении
           * можно было понять из-за чего не удалось выполнить запрос
           * и отреагировать должным образом.
          */
          handlerDidError() {
            return Promise.resolve(new Response(null, {
              status: StatusCodes.ACCEPTED,
            }));
          },
        },
      ],
    }),
    method,
  );
});

Таким образом достигается такой порядок действий:
1. Заполняем форму
2. Исчезает интернет
3. Жмём кнопку ОТПРАВИТЬ
4. Сервис воркер сохраняет данные запроса в кеше с именем APIRequestsQueue и возвращает 202 код
5. Сеть появляется
6. Запросы из кеша APIRequestsQueue уходят по очереди в фоне, без участия пользователя