PWA 中离线时的图像存储

Question

我正在为我现有的托管网站构建手动 PWA（不使用框架 IONIC、React 等）。我的基本要求是我想用 phone 相机拍摄照片。但条件是： 1. 拍照时我会完全离线。 2.我想把它上传到数据库中的服务器方法。但由于我处于离线状态，我想将其存储在本地存储中，当我在 3 天后恢复在线时，它将恢复剩余的内容并自动将图像上传到服务器。

我尝试使用 javascript，但效果不佳。我想要的基本方法是：

if(camera clicked)->
   if(upload btn clicked)-> 
        if(device is online)-> 
           upload to the server;
           (**or I can call one function here which can upload the image to server.)
        else if(device is offline)->
           upload to localstorage;
//again when device gets online I will call one **function(which is I am calling from **) in constructor which get executed everytime when site is reloaded or app is opened. 

My ** function will be :
upload()->
    if(device is online)->
      try looking into localstorage -> if image address is available ->
        upload_image_to server where src="address_of_image_in_localstorage".

我只想使用 html 和 javascript 而不是任何框架来实现它。我在上面添加的代码只是猜测的方法，而不是任何类型的代码。如果有，请提出任何改进的方法。如果有人能帮助实现代码，而不仅仅是提供信息性答案，那就更好了。

方法目前仅适用于android，但如果有其他平台需要理解，可以建议期刊方法。

Answer 1

我建议先 convert the image to base 64 并将其保存到您的 localstorage。有一个名为 online 的事件，它将检测用户何时再次上线，然后您可以将图像上传到数据库：

window.addEventListener("online", function(){ alert("User is now online"); });

Answer 2

我建议您使用本地文件夹，您将在其中保存文件及其引用 [例如，路径] 保存在索引数据库中。

您可以在有互联网连接时同步图像。这是您的 HTML 代码的样子：

 <div class="form-group col-md-12 col-sm-12 col-xs-12" >
     <label for="agreement_img">Upload billede:</label>
     <input type="file" class="form-control image1" id="image1" name="image1">
</div>

您的 javascript 保存离线图片的代码

if( document.getElementById("image1").files.length != 0 ){
            var files1 = $('#image1')[0].files[0];
            writeImage(files1.name, files1,1);    
  }

 var OfflineArray = {};
  var SIZE = 100 * 1024 * 1024; // 100 MB

  var errorFct = function (e) {
    console.error(e);
  };

  var getFileSystem = function (successFct) {
    navigator.webkitPersistentStorage.requestQuota(SIZE, function () {
      window.webkitRequestFileSystem(window.PERSISTENT, SIZE, successFct, errorFct);
    }, errorFct);
  }; 


  var createTempName = function () {
    return 'temp.name.dummy.jpg';
  };

  var addToSyncQueue = function (filename) {
    // adding to sync queue
    console.log('Adding to queue', filename);
  };

  var showImage = function (fileName,imgno) {
    var src = 'filesystem:' + window.location.origin + '/persistent/' + fileName;
    return src;

  };

  var readImage = function (fileName, successFct) {
    getFileSystem(function (fileSystem) {
        fileSystem.root.getFile(fileName, {}, function (fileEntry) {

          fileEntry.file(successFct, errorFct);

        }, errorFct);
      }
    );
  };

  var writeSuccessFull = function (fileName,imgno) {
    //addToSyncQueue(fileName);

    var imgfile = showImage(fileName,imgno);
    console.log(imgfile);
    var cnt = localStorage.getItem('cnt');
    localStorage.setItem("offlineimg"+ cnt +"_"+ imgno, imgfile);
  };

  function writeImage(fileName, file,imgno) {
    getFileSystem(function (fileSystem) {
      fileSystem.root.getFile(fileName, {create: true}, function (fileEntry) {

        fileEntry.createWriter(function (fileWriter) {
          fileWriter.onwriteend = writeSuccessFull(fileName,imgno);

          fileWriter.onerror = errorFct;

          fileWriter.write(file);

        }, errorFct);

      });
    });
  }

PWA 中离线时的图像存储

Image storage when offline in PWA

offline-mode

local-storage

ionic-framework

progressive-web-apps