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

should fix #1590
This commit is contained in:
Nolan Lawson 2019-10-18 19:03:04 -07:00 committed by GitHub
parent 01b0c43f0d
commit 3bc6e3d777
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 26 deletions

View file

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

View file

@ -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,33 +80,29 @@ self.addEventListener('activate', event => {
})())
})
// from https://stackoverflow.com/questions/54138601/cant-access-arraybuffer-on-rangerequest/54207122
const returnRangeRequest = request =>
fetch(request, { headers: {}, mode: 'cors', credentials: 'omit' })
.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 end = Number(bytes[2]) || arrayBuffer.byteLength - 1
async function returnRangeRequest (request) {
const response = await fetch(request, { headers: {}, mode: 'cors', credentials: 'omit' })
const arrayBuffer = await response.arrayBuffer()
const bytes = /^bytes=(\d+)-(\d+)?$/g.exec(request.headers.get('range'))
if (bytes) {
const start = parseInt(bytes[1], 10)
const end = parseInt(bytes[2], 10) || arrayBuffer.byteLength - 1
return new self.Response(arrayBuffer.slice(start, end + 1), {
status: 206,
statusText: 'Partial Content',
headers: [
['Content-Range', `bytes ${start}-${end}/${arrayBuffer.byteLength}`]
]
})
} else {
return new self.Response(null, {
status: 416,
statusText: 'Range Not Satisfiable',
headers: [['Content-Range', `*/${arrayBuffer.byteLength}`]]
})
}
return new Response(arrayBuffer.slice(start, end + 1), {
status: 206,
statusText: 'Partial Content',
headers: [
['Content-Range', `bytes ${start}-${end}/${arrayBuffer.byteLength}`]
]
})
} else {
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)
}