fix: only do range request override in Safari (#1594)

should fix #1590

package.json

@@ -143,6 +143,7 @@
       "NotificationEvent",
       "OffscreenCanvas",
       "PointerEvent",
+      "Response",
       "URL",
       "WebSocket",
       "__assets__",

src/service-worker.js

@@ -13,6 +13,8 @@ const timestamp = process.env.SAPPER_TIMESTAMP
 const ASSETS = `assets_${timestamp}`
 const WEBPACK_ASSETS = `webpack_assets_${timestamp}`
 
+const isSafari = /Safari/.test(navigator.userAgent) && !/Chrom/.test(navigator.userAgent)
+
 // `static` is an array of everything in the `static` directory
 const assets = __assets__
   .map(file => file.startsWith('/') ? file : `/${file}`)
@@ -78,19 +80,15 @@ self.addEventListener('activate', event => {
   })())
 })
 
-// from https://stackoverflow.com/questions/54138601/cant-access-arraybuffer-on-rangerequest/54207122
+async function returnRangeRequest (request) {
-const returnRangeRequest = request =>
+  const response = await fetch(request, { headers: {}, mode: 'cors', credentials: 'omit' })
-  fetch(request, { headers: {}, mode: 'cors', credentials: 'omit' })
+  const arrayBuffer = await response.arrayBuffer()
-    .then(res => {
-      return res.arrayBuffer()
-    })
-    .then(arrayBuffer => {
   const bytes = /^bytes=(\d+)-(\d+)?$/g.exec(request.headers.get('range'))
   if (bytes) {
-        const start = Number(bytes[1])
+    const start = parseInt(bytes[1], 10)
-        const end = Number(bytes[2]) || arrayBuffer.byteLength - 1
+    const end = parseInt(bytes[2], 10) || arrayBuffer.byteLength - 1
 
-        return new self.Response(arrayBuffer.slice(start, end + 1), {
+    return new Response(arrayBuffer.slice(start, end + 1), {
       status: 206,
       statusText: 'Partial Content',
       headers: [
@@ -98,13 +96,13 @@ const returnRangeRequest = request =>
       ]
     })
   } else {
-        return new self.Response(null, {
+    return new Response(null, {
       status: 416,
       statusText: 'Range Not Satisfiable',
       headers: [['Content-Range', `*/${arrayBuffer.byteLength}`]]
     })
   }
-    })
+}
 
 self.addEventListener('fetch', event => {
   const req = event.request
@@ -150,7 +148,8 @@ self.addEventListener('fetch', event => {
 
     // range request need to be be patched with a 206 response to satisfy
     // Safari (https://stackoverflow.com/questions/52087208)
-    if (event.request.headers.get('range')) {
+    // Once this bug is fixed in WebKit we can remove this https://bugs.webkit.org/show_bug.cgi?id=186050
+    if (isSafari && event.request.headers.get('range')) {
       return returnRangeRequest(req)
     }