So we have this web image gallery we are working on. We are planning an architecture that is similar to this:
1 - Download all images from the server and store it in the local storage (HTML5)
2 - Display in gallery as if it were rendered from local drive
3 - Store any edits done in the gallery in local drive
4 - Upon clicking Completed button, upload all the change information into remote server
The images will have a higher count, like maybe in the thousands. I wanted to check if the above is do-able.
The team working on this project says that HTML5 local storage is of no use in context. They state that downloaded images are always going to reside in the cache and it will cause performance degradation in any case, and it cannot be helped.
Is that true? Is there anything that can be done using new HTML5 options to optimize this work flow?
Theoretically you could base64 encode the images and store the resulting string in local storage. The only reason to do something like this, though, is to persist the edited image in an "offline" mode whereby they can close and reopen their browser without losing any of the changes they made. Otherwise these edits could be stored in memory and, once a user was finished, could then be persisted back to the server.
As for the original images themselves, your team members are correct, once the file has been downloaded, the browser won't attempt to fetch it again unless the expiration date in the header has lapsed.
EDIT
Found a link to another stackoverflow post describing the process:
How to save an image to localStorage and display it on the next page?
Related
I have an HTML based project that works with media from other websites, which embeds images / songs / videos using their direct links. The system works perfectly so far, but I wish to make a change: As a lot of assets are accessed repeatedly by viewers, it would seem more optimal to cache them in a controlled way, so whenever certain media pops up you don't need to fetch it from the origin server each time. I never did this before so I don't know if and how it can be done.
To use an oversimplification: I have an embedded photo called "image.png" inside an image element, which will show up whenever I open the site. Currently it's simply defined as:
<img scr="https://foo.bar/image.png">
Works perfectly! However I want to make sure that when my site is accessed, you don't need to fetch that image from foo.bar each time: You will keep it in a local directory after downloading it once, from which the script can fetch and work with the file independently. For Firefox for instance, this subdirectory would be inside your ~/.mozilla/firefox/my_profile directory. Ideally it can be defined using a fixed name, so no matter which URL the website is opened from it uses the same cache path instead of each mirror of the project generating its own.
First, my script must tell the browser to download https://foo.bar/image.png and store it into this cache subdirectory. After that, it would need to generate a link to embed it directly from that subdirectory, so the URL I use would now be something of the following form:
<img scr="file://path_to_cache/image.png">
How do I do those two things, in a way that's compatible across popular web browsers? As a bonus, it would be useful to know if I can limit the size of this cache directory, so once it reaches say 100 MB the oldest items will be removed to stay under that size.
You could alternately add caching to your server's .htaccess file.
This site explains how: https://www.siteground.com/kb/leverage-browser-caching/
However this does not cache the image on the user's machine, it is cached on the server for quicker response.
You could use service workers to cache images on the user's machine.
https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
Hope this helps.
This is Two questions:
1/ How can I read the cache stored by the browser if there's no permission restrictions?
2/ If the user browse into a website, is there a posibility of storing the page source code [HTML] in cache? (big website like youtube ..etc)
Thanks.
There is no way to read the cache manually - it all happens behind the scenes, if there is cache.
Yes, you can store the website's source code to the browser cache, but only the client-side part - HTML/CSS/JS/images/fonts/etc. It's called HTML5 Application Cache and it consists in a simple manifest file, which instructs the browser to download certain files locally and next time load them instead of downloading again. This cache you can programmatically update. Keep in mind, though, that most browsers have a limit (usually 5MB) of how much data you can store.
Hope that helps.
As part of a weekend project, I'm making a little website that draws on a (google) map based on user running tracks. I would like users to be able to upload a snapshot of the map using a facebook share button. The catch is, I would like to avoid hosting the images myself, to reduce bandwidth usage.
I can use html2canvas to turn a map into a canvas, and that into a .png using toDataURL(). The png would then be contained in a javascript variable in the user's browser, and not stored (or hosted) anywhere. So, with that in mind:
Can anyone think of a way to make facebook scrap that image for the entry in the user's time line?
Would facebook store the image permanently, or would it try to refresh it periodically (and fail)?
I understand that following the link in the post would also not go to the image (which doesn't exist), but less assume that's not an issue for now.
Any ideas or alternatives would be very welcome! Thanks!
According to How long is Facebook caching the sharing thumbnails?, facebook is caching share images for 3-5 years, so if you can get it in there..
perhaps you DO save the image and then delete it with a cron task that runs every minute?
* * * * * /home/me/scripts/deleteAllMyShareThumbs.sh
Following html5rocks' tutorial, I hoped that window.applicationCache.update() would help to force re-building the offline cache.
(http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-updating-cache)
The purpose is to allow the users to hit an "update cache" button. This, because even files (css, img, etc.) are modified, the computer/tablet doesn't even check them for udpates. The users are left with old content.
How can this be done in JS?
If you are asking "how the client should know that the files are modified", then the answer is simple - the cache manifest should contain some unique identifier which gets updated when those files are updated. I generate the manifest with PHP and use a combination of monotonous increasing revision number and MAX(filemtime) from all the cached files - when the manifest file is different from the one the client has, it will check all the manifest-listed files for updates.
update() triggers the update check and downloads the updates if there are any, but it doesn't actually replace old cached data with the new.
swapCache() will swap out the old cached version with a newly downloaded one.
However, at that point your old JS has already created all the plumbing your page depends on...
My html5 application calls update() periodically, and when the cache update is downloaded, it just displays a button to the user saying "Install Updates!", which simply reloads the page - that way the newly downloaded cache files are applied when the user chooses to, without breaking his workflow.
We are planning to create a image manipulation service in HTML5. One goal is that the service would work for anonymous users.
User adds a image (open file dialog / drag and drop)
User manipulates image in the browser
User saves the result
Now, the trick here is that the browser may die under us on any moment (user exists, laptop battery is empty, etc...) We'd like to have some kind of auto-save here which records the progress. This means keeping the track of images added on the page, preferably in offline manner.
The question is, can we somehow locally auto-save files and images user has added on the page, or are we forced to make user re-enter all images he/she has added on the page in the case page must be reloaded? Does localStorage has support for local file objects or references?
Yes, you can implement auto-save feature.
You might use HTML5 Canvas API to let users to manipulate image in the browser. Then you can use toDataURL method to get the data URL of the image. After get that, you can save it to localstorage. We can save just strings in localstorage for now. Spec says object can be saved in localstorage but most browsers don't support it.
The setInterval method can be used to save the image periodically.
Not possible:
http://dev.w3.org/2006/webapi/FileAPI/#lifeTime