Прогрес фонового завантаження у фронтенді: Відстеження прогресу завантаження

У сучасних веб-додатках отримання даних із віддалених серверів є фундаментальною вимогою. Чи то завантаження великих файлів, отримання відповідей від API, чи просто оновлення даних додатку, користувачі очікують безперебійного та інформативного досвіду. Важливим аспектом цього є надання зворотного зв'язку під час фонових операцій завантаження, особливо щодо прогресу. Ця стаття розглядає техніки відстеження прогресу завантаження у фронтенді, покращуючи досвід користувача та пропонуючи цінну інформацію про процеси передачі даних.

Чому відстеження прогресу завантаження важливе

Уявіть, що ви завантажуєте велике зображення, документ або цілий набір даних. Без будь-яких ознак прогресу користувач залишається в невідомості, не знаючи, чи додаток працює, завис, чи виникла проблема зі з'єднанням. Ця відсутність зворотного зв'язку може призвести до розчарування, скасування завантажень та негативного користувацького досвіду. Відстеження прогресу завантаження вирішує цю проблему, оскільки:

• Покращення досвіду користувача: Надання візуальних підказок, таких як індикатори прогресу або відсоткові показники, заспокоює користувачів, що щось відбувається, і дозволяє оцінити час, що залишився до завершення завантаження.
• Підвищення прозорості: Відображення прогресу завантаження допомагає користувачам зрозуміти, скільки даних було передано і скільки ще залишилося.
• Сприяння обробці помилок: Моніторинг прогресу дозволяє розробникам виявляти потенційні проблеми, такі як мережеві помилки або повільне з'єднання, та впроваджувати відповідні механізми обробки помилок. Це запобігає враженню, що додаток зламався, і дозволяє створювати надійніші стратегії відновлення після помилок.
• Підвищення сприйняття продуктивності: Навіть якщо саме завантаження займає час, оновлення прогресу створює відчуття чутливості та ефективності, роблячи додаток більш довершеним.

Fetch API та події прогресу

Fetch API — це сучасний і рекомендований метод для виконання мережевих запитів у веб-браузерах. Він пропонує потужний та гнучкий спосіб обробки отримання даних. На жаль, стандартний Fetch API сам по собі не надає прямого доступу до подій прогресу завантаження. Однак ми можемо використовувати певні техніки для досягнення цього. Зокрема, за допомогою XMLHttpRequest (XHR) або потокових відповідей.

Використання XMLHttpRequest для відстеження прогресу

Хоча Fetch є рекомендованим методом, XMLHttpRequest (XHR) пропонує більш детальний контроль над життєвим циклом запиту, включаючи доступ до подій прогресу. Ось простий приклад того, як відстежувати прогрес завантаження за допомогою XHR:

            
function trackDownloadProgress(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      callback(percentComplete);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      // Success
      callback(100);
      // Process the response
    } else {
      // Error
      callback(-1, xhr.status); // Indicate an error
    }
  };

  xhr.onerror = () => {
    callback(-1, 'Network Error'); // Indicate a network error
  };

  xhr.send();
}

// Example usage:
trackDownloadProgress('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

У цьому коді:

• Ми створюємо об'єкт XMLHttpRequest.
• Ми використовуємо xhr.open(), щоб вказати метод, URL та чи має запит бути асинхронним (true).
• xhr.onprogress — це обробник подій, який періодично спрацьовує під час завантаження. event.loaded представляє кількість завантажених даних, а event.total — загальний розмір ресурсу (якщо сервер надає заголовок Content-Length).
• Ми обчислюємо відсоток завершення за допомогою (event.loaded / event.total) * 100.
• xhr.onload викликається, коли завантаження завершено (або запит виконано успішно). Ми перевіряємо xhr.status, щоб визначити результат (наприклад, 200 для успіху).
• xhr.onerror обробляє потенційні мережеві помилки або помилки з'єднання.
• Ми передаємо відсоток прогресу у функцію callback для оновлення UI. Помилка позначається значенням -1 для прогресу та причиною.

Примітка: event.total може дорівнювати 0, якщо сервер не надає заголовок Content-Length. У таких випадках відстеження прогресу обмежене, і ви можете показати лише невизначений індикатор прогресу (наприклад, анімацію завантаження).

Відстеження прогресу за допомогою Fetch та потокових відповідей

Сучасні браузери дозволяють потокову передачу відповіді, що забезпечує рішення, подібне до техніки з XHR. Це особливо корисно при роботі з великими файлами. Основна ідея полягає в тому, щоб читати відповідь як потік і використовувати ReadableStream для моніторингу частин даних у міру їх надходження.

            
async function trackDownloadProgressFetch(url, callback) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        callback(100); // Download complete
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      callback(progress);
    }

  } catch (error) {
    console.error('Download error:', error);
    callback(-1, error.message); // Indicate an error
  }
}

