Сохранение прогресса

Driver.js — это библиотека для создания интерактивных пошаговых туров по интерфейсу веб-приложений. Одним из ключевых аспектов профессионального использования является сохранение прогресса пользователя, чтобы при повторном посещении страницы или перезагрузке приложения пользователь мог продолжить тур с того же шага.

Хранение текущего шага

Для отслеживания прогресса нужно фиксировать индекс текущего шага, который в Driver.js передаётся при инициализации метода start(). Например, при событии next можно сохранять текущий шаг:

const driver = new Driver({
  animate: true,
  opacity: 0.75,
  padding: 10,
  allowClose: false,
  steps: [
    { element: '#step1', popover: { title: 'Шаг 1', description: 'Описание шага 1' } },
    { element: '#step2', popover: { title: 'Шаг 2', description: 'Описание шага 2' } },
    { element: '#step3', popover: { title: 'Шаг 3', description: 'Описание шага 3' } }
  ]
});

driver.on('next', (element, step) => {
  localStorage.setItem('driverCurrentStep', step.index);
});

driver.on('previous', (element, step) => {
  localStorage.setItem('driverCurrentStep', step.index);
});

В этом примере индекс текущего шага сохраняется в localStorage, что позволяет использовать его после перезагрузки страницы.

Восстановление тура

Для восстановления тура при повторном входе достаточно считать сохранённый индекс и передать его в метод start():

const savedStep = parseInt(localStorage.getItem('driverCurrentStep'), 10);

if (!isNaN(savedStep)) {
  driver.start(savedStep);
} else {
  driver.start();
}

Таким образом, тур продолжится с того шага, на котором пользователь остановился, а не начинается заново.

Управление состоянием завершения

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

driver.on('complete', () => {
  localStorage.setItem('driverCompleted', 'true');
});

const completed = localStorage.getItem('driverCompleted') === 'true';
if (!completed) {
  driver.start(savedStep || 0);
}

Такой подход обеспечивает корректное поведение интерфейса и предотвращает повторное навязывание пошагового тура.

Использование более сложного хранилища

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

  • IndexedDB — для хранения более сложной информации о прогрессе, например, дополнительных пользовательских данных или временных меток.
  • Серверное хранение через API — синхронизация прогресса с сервером позволяет сохранять состояние между устройствами и сессиями.

Пример использования API:

async function saveStepToServer(stepIndex) {
  await fetch('/api/save-driver-step', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ step: stepIndex })
  });
}

driver.on('next', (element, step) => {
  saveStepToServer(step.index);
});

Учет динамического DOM

Если элементы интерфейса могут динамически изменяться (например, скрываться или подгружаться через AJAX), необходимо проверять наличие элемента перед запуском шага:

const stepIndex = parseInt(localStorage.getItem('driverCurrentStep'), 10) || 0;
const steps = driver.getSteps();

function startDriverSafely(index) {
  if (document.querySelector(steps[index].element)) {
    driver.start(index);
  } else {
    // Если элемент отсутствует, запуск через небольшую задержку или пропуск шага
    setTimeout(() => startDriverSafely(index), 500);
  }
}

startDriverSafely(stepIndex);

Это предотвращает ошибки при попытке выделить отсутствующий элемент и обеспечивает плавное продолжение тура.

Настройка поведения при повторном запуске

Для улучшения UX можно настроить:

  • Автозапуск только для новых пользователей.
  • Пропуск уже пройденных шагов.
  • Возможность сброса прогресса пользователем, например, через кнопку «Начать тур заново».
document.querySelector('#resetTour').addEventListener('click', () => {
  localStorage.removeItem('driverCurrentStep');
  localStorage.removeItem('driverCompleted');
  driver.start();
});

Итоговые рекомендации

  • Сохранять индекс текущего шага и состояние завершения отдельно.
  • Для сложных приложений использовать серверное хранение или IndexedDB.
  • Проверять наличие элементов перед запуском шагов.
  • Предусматривать возможность сброса прогресса.

Такой подход позволяет сделать тур на Driver.js гибким, устойчивым к изменениям DOM и удобным для пользователя, обеспечивая полноценное сохранение прогресса.

Оглавление