Chrome 文件系统 接口 试验

filesystem_api_test.js

// https://developers.google.com/web/updates/2017/08/estimating-available-storage-space

const storageManager = navigator.storage

// 当前空间使用率
window.log = () => {
	storageManager
		.estimate()
		.then(estimate =>
			console.log(
				`estimate: quota( ${Math.round(estimate.quota / (1024 * 1024))} MiB ) usage( ${Math.round(
					estimate.usage / (1024 * 1024)
				)} MiB ) (${Math.round(estimate.usage / estimate.quota) * 100}%)`
			)
		)
	storageManager.persist().then(persist => console.log('persist', persist))
	storageManager.persisted().then(persisted => console.log('persisted', persisted))
}

// Cache API
// 然而缓存不了 40 MB 以上的单文件
// ;(async function() {
// 	const cache = await caches.open('test')
// 	window.cache = cache
// 	cache.add('/assets/2.bin')
// })()

// https://www.html5rocks.com/zh/tutorials/file/filesystem/

;(async function() {
	const fs = await new Promise((resolve, reject) => {
		;(window.webkitRequestFileSystem || window.requestFileSystem)(
			window.TEMPORARY,
			1024 * 1024 * 1024,
			fs => {
				resolve(fs)
			},
			err => {
				reject(err)
			}
		)
	})
	window.fs = fs

	// 所有缓存了的目录
	window.logDir = () => fs.root.createReader().readEntries(entries => console.log(entries))
	window.clearAll = () =>
		fs.root.createReader().readEntries(entries => {
			entries.forEach(entry => {
				entry.remove(() => console.log(entry.name))
			})
		})

	const readFile = (entry, dataType) => {
		return new Promise((resolve, reject) => {
			entry.file(file => {
				const fileReader = new FileReader()
				fileReader.onloadend = event => resolve(event.target.result)
				fileReader.readAsArrayBuffer(file)
			})
		})
	}

	const writeFile = (entry, data, dataType) => {
		return new Promise((resolve, reject) => {
			try {
				entry.createWriter(fileWriter => {
					const blob = new Blob([data])
					fileWriter.onwriteend = event => resolve()
					fileWriter.onerror = error => reject(error)
					fileWriter.write(blob)
				})
			} catch (e) {
				reject(e)
			}
		})
	}

	const get = (url, dataType) => {
		return new Promise((resolve, reject) => {
			const filename = url.replace(/\//g, '$')

			fs.root.getFile(
				filename,
				{ create: false, exclusive: false },
				// 文件已存在
				async entry => {
					console.log('读取缓存', url)
					const data = await readFile(entry, dataType)
					resolve(data)
				},
				// 文件不存在
				async err => {
					console.log('新建', url)

					const _res = await fetch(url)
					const data = await _res[dataType]()

					fs.root.getFile(
						filename,
						{ create: true, exclusive: false },
						async entry => {
							writeFile(entry, data, dataType)
								.then(() => resolve(data))
								.catch(err => {
									entry.remove(() => {})
									throw err
								})
						},
						err => {
							throw err
						}
					)
				}
			)
		})
	}

	const data = await get('/assets/1.bin', 'arrayBuffer')
	console.log(data)
})()