How to cache images and html files in PhoneGap - caching

I need a way for cache images and html files in PhoneGap from my site. I'm planning that users will see site without internet connection like it will be with it. But I see information only about sql data storing, but how can I store images (and use later).

To cache images check out this library -of which I'm the creator-:
imgcache.js
. It's designed for the very purpose of caching images using the local filesystem. If you check out the examples you will see that it can also detect when an image fails to be loaded (because you're offline or you have a very bad connection) and then replaces it automatically with the cached image. The user of the webapp doesn't even notice it's offline.
As for html pages.. if they're html static files, they could be stored locally in the web app (file:// in phonegap).
If they're dynamically generated pages, check the localStorage API if you have a small amount of data, otherwise the filesystem API.
For my web app I retrieve only json data from my server (and process/render it using Backbone+Underscore). The json payload is stored into the localStorage. If the application gets offline, it will fetch json data from the localStorage instead of the server (home-baked fork of Backbone.dualStorage)
You then get the full offline experience: pages+images.

Caching like you might need for simple offline operation is not exactly that easy.
Your first option is the cache manifest. It has some limitations (like the size of the cache) but might work for you since it was designed to do what you want.
Another options is that you can store content on the disk of the device using the file system APIs. This has some drawbacks like security and the fact that you have to load the file from a path / url that is different than you might normally load it from on the web. Check out the hydra plugin for an example of this.
One final option might be to store stuff in localStorage (which has the benefit of being private on all platforms) and then pull it out of there when needed ... that means base64'ing all your images tho so that is a pretty big departure from just standard caching.

Caching is very much possible on Android OS. but on Apple as stated above there are limitations with the size of the images and cache size etc.
If you are willing to integrate and allow the caching on iOS you can use "cache manifest" to do so. but keep the draw backs and limitations in mind.
Also
if you want to save the file to Documents folder under my App, Apple will reject your App. The reason is the system backup all data under Documents folder to iCould after iOS6, so Apple does not allow big data like images or JSON file which could sync from your server again to keep in this folder.
So there is another work around which is good So one can use LocalFileSystem.TEMPORARY instead. It does not save the data to Library/Cache, but it save data to temp folder of App, which does not been auto backup to iCloud and not auto deleted either.
Regards
Rajeev

Related

How can I cache a web application locally

In my company, we have a report generation team which maintains a local web application which is horribly slow. These reports get generated weekly. The data for these reports reside inside a database which gets queried through this report portal. I cannot suggest them to change the application in anyway (like memcache etc.) the only option I have is to somehow save these pages locally and relay.
As these are not static pages(they use database to fetch the data), I want to know is there anyway I can store these pages locally by running a cronjob and then have the super fast access for me and my team.
PS:This application doesn't have any authentication these are plain diffs of two files stored in the database.
There are lot of options, but the following one may be easy
Generate HTML page regularly and update the cache (cache entire generated html page with key obtained from the dynamic content uniqueness), with some kind of cronjob as you have mentioned. This job populates all the modified dynamic content # regular intervals.
Have a wrapper for every dynamic page content to lookup cache. If hit then simply return the already generated HTML page. Else, go through regular flow.
You can also choose to cache this newly generated page also.
Hope it helps!

How can I upload multiple files from urls directly to cloud storage

I've tried some of the services out there, including droplet, ctrlq.org/save, and some other sites that support directly fetching a file from a url and uploading it to dropbox, google drive and the like. Without the user having to store the file on a local disk.
Now the problem is none of these services support multiple urls or batch uploading, but I have quite a few urls and I really need a service where I can put them in, split them with enters or semicolons, and have the files uploaded to dropbox.(or any other cloud storage)
Any help would be gladly appreciated.
The Dropbox Saver JavaScript control allows you to save up to 100 files to the user's Dropbox in one shot. You'll need to programmatically create the button using Dropbox.createSaveButton as explained in the linked page.
It seems like the 100-file limit (at any one time) is universal, but you might find that it isn't the case when using the DropBox REST API. It looks possible to do this with NodeJS server side (OAuth and posts) or Javascript client side (automating FileReader). I'll review and try to add content so these aren't just links.
If you can leave a page open for about 20 minutes due to "technical limitations", the dropbox should be loadable 100-at-a-time like that, assuming each upload takes less than 2 seconds; it's an easy hook to add a progress indicator.
If you're preloading the dropbox once yourself or the initial load is compatible with manual action, perhaps mapping a drive and trying to unzip an archive of your links to it would work. If your list of links isn't extremely volatile then the REST API could be used to synchronize changes.
Edit: Forgot to include this page on CloudConvert, which unzips archives containing up to 100 files into DropBox. Your use case doesn't seem to include retrieving the actual content at your servers (generated zip files), sending the automation list to the browser and then having the browser extract to dropbox, but it's another option.
The Dropbox API now offers the ability to save a file into Dropbox directly via a URL. There's a blog post about it here:
https://blogs.dropbox.com/developers/2015/06/programmatically-saving-a-url-to-dropbox/
The documentation can be found here:
https://www.dropbox.com/developers/core/docs#save-url

