Utilisera Vue PWA pour stocker des vidéos hors ligne dans Vue.js 3

Question

J'utilise Vue 3 et Typescript. J'essaie de lire une vidéo dans une PWA. Cela fonctionne bien en ligne, mais lorsque je l'essaye hors ligne, la vidéo ne se charge pas. Je stocke la vidéo dans le dossier Assets et dans la version finale, la vidéo se trouve dans le dossier Media. Merci pour votre aide.

<video autoplay loop class="video">
    <source :src='require("@/assets/videos/test.mp4")' type='video/mp4'>
  </video>

Answer 1

J'ai trouvé la solution moi-même.

Peut être facilement réalisé en utilisant localstorage ou indexedDB (pour les vidéos). Cela ne fonctionne que pour les petites vidéos sur iOS, car Safari mobile a une taille limite de 50 Mo (https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker#how_much_can_you_store)

Une autre solution sans indexedDB peut être trouvée ici : https://stackoverflow.com/a/56337080/7439224