// Example usage:
trackDownloadProgressFetch('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

Ось як працює цей код:

• Ми використовуємо fetch() для ініціювання запиту.
• Ми перевіряємо response.ok (статус у діапазоні 200-299).
• Ми отримуємо заголовок content-length з відповіді, щоб визначити розмір файлу.
• response.body — це ReadableStream, що представляє тіло відповіді. Ми отримуємо reader для цього потоку.
• Ми неодноразово викликаємо reader.read() для читання частин даних з потоку.
• done вказує, чи потік повністю прочитано. Якщо `done` має значення true, завантаження завершено.
• value — це ArrayBuffer, що містить поточну частину даних.
• Ми оновлюємо loadedBytes та обчислюємо прогрес.
• Ми викликаємо функцію зворотного виклику для оновлення UI.

Цей метод пропонує більш сучасний підхід, який забезпечує кращу продуктивність при роботі з великими файлами, оскільки ви не завантажуєте весь файл у пам'ять одночасно.

Реалізація UI для прогресу завантаження

Коли у вас є дані про прогрес, наступним кроком є створення користувацького інтерфейсу (UI), який ефективно повідомляє про стан завантаження. Ось деякі елементи UI та найкращі практики:

Індикатори прогресу (Progress Bars)

Індикатори прогресу — це найпоширеніший та інтуїтивно зрозумілий спосіб відображення прогресу завантаження. Вони візуально представляють відсоток завантажених даних. Індикатор прогресу повинен:

• Чітко вказувати відсоток прогресу, чисельно або візуально.
• Використовувати кольори та стилі, що відповідають дизайну вашого додатку.
• Розглянути можливість додавання приблизного часу, що залишився, на основі швидкості завантаження, якщо це можливо.

            
<div class="progress-container">
  <div class="progress-bar" style="width: 0%;"></div>
  <span class="progress-text">0%</span>
</div>

            

              
                Copy
              
            
          

            
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  width: 0%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

            
function updateProgressBar(progress) {
  const progressBar = document.querySelector('.progress-bar');
  const progressText = document.querySelector('.progress-text');

  if (progress === -1) {
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = 'red';
    progressText.textContent = 'Error';
    return;
  }

  progressBar.style.width = progress + '%';
  progressText.textContent = progress.toFixed(0) + '%';
}

// Call updateProgressBar(progress) within your download progress callback.

            

              
                Copy
              
            
          

Спінери/Невизначені індикатори

Коли загальний розмір файлу невідомий (наприклад, сервер не надає заголовок `Content-Length`), ви можете використовувати невизначений індикатор прогресу, такий як спінер або анімація завантаження. Це сигналізує, що завантаження триває, навіть якщо ви не можете надати відсоток.

Повідомлення про стан

Відображення текстових повідомлень, що вказують на стан завантаження, забезпечує ясність і контекст. Ці повідомлення можуть включати:

• 'Початок завантаження...' (Початковий стан)
• 'Завантаження...' (Під час завантаження)
• 'Завантажено 50%...' (Під час прогресу)
• 'Завантаження завершено!' (Після успішного завершення)
• 'Не вдалося завантажити. Спробуйте ще раз.' (У разі помилки)

Обробка помилок

Надійна обробка помилок є життєво важливою. Обробляйте потенційні помилки коректно, шляхом:

• Відображення інформативних повідомлень про помилки для користувача.
• Надання користувачеві можливості повторити завантаження.
• Логування помилок для налагодження.

Найкращі практики відстеження прогресу завантаження у фронтенді

• Враховуйте стан мережі користувача: Повільне або ненадійне мережеве з'єднання може призвести до тривалого часу завантаження. Надавайте зворотний зв'язок, що враховує ці умови. Ви можете обчислити приблизний час, що залишився (хоча це може бути неточним при змінній швидкості мережі), і відобразити повідомлення на кшталт 'Завантаження... Це може зайняти кілька хвилин'.
• Обмежуйте частоту оновлень: Уникайте занадто частого оновлення UI, оскільки це може вплинути на продуктивність. Оновлюйте індикатор прогресу з інтервалами (наприклад, кожні 100-200 мілісекунд) або лише при значній зміні прогресу.
• Надавайте чіткий візуальний зворотний зв'язок: Використовуйте чіткий та лаконічний індикатор прогресу або спінер. Зробіть так, щоб стан завантаження було легко зрозуміти. Розгляньте можливість використання кольорів, що відповідають брендингу вашого додатку.
• Обробляйте різні типи файлів: Переконайтеся, що ваше відстеження прогресу правильно обробляє різні типи файлів (зображення, документи, відео тощо). Розгляньте можливість відображення іконки, що відповідає типу файлу.
• Інтернаціоналізація (i18n): Перекладіть усі елементи UI (повідомлення про прогрес, повідомлення про помилки тощо) на кілька мов для підтримки глобальної аудиторії. Використовуйте бібліотеку або сервіс перекладів для управління вашими перекладами. Наприклад, повідомлення про прогрес, таке як "Downloading...", потрібно перекласти різними мовами для належної інтернаціоналізації.
• Доступність: Переконайтеся, що ваші індикатори прогресу доступні для користувачів з обмеженими можливостями. Використовуйте атрибути ARIA (наприклад, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`) для надання семантичної інформації для екранних читачів.
• Тестування: Ретельно тестуйте вашу реалізацію відстеження прогресу завантаження за різних умов мережі (повільна, швидка, нестабільна) та на різних пристроях. Тестуйте з різними розмірами файлів, щоб переконатися, що система працює, як очікувалося.
• Кешування: Впроваджуйте стратегії кешування для покращення продуктивності для часто завантажуваних файлів. Кешування в браузері та на стороні сервера може зменшити потребу в повторному завантаженні файлів, покращуючи сприйняття чутливості вашого додатку.
• Враховуйте обмеження розміру файлів: Пам'ятайте про розмір файлів, які ви дозволяєте завантажувати. Для великих файлів розгляньте можливість розбиття завантаження на менші, більш керовані частини, особливо на мобільних пристроях. Показуйте попередження користувачеві, якщо він збирається завантажити дуже великий файл, який може використати його тарифний план.
• Звітність про помилки: Впроваджуйте механізми звітності про помилки для виявлення та логування помилок завантаження для налагодження та моніторингу. Використовуйте інструменти, такі як Sentry або Rollbar, для збору даних про помилки.

Просунуті техніки та міркування

Web Workers для фонових операцій

Щоб уникнути блокування основного потоку та забезпечити чутливість UI, розгляньте можливість використання Web Workers для виконання операції завантаження у фоновому режимі. Це дозволяє вашому UI залишатися плавним і запобігає зависанню браузера під час завантаження. Web Worker може передавати оновлення прогресу основному потоку за допомогою postMessage().

            
// In your main script (e.g., main.js)
const worker = new Worker('download-worker.js');

worker.postMessage({ url: 'https://example.com/your-large-file.zip' });

worker.onmessage = (event) => {
  if (event.data.type === 'progress') {
    updateProgressBar(event.data.progress);
  } else if (event.data.type === 'error') {
    console.error('Download Error:', event.data.error);
    // Handle error
  } else if (event.data.type === 'complete') {
    console.log('Download Complete!');
    // Handle completion
  }
};

            

              
                Copy
              
            
          

            
// In your worker script (e.g., download-worker.js)
self.onmessage = async (event) => {
  const { url } = event.data;
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        self.postMessage({ type: 'complete' });
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      self.postMessage({ type: 'progress', progress: progress });
    }

  } catch (error) {
    self.postMessage({ type: 'error', error: error.message });
  }
};

            

              
                Copy
              
            
          

Відновлювані завантаження

Для великих файлів розгляньте можливість реалізації відновлюваних завантажень. Це дозволяє користувачеві призупинити та продовжити завантаження пізніше. Реалізуйте заголовок `Range` у вашому HTTP-запиті, щоб вказати діапазон байтів для завантаження. Сервер відповідає запитаною частиною файлу, і браузер може продовжити з того місця, де зупинився. Це забезпечує стійкість до перебоїв у мережі.

Часткове кодування (Chunked Encoding)

При використанні часткового кодування заголовок `Content-Length` не буде присутній. У цьому випадку вам, ймовірно, доведеться показати користувачеві невизначений прогрес або використовувати гібридний метод, де розмір приблизно визначається на самому початку. Це зазвичай трапляється при використанні потокових сервісів, де розмір невідомий відразу, наприклад, пряма трансляція відео.

Cross-Origin Resource Sharing (CORS)

При завантаженні ресурсів з іншого джерела (домен, протокол або порт) переконайтеся, що сервер підтримує CORS. Сервер повинен включати заголовок `Access-Control-Allow-Origin` у свою відповідь, щоб дозволити міждоменні запити. В іншому випадку ваші запити на завантаження можуть бути заблоковані браузером.

Сумісність з браузерами

Переконайтеся, що ваша реалізація працює в різних браузерах та на різних пристроях. Тестуйте відстеження прогресу завантаження на популярних браузерах, таких як Chrome, Firefox, Safari, Edge, а також на мобільних пристроях (iOS та Android). Розгляньте можливість використання поліфілів або виявлення функцій для підтримки старих браузерів, які можуть не повністю підтримувати всі функції.

Приклади з реального світу

Давайте розглянемо деякі приклади з реального світу, як ефективно використовується відстеження прогресу завантаження:

• Платформи для обміну файлами: Такі платформи, як Google Drive, Dropbox та WeTransfer, використовують індикатори прогресу для відображення прогресу завантаження та вивантаження файлів. Вони часто надають приблизний час, що залишився, та обробку помилок для забезпечення плавного користувацького досвіду.
• Сайти для завантаження програмного забезпечення: Багато сайтів для завантаження програмного забезпечення відображають індикатори прогресу під час процесу завантаження. Ці індикатори допомагають користувачам бути в курсі прогресу завантаження та оцінювати час, необхідний для його завершення. Такі сайти, як офіційний сайт завантаження Mozilla Firefox, використовують індикатори прогресу.
• Онлайн-платформи для навчання: Онлайн-платформи для навчання, які надають відео- або документальний контент, використовують відстеження прогресу для відображення стану завантаження навчальних матеріалів.
• Стрімінгові сервіси: Стрімінгові сервіси іноді відображають прогрес попереднього завантаження або кешування контенту. Це покращує продуктивність відтворення.
• Веб-сайти електронної комерції: Сайти електронної комерції використовують відстеження прогресу при завантаженні зображень продуктів або інших ресурсів.

Висновок

Реалізація відстеження прогресу завантаження у фронтенді є важливою для створення позитивного та інформативного користувацького досвіду. Надаючи візуальний зворотний зв'язок, керуючи помилками та враховуючи інтернаціоналізацію та доступність, ви можете створювати веб-додатки, які є більш зручними та надійними. Використання Fetch API або XMLHttpRequest, разом з відповідними елементами UI та найкращими практиками, дозволяє розробникам надавати важливий зворотний зв'язок під час фонових операцій завантаження, забезпечуючи більш плавний та захоплюючий досвід для користувачів по всьому світу. Не забувайте враховувати різні умови мережі, типи файлів та сумісність з браузерами при розробці вашої реалізації.