Protocol
filesystem: stores files with a link to the same source as the document requested by LocalFileSystem . That is, if JavaScript is created in the question, for example, at http://example.org , the path to LocalFileSystem must match the protocol http://example.org , and not file:
If you are trying to save files or folders for accessing the file: protocol offline, you can create an .html document for use as a bookmark template.
Visit the local .html file once on the Internet to get the files and populate the LocalFileSystem . If navigator.onLine is true , go to http://example.org , otherwise get and process the files and folders stored in LocalFileSystem .
Create the list as JSON or JavaScript Array to save the list of files to extract, instead of parsing the .html document to place the files.
Store the local file as a bookmark. Launch Chromium, Chrome with the flag --allow-file-access-from-files set to access the filesystem: protocol from the file: protocol and the file: protocol in the filesystem: protocol if it is not on the network.
<!DOCTYPE html> <html> <head> <title>LocalFileSystem Offline Videos Bookmark</title> </head> <body> <script> // location to visit if online const onLineURL = "https://lorempixel.com/" + window.innerWidth + "/" + window.innerHeight + "/cats"; const props = { requestedBytes: 1024 * 1024 * 20000, folder: "videos", // list of files to fetch for offline viewing mediaList: [ "http://mirrors.creativecommons.org/movingimages/webm/" + "ScienceCommonsJesseDylan_240p.webm" , "https://nickdesaulniers.imtqy.com/netfix/demo/frag_bunny.mp4" ] }; let grantedBytes = 0; function getLocalFileSystem ({requestedBytes = 0, mediaList=[], folder = ""}) { if (!requestedBytes || !mediaList.length || !folder) { throw new Error("requestedBytes: Number" + " or mediaList: Array" + " or folder: String not defined"); }; // do stuff with `filesystem:` URL function processLocalFilePath(localPath) { const video = document.createElement("video"); document.body.appendChild(video); video.controls = true; video.src = localPath; } function errorHandler(err) { console.log(err); } function writeFile(dir, fn, fp, localPath) { console.log(dir, fn, fp, localPath); dir.getFile(fn, {}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { // do stuff when file is written console.log(e.type, localPath + " written"); window.webkitResolveLocalFileSystemURL(localPath , function(file) { // file exists in LocalFileSystem processLocalFilePath(localPath); }, errorHandler) }; fileWriter.onerror = errorHandler; fetch(fp).then(function(response) { return response.blob() }).then(function(blob) { fileWriter.write(blob); }).catch(errorHandler) }, errorHandler); }, errorHandler); } if (mediaList && mediaList.length) { navigator.webkitTemporaryStorage.requestQuota(requestedBytes , function(grantedBytes_) { grantedBytes = grantedBytes_; console.log("Requested bytes:", requestedBytes , "Granted bytes:", grantedBytes); window.webkitRequestFileSystem(window.TEMPORARY , grantedBytes , function(fs) { const url = fs.root.toURL(); mediaList.forEach(function(filename) { const localPath = url + folder + "/" + filename.split("/").pop(); window.webkitResolveLocalFileSystemURL(localPath , function(file) { // file exists in LocalFileSystem console.log(localPath + " exists at LocalFileSystem"); processLocalFilePath(localPath) }, function(err) { console.log(err, localPath + " not found in LocalFileSystem"); // Exception is thrown if file // or folder path not found // create `folder` directory, get files fs.root.getDirectory(folder, {} , function(dir) { writeFile(dir , filename.split("/").pop() , filename , localPath); }), errorHandler }) }) }) }, errorHandler) } } if (location.href !== onLineURL && navigator.onLine) { location.href = onLineURL; } else { getLocalFileSystem(props); } </script> </body> </html>
see also
An alternative approach might be to use ServiceWorker