Question

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

我尝试使用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

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

您可以在连接互联网后同步图像

在PWA中离线时的图像存储

2 个答案: