fix(app): Serve cached video on Safari

Following these recommendations to make cache videos work on Safari

https://developers.google.com/web/tools/workbox/guides/advanced-recipes

GoogleChrome/workbox#1663 (comment)

src/components/MainHero.vue

@@ -6,6 +6,7 @@
       muted
       playsinline
       class="absolute min-h-full min-w-full w-auto h-auto"
+      crossorigin="anonymous"
     >
       <source
         :src="require('~/assets/video/main_hero.mp4')"

static/service-worker.js

@@ -1,11 +1,38 @@
 importScripts('/assets/js/workbox-v5.0.0/workbox-sw.js')
 workbox.setConfig({ modulePathPrefix: '/assets/js/workbox-v5.0.0/' })
 
-workbox.core.setCacheNameDetails({ prefix: 'assets' })
+workbox.core.setCacheNameDetails({ prefix: '', suffix: '', precache: 'precache' })
 workbox.core.skipWaiting()
 workbox.core.clientsClaim()
 
-workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)
+const precache = self.__WB_MANIFEST
+precacheMedia(precache)
+workbox.precaching.precacheAndRoute(precache)
 
 workbox.precaching.cleanupOutdatedCaches()
-workbox.routing.registerRoute(/\.(?:png|jpg|jpeg|svg|mp4)$/, new workbox.strategies.StaleWhileRevalidate({ cacheName: 'media', plugins: [new workbox.expiration.ExpirationPlugin({ maxEntries: 30, purgeOnQuotaError: false })] }), 'GET')
+workbox.routing.registerRoute(/\.(?:png|jpg|jpeg|svg)$/, new workbox.strategies.CacheFirst({ cacheName: 'media', plugins: [new workbox.expiration.ExpirationPlugin({ maxEntries: 30, purgeOnQuotaError: false })] }), 'GET')
+workbox.routing.registerRoute(/\/assets\/media\/.*\.mp4$/, new workbox.strategies.CacheFirst({
+  cacheName: 'precachedMedia',
+  plugins: [
+    new workbox.expiration.ExpirationPlugin({ maxEntries: 5, purgeOnQuotaError: false }),
+    new workbox.rangeRequests.RangeRequestsPlugin(),
+    new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [200] })
+  ]
+}))
+
+function precacheMedia (precache) {
+  const media = precache.filter((p, i, arr) => {
+    if (/.*\.mp4$/.test(p.url)) {
+      arr.splice(i, 1)
+      return true
+    }
+  })
+  self.addEventListener('install', event => {
+    event.waitUntil(
+      caches.open('precachedMedia')
+        .then(cache => {
+          media.forEach(e => cache.add(e.url))
+        })
+    )
+  })
+}