@DaveGarrow

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

Есть приложение на React + PWA, которое позволяет отправлять множество фотографий. Ориентировочно - до 50. Соответственно, когда сеть есть, то проблем нет.
А когда нет сети, то можно как-то сохранить/кэшировать все фото, чтобы при появлении интернета они сами улетали на сервер?
Есть ли какие-то ограничения при этом?
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ответы на вопрос 2
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Не сталкивался с подобными кейсами, но первое, что приходит на ум - это получать картинки и записывать, скажем в IndexedDB. Потом оттуда брать. В IndexedDB может влезть довольно много. В некоторых браузерах есть ограничения, но в целом 50 картинок точно влезут.

Ссылки:
IndexedDB API (MDN)
IndexedDB API (learn.javascript)
https://caniuse.com/indexeddb (93.62% + 4.29% = 97.91%)
Ответ написан
yarkov
@yarkov
Проект "Жизнь после смерти" - lifeafterdeath.ru
На работе для сервис воркера в 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 уходят по очереди в фоне, без участия пользователя
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы