Will use Vue PWA to store videos offline in Vue.js 3

Question

I'm using Vue 3 and Typescript. I'm trying to play a video in a PWA. It works fine online, but when I try it offline, the video won't load. I store the video in the assets folder and in the finished version the video is in the media folder. thanks for your help.

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

Answer 1

I found the solution myself.

Can be easily done using localstorage or indexedDB (for videos). This only works for small videos on iOS as mobile Safari has a size limit of 50MB (https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker# how_much_can_you_store)

Another solution without indexedDB can be found here: https://stackoverflow.com/a/56337080/7439224