Fetch with progress bar

fetch-with-progress-bar.md

Fetch avec une barre de progression

Dans l’exemple fournis j’utilise le premier cas. Pour le lancer il faut :

• Un petit serveur statique, exemple avec Python3 : python3 -m http.server
• Changer le lien dans le fetch("URL TO DOWNLAOD HERE") avec le chemin vers fichier sur le serveur statique.

Ressources MDN :

• ReadableStream
• Uint8Array
• ReadableStreamBYOBReader

Itérateur asynchrone

On vient lire le corps de la réponse morceau par morceau. La taille des morceaux est définis par le navigateur.

Cette technique est composée d’une seule boucle sans gestion de mémoire ce qui lui assure une simplicité d’implémentation. Cependant le flux est directement consommé donc absolument pas générique.

let byteLength = 0
for await (const chunk of response.body) {
  chunk.byteLength += chunk.byteLength
}

TransformStream

On crée une nouvelle instance de TransformStream qui va visiter chaque morceau avant de les transmettre au reste de la chaîne via le contrôleur.

L’avantage du TransformStream ce qui permet de gagner en abstraction le flux n’est pas consommé donc le développeur peut continuer à chaîner pour finir par appeler la méthode pipeTo par exemple.

Une implémentation plus propre serait de créer une nouvelle sous-classe de TransformStream. Pour émettre des événements ou exiger une propriété avec une barre de progression, etc.

let byteLength = 0
response.body.pipeThrough(new TransformStream({
  transform: (chunk, controller) => {
    progress.value = chunk.byteLength
    // Visit the chunck and pass to the next stream
    controller.enqueue(chunk)
  }
}))

getReader

La méthode getReader peut aussi être utilisée pour avoir un meilleur contrôle de mémoire grâce à BYOB. Avec ce dernier c’est au développeur d’apporter son propre tampon mémoire. Donc on gagne en contrôle mémoire mais la simplicité en prend un coup.

On peut allouer directement un tampon qui va tout stocker et limiter son débit (ou pas). On peut aussi spécifier la taille des éléments avec les différents tableaux typés qui servent de vue sur le tampon. Mais je vais pas rentrer en détails sur ce genre de choses car très spécifique au besoin.

const reader = response.body.getReader({ mode: "byob" })
let byteLength = 0
// Allocate memory
let buffer = new ArrayBuffer(1024)
for (;;) {
  const { done, value } = await reader.read(new Uint8Array(buffer));
  if (done) {
    break;
  }
  byteLength += value.byteLength;
  // Buffer is detached
  buffer = value.buffer
}

gistfile1.txt

class ProgressBar {
  #text

  #bar

  #max

  /**
   * @param {number} v
   */
  set max(v) {
    this.#bar.max = v
    this.#max = v
  }

  /**
   * @returns {number}
   */
  get value() {
    return this.#bar.value
  }

  /**
   * @param {number} v
   */
  set value(v) {
    this.#bar.value = v
    this.#text.textContent = `${v} / ${this.#max}`
  }

  /**
   * @param {boolean} v
   */
  set hidden(v) {
    this.#bar.hidden = v
    this.#text.hidden = v
  }

  constructor() {
    this.#bar = document.createElement("progress");
    this.#text = document.createElement("p");
    this.#max = Infinity
  }

  /**
   * @param {HTMLElement} parent 
   */
  visitParent(parent) {
    parent.appendChild(this.#text);
    parent.appendChild(this.#bar);
  }
}

(async () => {
  // Prepare DOM elements
  const progress = new ProgressBar()
  progress.hidden = true
  progress.visitParent(document.body);
  const outerr = document.createElement("pre");

  document.body.appendChild(outerr);

  const response = await fetch("URL TO DOWNLAOD HERE");
  if (!response.ok) {
    outerr.textContent = `Response is not ok: ${response.status} - ${response.statusText}`;
    return
  }
  if (response.body === null) {
    outerr.textContent = "The response doesn't have a valid body.";
    return;
  }

  const contentLength = parseInt(response.headers.get("Content-Length"));
  // Response headers
  outerr.textContent += `En-tête de réponse
  ${JSON.stringify(Array.from(response.headers), undefined, 2)}
  Content-Length: ${contentLength}
  `
  // Content length is not a required response header since HTTP 2
  if (!isNaN(contentLength)) {
    progress.max = contentLength;
  }
  // Initialise values
  progress.value = 0
  let count = 0
  progress.hidden = false
  // For each chunk increments values
  for await (const chunk of response.body) {
    progress.value += chunk.byteLength
    count++;
    outerr.textContent += `${count} morceau·x\n`
  }

})().then(() => console.log("success"))

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progression téléchargement</title>
</head>
<body>
  <script type="module" src="./progress.mjs"></script>
</body>
</html>