Question

I have a web app (sencha/phonegap) that includes a feature allowing users to click on buttons that link to Wikipedia articles. This obviously works fine if the device has internet access, but I get numerous requests to make the app work when the app is offline too. To accomplish this, I’d like to give the user the option to download the linked articles/webpages for offline access. When the device does not have internet access, the app would instead display the saved version (which might be stale/out-of-date, but is better than nothing). What are possible ways to accomplish this task?

My first thought was to somehow use the html manifest to cache the pages in the phone’s browser, which sounds possible on the Android browser, but iOS apparently has a 5MB browser cache limit – too small.

My next thought was to save the needed html & associated files and bundle them up inside the app. But this seems a rather cumbersome approach, the app becomes much larger than it needs to be, and the webpages are stale back to the date the app was installed.

Using javascript, is it possible to download webpages, which I could then save (on the sd card, for example) for access later?

Or is there a more elegant approach?

If anyone could point me in the right direction it would be much appreciated.

Answer 1

In pure Javascript you can make an Ajax request to download a page. Then you can use the FileWriter to write the responseText to a file on the file system. However, that won’t help you when it comes to images. You’ll need to use the FileTransfer.download() command to get the binary image files.

If I were you I’d:

1. Use AJAX to download the html.
2. Parse the html looking for images.
3. Use FileTransfer.download to get the images.