title: Caching Videos in Safari using Workbox
body: <p>I have a Vue.js app which i'm currently using workbox to cache so it works offline. However, videos don't seem to work in Safari.</p>
  <p>I've researched and all signs point to this:
  <a href="https://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av" rel="nofollow noreferrer">https://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av</a></p>
  <p>but it doesn't seem to work for me.</p>
  <p>Here's my code as it stands:</p>
  <p><strong>Webpack</strong></p>
  <pre><code>configureWebpack: {
  plugins: [
    new InjectManifest({
      swSrc: './src/sw.js',
      swDest: &quot;sw.js&quot;,
      maximumFileSizeToCacheInBytes: 5000000000
    })
  ]}
  </code></pre>
  <p><strong>sw.js (service worker)</strong></p>
  <pre><code>import { skipWaiting, clientsClaim } from &quot;workbox-core&quot;;
  import { precacheAndRoute } from &quot;workbox-precaching&quot;;
  import { registerRoute } from &quot;workbox-routing&quot;;
  import { CacheFirst } from &quot;workbox-strategies&quot;;
  import { CacheableResponsePlugin } from &quot;workbox-cacheable-response&quot;;
  import { RangeRequestsPlugin } from &quot;workbox-range-requests&quot;;
  
  registerRoute(
    ({ url }) =&gt; url.pathname.endsWith(&quot;.mp4&quot;),
    new CacheFirst({
      plugins: [
        new CacheableResponsePlugin({ statuses: [200] }),
        new RangeRequestsPlugin()
      ]
    })
  );
  
  skipWaiting();
  clientsClaim();
  precacheAndRoute(self.__WB_MANIFEST);
  </code></pre>