在 PWA 中离线时的图像存储

Posted 2023-03-05

【中文标题】在 PWA 中离线时的图像存储

【英文标题】：Image storage when offline in PWA

【发布时间】：2019-04-18 04:57:21

【问题描述】：

我正在为我现有的托管网站构建手动 PWA（不使用框架 IONIC、React 等）。 我的基本要求是我想从我的手机摄像头捕捉图片。但条件是： 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，但如果有其他平台可以理解，可以建议期刊方法。

【问题讨论】：

如果你想避免使用任何框架或库，那么它对你来说并不漂亮，因为 localStorage 不是支持你需要的最佳 API，而且浏览器往往比另一件事支持更好，而且-浏览器持久性几乎不是真正的持久性，因为存在配额等。考虑这个库：github.com/localForage/localForage它将所有各种持久性包装到一个不错的 API 中

谢谢。将来会对我有所帮助。

【参考方案1】：

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

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

【讨论】：

我做到了。但又来到了 CORS 问题。之后我问了这个问题。我需要另一种干净的解决方案。

如果您遇到了 cors 问题，那么您问了绝对错误的问题。因为当您向服务器发出请求时，您只会遇到 cors 问题。那么你能显示你的请求代码吗？我认为原因是标题

我可以在 window.addEventListener 中添加我的脚本吗？因为我尝试过并且页面没有按预期显示。但删除脚本后，Alert() 正在显示，并且我的脚本也按预期运行。

我在我的html中使用了ononline和onoffline函数。它运行良好。问题是它不能在 chrome 中工作。此外，在 mozilla 中没有 cors 问题，我通过 crossorigin 处理了它，但同样的问题仍然存在于 chrome 中。

localstorage的磁盘空间比较小（2-10Mb），一不小心可能会用完

【参考方案2】：

我建议您使用保存文件的本地文件夹，并将其引用 [ex, path] 保存在索引数据库中。

当您有互联网连接时，您可以同步图像。 这是您的 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);

      );
    );
  

【讨论】：

也许你可以分享一些代码来改进你的答案？

@StefGeysels。我分享了一些代码，希望对你有所帮助。