StreamSaver.js
Rama main · réplica de lectura del repositorio original.
(function () {
// 下载代理，使用 iframe，还是 navigate
const downloadStrategy =
window.isSecureContext // window.isSecureContext 判断是否为 https、wss 等安全环境
|| 'MozAppearance' in document.documentElement.style // 是否为 firefox 浏览器
? 'iframe' : 'navigate'
// 中间传输器
let middleTransporter = null
// 是否使用 blob 替换 service worker 的能力
// safari 不支持流式下载功能，https://github.com/jimmywarting/StreamSaver.js/issues/69
let useBlobFallback = /constructor/i.test(window.HTMLElement) || !!window.safari || !!window.WebKitPoint
try {
new Response(new ReadableStream())
if (window.isSecureContext && !('serviceWorker' in navigator)) {
useBlobFallback = true
}
} catch (err) {
useBlobFallback = true
}
// 是否支持转换器传输流 TransformStream，支持则直接使用他的读写流，完成下载数据的传输。都在需要通过 messageChannel 进行数据传输
let isSupportTransformStream = false
try {
const { readable } = new TransformStream() // 创建读写传输流
const messageChannel = new MessageChannel() // 创建消息通道，与 iframe 或 window.open 新建的页面中进行消息通信
messageChannel.port1.postMessage(readable, [readable])
messageChannel.port1.close()
messageChannel.port2.close()
isSupportTransformStream = true
} catch (err) {
console.log(err)
}
// 创建一个隐藏式的 Iframe，并通过 iframe 的 postMessage 进行消息传输
function makeIframe(src) {
console.log('makeIframe', src)
const iframe = document.createElement('iframe')
iframe.hidden = true
iframe.src = src
iframe.loaded = false
iframe.name = 'iframe'
iframe.isIframe = true
// 调用 iframe 中的 postMessage 方法，即从 iframe 中发送消息
iframe.postMessage = (...args) => iframe.contentWindow.postMessage(...args)
iframe.addEventListener('load', () => {
iframe.loaded = true
}, { once: true }) // 该事件监听器只监听一次，自动回收
document.body.appendChild(iframe)
return iframe
}
// 创建一个弹出窗口，模拟iframe的基本功能
// 使用 popup 新建弹窗，来模拟 iframe 的跨页面消息传输功能
function makePopup(src) {
console.log('makePopup', src)
// 事件代理器，使用 createDocumentFragment 来实现 popup 中的消息监听效果。
// 与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。
const delegate = document.createDocumentFragment()
const popup = {
frame: window.open(src, 'popupTitle', 'width=200,height=100'),
loaded: false,
isIframe: false,
isPopup: true,
remove() { popup.frame.close() },
// 适配器模式，使得 popup 对象与 iframe 对象有一样的表现。发送事件，监听事件，移除事件
dispatchEvent(...args) { delegate.dispatchEvent(...args) },
addEventListener(...args) { delegate.addEventListener(...args) },
removeEventListener(...args) { delegate.removeEventListener(...args) },
// 调用
postMessage(...args) { popup.frame.postMessage(...args) }
}
// 监听 popup 是否就绪
const onReady = evt => {
// 如果接受到来自 popup 的事件，则证明 popup 已就绪
if (evt.source === popup.frame) {
popup.loaded = true
window.removeEventListener('message', onReady)
popup.dispatchEvent(new Event('load'))
}
}
window.addEventListener('message', onReady)
return popup
}
// 创建写入流
function createWriteStream(filename) {
let bytesWritten = 0 // 记录已写入的文件大小
let downloadUrl = null // 触发下载时，需要访问的 url 地址
let messageChannel = null // 消息传输通道
let transformStream = null // 中间传输流
if (!useBlobFallback) {
// middleTransporter = middleTransporter || makeIframe(streamSaver.middleTransporterUrl) // https 环境下，则执行 iframe
middleTransporter = middleTransporter || window.isSecureContext
? makeIframe(streamSaver.middleTransporterUrl) // https 环境下，则执行 iframe
: makePopup(streamSaver.middleTransporterUrl) // 普通环境下，则通过 window.open 新建弹窗来完成
messageChannel = new MessageChannel() // 创建消息通道
// 处理文件名，使其为 url 格式
filename = encodeURIComponent(filename.replace(/\//g, ':'))
.replace(/['()]/g, escape)
.replace(/\*/g, '%2A')
// 如果支持 TransformStream，则将 TransformStream.readStream 传递给 port2
if (isSupportTransformStream) {
transformStream = new TransformStream(downloadStrategy === 'iframe' ? undefined : {
// 流处理，中间转换器，监听每一个流分片的经过
transform(chunk, controller) {
// 传输的内容，仅支持 Uint8Arrays 格式
if (!(chunk instanceof Uint8Array)) {
throw new TypeError('Can only write Uint8Arrays')
}
bytesWritten += chunk.length // 记录已写入的内容消大小
controller.enqueue(chunk) // 将消息推进队列
if (downloadUrl) {
location.href = downloadUrl // 由于在 response 中设置了返回类型为二进制流，可直接触发其下载。不会发生跳转
downloadUrl = null
}
},
// 结束写入时调用，如果数据量少，未经过 transform 就触发了 flush，则调用 location.href 触发下载
flush() {
if (downloadUrl) {
location.href = downloadUrl
}
}
})
// 使用 port1 传递数据，将读数据端通过 channel Message 传递给 service worker
// 由 write 暴露写端，供主线程写入数据。再在 service worker 中，通过 readStream 读取该数据。完成下载数据的传输。
// 即下载数据，不需要通过 channel message 传输，而是通过 transformStream 进行传递。
messageChannel.port1.postMessage({ readableStream: transformStream.readable }, [transformStream.readable])
}
// 监听给 port1 传递的消息
messageChannel.port1.onmessage = evt => {
// 接受 Service worker 发送的 url，并访问它
if (evt.data.download) {
// 为 popup 做的特殊处理
if (downloadStrategy === 'navigate') {
// 中间人完成使命，则删除中间人，后续传输通过 channelMessage，直接由主进程与 service worker 进行通信
middleTransporter.remove()
middleTransporter = null
// 首次访问该 url
if (bytesWritten) {
location.href = evt.data.download
} else {
downloadUrl = evt.data.download
}
} else {
if (middleTransporter.isPopup) {
middleTransporter.remove()
middleTransporter = null
// Special case for firefox, they can keep sw alive with fetch
if (downloadStrategy === 'iframe') {
makeIframe(streamSaver.middleTransporterUrl)
}
}
makeIframe(evt.data.download)
}
} else if (evt.data.abort) { // 消息终止
chunks = []
messageChannel.port1.postMessage('abort') //send back so controller is aborted
messageChannel.port1.onmessage = null
messageChannel.port1.close()
messageChannel.port2.close()
messageChannel = null
}
}
// 往中间人容器中发送消息，将 messageChannel.port2 传递给中间人
const response = {
transferringReadable: isSupportTransformStream,
pathname: Math.random().toString().slice(-6) + '/' + filename,
headers: {
'Content-Type': 'application/octet-stream; charset=utf-8',
'Content-Disposition': "attachment; filename*=UTF-8''" + filename
}
}
if (middleTransporter.loaded) {
middleTransporter.postMessage(response, '*', [messageChannel.port2])
} else {
middleTransporter.addEventListener('load', () => {
middleTransporter.postMessage(response, '*', [messageChannel.port2])
}, { once: true })
}
}
let chunks = [] // 需要传输下载的内容数组
// 如果有 transformStream，则直接返回 transformStream 读写流的 WritableStream 实例
if (!useBlobFallback && transformStream && transformStream.writable) {
// writable 返回由这个 TransformStream 控制的 WritableStream 实例。
// writable 返回的是一个实例，而不是一个 boolean 值
return transformStream.writable
}
// 如果不支持 transformStream，则自行创建一个 WritableStream，监听 WritableStream 的写入事件。将数据通过 messageChannel 的两个 port 进行传输
return new WritableStream({
// 写入数据
write(chunk) {
// 检查写入流，仅支持 Uint8Arrays 格式
if (!(chunk instanceof Uint8Array)) {
throw new TypeError('Can only write Uint8Arrays')
}
// 如果使用 blob 功能进行下载，则仅存储该数据，无法使用流式边获取数据边下载
if (useBlobFallback) {
chunks.push(chunk)
return
}
// service worker 可用，则通过信道传输该二进制流
messageChannel.port1.postMessage(chunk)
bytesWritten += chunk.length
if (downloadUrl) {
location.href = downloadUrl
downloadUrl = null
}
},
// 关闭写入流，将流式文件进行保存
close() {
// 使用 blob 实现功能，则将所有片段当做 blob 的内容，通过 createObjectURL 生成其链接，点击触发下载
if (useBlobFallback) {
const blob = new Blob(chunks, { type: 'application/octet-stream; charset=utf-8' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
link.click()
} else { // service worker 有效，则仅发出 end 事件，由 service worker 执行结束操作
messageChannel.port1.postMessage('end')
}
},
// 中断，不执行下载
abort() {
chunks = []
messageChannel.port1.postMessage('abort')
messageChannel.port1.onmessage = null
messageChannel.port1.close()
messageChannel.port2.close()
messageChannel = null
}
})
}
// 全局挂载 streamSaver 对象
window.streamSaver = {
createWriteStream, // 创建写流
middleTransporterUrl: 'https://blog.luckly-mjw.cn/tool-show/m3u8-downloader/mitm.html',
// middleTransporterUrl: 'https://jimmywarting.github.io/StreamSaver.js/mitm.html?version=2.0.0'
}
})()