Chrome Web App with A Lot of Images - What is the best way to code?

[Jessica Baartman]

What is the best way to create a chrome web app and have about 300-400MB of images download initially on load to a local storage and then be able to retrieve those images at any time in my app.

I want my app to look at local storage first, and if images exist use those images and if they don't then download from an online repository. My app can have upwards of over 1000 images and I don't want to code individual XMLHTTPRequests for each image.

Specific examples that could help me would be great. I am a novice developer and have successfully created chrome apps before but now, this time, I need to care about the size of my app.

Thank you, 

[PhistucK]

1. Chrome applications (on non Chrome OS platforms) will not be supported for long (though "two years" might be considered "long"), so you might want to re-think your strategy - http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html.

2. If you want to be cross browser and make sure your code keeps working for a long time, I guess you should use IndexedDB to store your images.

Otherwise, for Chrome only (but might not supported be for long, since it is no longer on the standards track), you can leverage the FileSystem API.

If you insist on creating a Chrome application, maybe leverage chrome.fileSystem.

☆PhistucK

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+unsubscribe@chromium.org.

[Jon Perryman]

I think that Jessica is talking about a web app (not chrome app). I'm guessing that Jessica is referring to deferred loading of images (also referred to as lazy loading). To speed up the display of the page, images are not initially loaded. If that's the case, then there is not a specific implementation for this. I'm guessing that 

The technique to do what you want is to use a single image as placeholders for each image to be deferred. Then a a javascript replaces each placeholder image with the actual image to be displayed.

The easiest and most common implementation is to use a timeout. Images are replaced at the timeout period. The drawback to this method is that scrolling down the page will show the placeholder image until the timeout occurs.

The more complicated but correct method is to load images as they become visible in the view port. Or to be even more responsive, you could use a combination of both. Start replacing the placeholder images but if the user scrolls down the screen, then load the images in the view port.

[PhistucK]

Oops, you might be right. I was mistaken because of "chrome web app" and "the size of my app".

Your solution did not cover the local storage problem, though. And the way to fetch the images (mine neither :)).

I guess either fetch or XMLHttpRequest are required in order to save the original images. There is no way around it. But you can automate the process (have an array of the URLs you need to store in your local storage, forEach it and fetch the images with some kind of a timeout in order not to overload the server with hundreds of requests). If your server is configured properly, fetch or XMLHttpRequest will get the image from the cache instead of from your server, which will save network requests and traffic.

If you do not mind losing quality (re-compress to JPEG or WebP) or saving bigger files (convert to PNG), you can get the image data from the image, put it into a <canvas>, export it using toBlob and save it in your IndexedDB.

☆PhistucK

[Jon Perryman]

Now that I think about it a little more, maybe jessica is asking about returning to a single web page multiple times. In that case, she would need to look at browser caching options. Has she specified a page expiration that is already expired? Are the images somehow being expired from cache? The first load of images will be slow but subsequent requests for the page should refer to the browser cache.

You do a great job answering questions. The problem is that most of the questions are extremely vague and you are guessing about what is being asked. Why was "chrome" mentioned if it's a web app? Is this a single web page or multiple web pages? Why was local storage mentioned?

I really liked that Jessica gave a lot of good information but my point is: please ask the real question too instead of just asking about solutions to your partial solution. I was guessing that Jessica is asking how she can make her web page with hundreds of images load faster. You guessed something totally different but we both are just guessing and we both may be wrong.

[Jonathan Garbee]

Service workers are the best way to handle this. However, precaching that much data up front is not responsible. Cache as little as possible up front, then as images are requested check the cache first then pull from network and cache if they don't exist.

Remember, data costs and in some places a lot. Only send what users need in order to get what they asked for. Just in Google Fi this initial cache would cost a user about $4 or so in data. Is it worth that much value to people?

☆PhistucK

☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

[Jessica Baartman]

Sorry if I was unclear. I am coding a Web App. I do understand that Web App's will not be supported for much longer. Ultimately what I am trying to achieve is a Web App, but then I will use Apache Cordova to package it for Android. It is only because I am not a strong Android developer but know how to code in HTML, Javascript and CSS. I am not going to be loading a single web page multiple times. My app just has hundred's of images and I don't want to include them all in the "end package" as it increases the final size of my app. I want to load the images from an external source into the individual's local storage then reference the local storage any time the app is loaded after initial load.

I am unsure how to reference local storage after initial load, and I am unsure how to download hundreds of images in an easy way to a local storage. I understand this would probably be an easier task if I coded this directly using Android source code, but I need to code this in HTML and javascript.

I hope this clears up any confusion. 

Thank you,

[PhistucK]

Well, you were given answers and solution pointers for your problem. Beyond that, you should either search the web for more, or use some general web development support forum, since this is not such a forum.

Also, to be accurate, a "Web App" is not specific to Chrome and will be supported for eternity (or so I hope), since this is just a page that can be opened in any browser.

Chrome applications ("Chrome apps") are Chrome specific, need a manifest.json file and will not be supported beyond 2018.

☆PhistucK

[Jon Perryman]

Caching and pre-loading are advanced topics that can be easily abused. There's a reason it's not directly exposed to you and why it's not easy to use. Your application is rarely the most important to the user. You need to find a good balance that works for you and the owner of the device. You cannot access local storage thru javascript nor most API's. You will find creating your own local cache very difficult because we don't want you to do it. And for good reason.

Every browser (chrome, IE, Firefox, Thunderbird, ...) has built in caching. Please allow the browser to manage caching!!! It does a far better and more efficient job than you ever could. The browser will decide when <img> files are not as important to the user as other <img> files they use. Can your cache be easily moved to an SD card or back to local storage? Can your cache be resized because they are short on storage? Did you give the user ANOTHER tool to manage another cache?

Pre-loading or deferring <img>'s is a different story. If you are pre-loading <img>'s that might (or might not) be used later then you are wasting time and bandwidth. If you are not careful, your app will be marked as a virus because you are affecting other cached data that is more important to the user. Deferring <img>'s on a page is good because those images are not in the view port so I see the page much quicker.

Warning: 300MB-400MB is misleading because that is not the actual storage used. Each file always has wasted space that can be very large. File systems allocate in chunks that will be the minimum size a file will use. Wasted space can be many times the actual file size. With hundreds of images, this will probably be more than 500MB. It really depends on the file system and the formatting options used. Fortunately, smaller disk's waste less space using the defaults. 

Is your stealing 0.5GB the best use of my storage? Do you think it's fair to hide 0.5GB storage required for your app? How do I find out that your app has taken so much storage? When I no longer want your app, will that 0.5GB still be used on our devices. Please think about what you are doing.

If you insist on doing this anyways, then ask your question on the Apache Cordova group. It looks like Cordova has some code installed on the local device. They give you access to some local resources. Maybe they give you access to local storage. It's wrong if they do but I'm not here to be the enforcer.

Good luck.