PWA 离线时的图像存储

Question

我正在为我现有的托管网站构建手动 PWA（不使用框架 IONIC、React 等）。我的基本要求是我想从我的手机相机中捕捉照片。但条件是： 1. 当我拍摄图片时，我将完全离线。2.我想把它上传到服务器意味着数据库中。但是当我离线时，我想将其存储在 localstorage 中，当我在 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

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

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