So I think I have uncovered something major. In my iOS security app for the preschoolers, I plan to include or make a separate app for looking at curriculum. I WAS going to download to the local app an html page, scrape the links, download those resouces, change the local html page links to local links and – voila- an offline app. Genious … well, it has already been invented with html5 (isn’t it always the way). I noticed it while looking up how to specify local iOS urls (see part where it says CSS Ninja).
Here are 2 EXCELLENT articles and Q&A’s below them. I am going to try this- it is exactly what I need to make the curriculum offline. Why, if I am reading/reviewing with my kids do I need curriculum offline. I am an at-home and not a circus dad you might say . . . yes, but my wireless router is in the basement and I have a 3 year old with a 3 year old attention span and so do many other parents out there. 3G is still quite slow and I am not sure when Telus here in Calgary is going 4G – besides when the wifi is going in and out and has 1/2 the bars – the phone is so busy establishing which network to use, that it does not download any webpages. Also typing into my facebook app the different sets of curriculum for 3 different kids ages that I require is tedious and annoying – one page that links all of this? Great – just what I need. This offline approach is just what I need I hink and other need as well from small interviews I had with other dads (moms don’t do this techno-learning quite as intensely). Read on over the next while to see how things are going. I am going to serve up the pages and manifest files with php.
The 2nd is beyond a stunning example of someone who knows what he is doing and is referenced by the 1st in the comments as to why things are not going well. Read them in the following order.
- http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone (live demo and everything – I nearly fell off my chair when it worked – this was it – “the droids I had been looking for”.
- http://diveintohtml5.info/offline.html (see the bottom for MANY more tutorials)
First, the content comes from wordpress. This will be a wordpress plugin and I will be using Netbeans PHP for this v7.3 . I have used Netbeans for Java development, but not php – there is a plug in for wordpress plugins.
In short, here is what needs to happen
- we need to wrap the html content from wordpress with an html5 wrapper with a manifest directive
- serve up the webpage manifest file which is the offline magic file with the proper Content-type: text/cache-manifest (or put it in a dir with an .htaccess file) and ensure this file NEVER gets cached until it is a mature project.
- Serve up a manifest file EACH load (so put the date/time/ip address as a comment in the manifest file) with a reference to every html link, image and pdf in the html content.
Step 0 – Setup
- Installed wordpress in a new subdirectory with a new database etc.
- Started a new project in netbeans. The wordpress additions require all the credentials of the database etc. These are in the wp-config.php file in the root directory of the new wordpress installation. The DB_HOST is the host of your installation which for wordpress is normally localhost. Since I am developing at home and it is hosted on the web, this needed to change to my server and I had to use the control panel to open up port 3306 (MySQL port) on the web. To only allow my host at home, use ipchicken.com to find your ip.
- AHH! Got the error ‘Error establishing a database connection’. Solved it here.
- I had a lot of fiddling getting Netbeans to be in a place that made uploading to github easy and would run on my local Mac webserver. (ok – it took another 2 hours to get my Mountain Lion install of apache working too)
Step 1 Get content from WordPress
[html]
<code><!doctype html>
<html lang="en" <mark>manifest="mymanfile.php"</mark>></code>
[/html]