Как загрузить хранилище с FireBase (аудио, изображения), чтобы использовать их, когда телефон находится в автономном режиме? - PullRequest
0 голосов
/ 20 декабря 2018

Я пытаюсь запрограммировать приложение с использованием Cordova и React, которое должно работать в автономном режиме, мои изображения и аудио находятся в хранилище Firebase, мне нужно загрузить их в соответствии с языком, который был выбран для их доступности в автономном режиме.

Поиск решения в основном давал функцию getFile () с примерами на JAVA, какой-либо другой способ для javascript?

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Нашли способ :) Мы используем файл плагина cordova: вся документация о файле плагина https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

export const AccessFileSystem = {
getFromFirebase = () => {
    let firebase = firebaseApp.storage()
    let imageRef = firebase.ref('/images/CattleCar.jpg')
    imageRef.getDownloadURL().then(
        () => getSampleFile(url)
    )
},

getSampleFile = () => {
    //get image from url
    fetch(`${url}`)
        //turn the image into binary information (similar to base 64)
        .then(response => response.blob())
        .then(image => {
            // Then create a local URL for that image and print it 

            console.log("image?!", image);
            this.saveFile(image);
        })
},

saveFile = (fileContent) => {
    //access device's file system 
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, (fs) => {

        console.log('Request file system succeed, file system open: ' + fs.name);
        //create new file in the file system which is accessible to this cordova app only
        fs.root.getFile("first-image.png", { create: true, exclusive: false }, (fileEntry) => {
            console.log("fileEntry is file?" + fileEntry.isFile.toString());
            //erite to that file we have created
            fileEntry.createWriter(fileWriter => {
                fileWriter.onwriteend = () => {
                    console.log("Successful file write...");
                };
                fileWriter.onerror = e => {
                    console.log("Failed file write: " + e.toString());
                };

                fileWriter.write(fileContent);
            });

        }, (err) => {
            console.log("Error creating a new file, with err", err);
        });

    }, (err) => {
        console.log("Error requesting file system ?! with err", err);
    });
},

//when we whant to read the file
readFile = () => {
    //accessing file system
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, (fs) => {
        console.log('Request file system succeed, file system open: ' + fs.name);
        //get wanted file
        fs.root.getFile("first-image.png", { create: true, exclusive: false }, fileEntry => {
            var self = this;

            var displayImage = function (imageContent) {
                console.log("fileEntry on displayImage", fileEntry);
                self.setState({ loadedImg: fileEntry.nativeURL });
            }

            fileEntry.file(function (file) {

                let reader = new FileReader();

                reader.onloadend = () => {
                    console.log("Successful file read: " + reader.result);
                    displayImage(reader.result);
                };

                reader.readAsText(file);

            }, err => {
                console.log("Could not read file, err: ", err);

            });

        });

    });


}

}

0 голосов
/ 23 декабря 2018

См. Кэширование файлов с помощью Service Worker

Мы можем кэшировать HTML, CSS, JS и любые статические файлы, которые составляют оболочку приложения, в событии установкиработник службы:

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(
        [
          '/css/bootstrap.css',
          '/css/main.css',
          '/js/bootstrap.min.js',
          '/js/jquery.min.js',
          '/offline.html'
        ]
      );
    })
  );
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...