Retrieve the user response saved in a file in an app hosted on Cloudbees

I have hosted a Tomcat application on CloudBees which allows users to edit some XML and saves them. I need to download and save these files locally for my personal usage. However I could not find a way to do this. I tried the 'download source' option but it downloads the original files that I had uploaded and not the edited versions. However my application is able to access the edited versions (and so clearly everything is being saved all right). Getting these files back is extremely critical and necessary for me and is, in fact, the whole motive of this app. Kindly tell if there is some way to get back the files in CloudBees or any other free Java hosting site which would allow me to do it.
It's not very clear from your question how your app is currently dealing with these files, but I'll take a swing at providing some general info.
To support editing and downloading of files, your app design would need to address the following issues:
How do users edit/upload the changed XML?
Where does your app store the changed XML?
How does your app retrieve the edited XML and make it available for download?
For #1, you will need to provide an edit or upload interface in your app for manipulating the XML files. I'm assuming this is something your app has already solved using a form of some kind.
For #2, you need to pick an approach for storing the files that is appropriate for app's needs and the runtime environment where your app will be deployed. For instance, on CloudBees (or most other CLoud platforms), it's important to understand that the local filesystem of the app can be used for temporary storage, but it is not clustered and it will be wiped away each time the app is updated or restarted. If these XML files need to be available forever, you will need to store them in a persistent location that is external to the application's runtime instance. Most developers use databases (such as the CloudBees MySQL service) to store persistent data in this way. In general, your app can store these files anywhere, but your app needs to manage how to store them, and how to retrieve them later.
For #3, to allow a user to download the changed files, you will need to implement your own mechanism for retrieving the file from its persistent location, and then send it back to the user's browser. If you want something like right-click "Save As" to work, then your app will just need to support a URL that can display the edited XML file directly in the browser. If your app then provides a link to that URL, users can download it using RightClick+SaveAs. If you want the user to be able to click on a button/link and trigger a Save As dialog automatically, then you'd need to write a URL handler (Servlet) that serves the XML content up using a Content-Disposition header (see this StackOverflow article). This header will tell the browser that the file is supposed to be saved to disk, and allows you to provide a default file name.

openreadAsync vs Bitmap for image downloading from server

I have some image urls which I want to cache locally and save so that I don't need to make a web request again and again as needed.
Now, I am confused whether there is any significant benefit of using webclient's openreadasync method over bitmap for fetching the image for first time for saving it to IsolatedStorage.
For me, I think bitmap would be a better option as I would be able to get a event for progress.
This post gives good info on various image caching options.
http://blogs.msdn.com/b/swick/archive/2011/04/07/image-tips-for-windows-phone-7.aspx
Matt mentioned the fact that default image caching only works per session. So if you are implementing your own Image caching, then you will have to implement a image downloader for which the WebClient OpenReadAsync provides a way to store file locally
If you were't considering a local cache, UriSource would have been the choice.
If you want to cache images beyond the current application instance lifetime, have a look at http://blogs.msdn.com/b/delay/archive/2010/10/04/there-s-no-substitute-for-customer-feedback-improving-windows-phone-7-application-performance-now-a-bit-easier-with-lowprofileimageloader-and-deferredloadlistbox-updates.aspx which will show a way of saving the images to IsolatedStorage and then display it from there. This means you won't have to get it over the network each time the app is run.
If you're using this for lots of images be sure to manage the images you save as well so you don't fill up the disk with lots of old images you'll never need again.

Making websites available offline

I am using HTML5 offline storage. The goal is to make the whole site available offline. So intuitively, no server requests means all the pages need to be on the client. The only way I know of to accomplish such a task is to make the site into one page then show hide portions with jquery when the user "navigates". Is there a better way?
The html 5 offline spec allows multiple pages to be saved offline so you don't need to put all your content onto one page.
EDIT: link to spec http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
Be careful that your jquery does not still point to the cloud. You'll need to save the relevant .js files locally.
N.B. If your whole site can be generated and saved as individual .html files then all you need to do is to save these files in the correct (relative) directory structure.

Resources