Image storage when offline in PWA
I am building Manual PWA (Not using framework IONIC,React etc.) for my existing hosted website.
My basic requirement is I want to capture the picture from my phone camera. But conditions are:
1. When I am capturing the picture I will be totally offline.
2. I want to upload it to the server means in database. But as I am offline I want to store that in localstorage and when I get back online even after 3 days it will resume the remaining thing and automatically will upload the image to server.
I tried using javascript but didn't got that much.
the basic approach i want is :
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".
I want to implement this using only html and javascript not any framework.
The code I have added above is just guessed approach not any type of code.
Please suggest any improved approach if have. And It will be better if anyone can help along with implemented code and not only informative answers.
Approach is just for android now but can suggest journal apporach if have for another platform for understanding.
ionic-framework local-storage progressive-web-apps offline-mode
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
add a comment |
I am building Manual PWA (Not using framework IONIC,React etc.) for my existing hosted website.
My basic requirement is I want to capture the picture from my phone camera. But conditions are:
1. When I am capturing the picture I will be totally offline.
2. I want to upload it to the server means in database. But as I am offline I want to store that in localstorage and when I get back online even after 3 days it will resume the remaining thing and automatically will upload the image to server.
I tried using javascript but didn't got that much.
the basic approach i want is :
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".
I want to implement this using only html and javascript not any framework.
The code I have added above is just guessed approach not any type of code.
Please suggest any improved approach if have. And It will be better if anyone can help along with implemented code and not only informative answers.
Approach is just for android now but can suggest journal apporach if have for another platform for understanding.
ionic-framework local-storage progressive-web-apps offline-mode
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
1
if you want to avoid any framework or library its gonna be not pretty for you as localStorage is not the best API to support what you need and browsers tend to support one thing better than the other, plus in-browser persistence is hardly a true persistence as there are quotas etc. Consider this library: github.com/localForage/localForage it wraps all various persistences into a nice API
– Sergey Rudenko
Nov 15 '18 at 23:50
Thanks for this. It will help me in future.
– Amit Gandole
Nov 16 '18 at 6:33
add a comment |
I am building Manual PWA (Not using framework IONIC,React etc.) for my existing hosted website.
My basic requirement is I want to capture the picture from my phone camera. But conditions are:
1. When I am capturing the picture I will be totally offline.
2. I want to upload it to the server means in database. But as I am offline I want to store that in localstorage and when I get back online even after 3 days it will resume the remaining thing and automatically will upload the image to server.
I tried using javascript but didn't got that much.
the basic approach i want is :
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".
I want to implement this using only html and javascript not any framework.
The code I have added above is just guessed approach not any type of code.
Please suggest any improved approach if have. And It will be better if anyone can help along with implemented code and not only informative answers.
Approach is just for android now but can suggest journal apporach if have for another platform for understanding.
ionic-framework local-storage progressive-web-apps offline-mode
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
I am building Manual PWA (Not using framework IONIC,React etc.) for my existing hosted website.
My basic requirement is I want to capture the picture from my phone camera. But conditions are:
1. When I am capturing the picture I will be totally offline.
2. I want to upload it to the server means in database. But as I am offline I want to store that in localstorage and when I get back online even after 3 days it will resume the remaining thing and automatically will upload the image to server.
I tried using javascript but didn't got that much.
the basic approach i want is :
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".
I want to implement this using only html and javascript not any framework.
The code I have added above is just guessed approach not any type of code.
Please suggest any improved approach if have. And It will be better if anyone can help along with implemented code and not only informative answers.
Approach is just for android now but can suggest journal apporach if have for another platform for understanding.
ionic-framework local-storage progressive-web-apps offline-mode
ionic-framework local-storage progressive-web-apps offline-mode
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
asked Nov 15 '18 at 6:20
Amit GandoleAmit Gandole
707
707
1
if you want to avoid any framework or library its gonna be not pretty for you as localStorage is not the best API to support what you need and browsers tend to support one thing better than the other, plus in-browser persistence is hardly a true persistence as there are quotas etc. Consider this library: github.com/localForage/localForage it wraps all various persistences into a nice API
– Sergey Rudenko
Nov 15 '18 at 23:50
Thanks for this. It will help me in future.
– Amit Gandole
Nov 16 '18 at 6:33
add a comment |
1
if you want to avoid any framework or library its gonna be not pretty for you as localStorage is not the best API to support what you need and browsers tend to support one thing better than the other, plus in-browser persistence is hardly a true persistence as there are quotas etc. Consider this library: github.com/localForage/localForage it wraps all various persistences into a nice API
– Sergey Rudenko
Nov 15 '18 at 23:50
Thanks for this. It will help me in future.
– Amit Gandole
Nov 16 '18 at 6:33
1
1
if you want to avoid any framework or library its gonna be not pretty for you as localStorage is not the best API to support what you need and browsers tend to support one thing better than the other, plus in-browser persistence is hardly a true persistence as there are quotas etc. Consider this library: github.com/localForage/localForage it wraps all various persistences into a nice API
– Sergey Rudenko
Nov 15 '18 at 23:50
if you want to avoid any framework or library its gonna be not pretty for you as localStorage is not the best API to support what you need and browsers tend to support one thing better than the other, plus in-browser persistence is hardly a true persistence as there are quotas etc. Consider this library: github.com/localForage/localForage it wraps all various persistences into a nice API
– Sergey Rudenko
Nov 15 '18 at 23:50
Thanks for this. It will help me in future.
– Amit Gandole
Nov 16 '18 at 6:33
Thanks for this. It will help me in future.
– Amit Gandole
Nov 16 '18 at 6:33
add a comment |
1 Answer
1
active
oldest
votes
I would recommend to first convert the image to base 64 and save it to your localstorage. There is an event called online, wich will detect when the user goes online again and there you can upload your image to the DB:
window.addEventListener("online", function() alert("User is now online"); );
answered Nov 15 '18 at 6:35
JonathanJonathan
461
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313536%2fimage-storage-when-offline-in-pwa%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would recommend to first convert the image to base 64 and save it to your localstorage. There is an event called online, wich will detect when the user goes online again and there you can upload your image to the DB:
window.addEventListener("online", function() alert("User is now online"); );
answered Nov 15 '18 at 6:35
JonathanJonathan
461
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
add a comment |
I would recommend to first convert the image to base 64 and save it to your localstorage. There is an event called online, wich will detect when the user goes online again and there you can upload your image to the DB:
window.addEventListener("online", function() alert("User is now online"); );
answered Nov 15 '18 at 6:35
JonathanJonathan
461
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
add a comment |
I would recommend to first convert the image to base 64 and save it to your localstorage. There is an event called online, wich will detect when the user goes online again and there you can upload your image to the DB:
window.addEventListener("online", function() alert("User is now online"); );
answered Nov 15 '18 at 6:35
JonathanJonathan
461
I would recommend to first convert the image to base 64 and save it to your localstorage. There is an event called online, wich will detect when the user goes online again and there you can upload your image to the DB:
window.addEventListener("online", function() alert("User is now online"); );
answered Nov 15 '18 at 6:35
JonathanJonathan
461
answered Nov 15 '18 at 6:35
JonathanJonathan
461
answered Nov 15 '18 at 6:35
JonathanJonathan
461
answered Nov 15 '18 at 6:35
JonathanJonathan
461
461
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
add a comment |
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
I did that. But again came to CORS issues. After that I have asked this question. I need some another clean solution.
– Amit Gandole
Nov 15 '18 at 11:52
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
If you get a cors issue, then you asked the absolut wrong question. Because you only get a cors issue, when you make request to a server. So can you show your request code? I think the reason are the headers
– Jonathan
Nov 15 '18 at 12:30
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
Can I add my script in window.addEventListener?? Because I tried and page not displaying as expected. But after removing script, Alert() is showing and also my script running as expected.
– Amit Gandole
Nov 15 '18 at 13:06
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
I used ononline and onoffline functions in my html. and it quite runs well. Problem is that its not working in chrome. Also the in mozilla there is no cors issue i handled it through crossorigin but same issue remain in chrome.
– Amit Gandole
Nov 15 '18 at 13:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313536%2fimage-storage-when-offline-in-pwa%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
if you want to avoid any framework or library its gonna be not pretty for you as localStorage is not the best API to support what you need and browsers tend to support one thing better than the other, plus in-browser persistence is hardly a true persistence as there are quotas etc. Consider this library: github.com/localForage/localForage it wraps all various persistences into a nice API
– Sergey Rudenko
Nov 15 '18 at 23:50
Thanks for this. It will help me in future.
– Amit Gandole
Nov 16 '18 at 6:33