时间戳

首页 > 解决方案 > 在 PWA 中离线时的图像存储

ionic-framework - 在 PWA 中离线时的图像存储

问题描述

我正在为我现有的托管网站构建手动 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，但如果有其他平台可以理解，可以建议期刊方法。

标签： ionic-frameworklocal-storageprogressive-web-appsoffline-mode

解决方案

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

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

推荐阅读