我正在为我现有的托管网站构建手动 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,但如果有其他平台的理解,可以建议期刊方法。
最佳答案
我会先推荐 convert the image to base 64并将其保存到您的 localstorage
.有一个名为 online 的事件,它会检测用户何时再次上线,然后您可以将图像上传到数据库:
window.addEventListener("online", function(){ alert("User is now online"); });
关于ionic-framework - PWA 离线时的图像存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53313536/