THIS TUTORIAL IS OUT OF DATE. READ THE COMMENTS BELOW BEFORE STARTING - IT WILL SAVE YOU A LOT OF TIME. IF SOMEONE HAS THE TIME AND KNOWLEDGE PLEASE UPDATE (YOU JUST NEED TO SIGN UP FOR A FREE ACCOUNT).
- Download/install the iPhone SDK (free): http://developer.apple.com/iphone/program/download.html
- Download PhoneGap from github: http://github.com/sintaxi/phonegap/tree/master/iphone
-
Open the PhoneGap.plist file.
-
Change the offline value to 1. (This turns on offline mode and makes the 'www' folder the default offline folder for all your offline resources). No Offline value in current Phonegap version. Use WWW folder and Index.html.
-
Update your index.html with the www folder.
-
Build and Go!
- You should see the default index.html page loaded into the simulator:
- So now you've got your index.html file loading when the application loads! You can edit this file in XCode by browsing for it in the resources folder. Try making some changes and recompiling!
- Now all we need to cover is adding additional files so you can include images, javascript, css, and other files!
- To add a file, first we have to drag the file from our file system into the resources folder:
- Once we drop the file we'll get a dialog box popping up. Be sure to check the "Copy item into destination's..." checkbox! Then click "Add"
- Now you can see we have the smily.png file in our resources folder!
- Now let's add the image to our index.html file:
- Go ahead and build and go at this point. You should see your image in the application!
- That's it! You can add CSS, JS, any files you want! You access them as though they were in the same dir as the index.html file.
Notes
It appears that creating "subfolders" isn't possible. At least, I haven't managed to make it work yet. If you do, please post here for us!
Troubleshooting
- I get an image-not-found box!
Sooner or later you'll run into a file that doesn't seem to be making it all the way to the application. You see it in the resources tab but it just refuses to load in the application. Here's where to look to see if things are all proper:
- Make sure the file is in the resources folder.
You probably already did this, but double check to make sure the file is really in the resources folder. If it didn't make it to your project, it won't show up in your application!
- Make sure the file is in the "Copy Bundle Resources" step of the build process of your target application.
Look at this step in XCode. If you don't see your file here then it isn't being copied into your executable bundle. The solution is to drag the file from your resource folder into this step of the application. Save and re-compile. Your file should be available and working in your application!
Comments (25)
nathan freitas said
at 6:43 am on Dec 16, 2008
Great tutorial... worked well even though I did have to manually copy all my javascript files into the target... perhaps Xcode doesn't know what to do with .js files?
Will Kessler said
at 8:36 pm on Dec 16, 2008
Has anybody tried using a more complicated js library like jquery within this framework? That would make it extremely powerful...
Ross Scrivener said
at 8:22 am on Dec 18, 2008
Hey, I cant get local javascript files to load! It's driving me insane, if i put it inline it's fine, the files are deffinetly in the package as I can go to the build folder that Xcode creates and launch the app in Firefox fine, yet using the simulator and Phonegap it doesn't load
Ryan Kokesh said
at 12:38 pm on Dec 18, 2008
Yeah, I'm having the same problem as Ross...
pva said
at 11:41 am on Dec 19, 2008
Hey, I managed to get it working by renaming all .js and .css files to .txt before importing to the project - don't know why this works - it seems only .txt files are supported??
Silentrob said
at 11:56 am on Dec 19, 2008
PVA, Ive just tried this technique can you elaborate on it?
pva said
at 12:01 pm on Dec 19, 2008
Ok... first I deleted all *.js and *.css files from my project. Then in finder I renamed all the *.js and *.css files to *.txt. Then I added the files again to the resource folder as described above. Now all I needed to do is to change all references in my index.html file (... src="somfile.js" = src="somefile.txt"). I hope this helps.
Silentrob said
at 12:10 pm on Dec 19, 2008
lol thats what I figured you did, and that is what I tried, but it didn't work. I will try it again.
mdelfs@... said
at 12:52 pm on Dec 24, 2008
Can someone update this for the newer version of PhoneGap.xcodeproj? This version above is for the Glass.xcodeproj, which doesn't work anymore in the project folder. I added the code above and it just doesn't work because I think it's for the OLDER version of the project. Sorry, I just can't figure it out.
Ryan Kokesh said
at 8:26 am on Jan 28, 2009
Can PhoneGap be used offline with Android and Blackberry as well?
Dave Johnson said
at 5:29 pm on Jan 29, 2009
Ryan offline is definitely possible on Android and I hope to do a tutorial soon but BlackBerry is another thing :) It might be possible on BlackBerry but it is not currently clear.
Ryan Kokesh said
at 7:55 am on Jan 30, 2009
I sort of figured as much about the Blackberry... An Android tutorial would be great though!! :)
Vinay said
at 7:24 am on Mar 4, 2009
I was able to make android application offline. Here are a few steps I remember:
1. I made sure all my URLs and SRC in html were relative paths
2. I copied all files under <project>/assets/myproject/
3. I changed appView.loadUrl to point to "file:///android_asset/myproject/index.html
thats it!
vinay moharil said
at 8:48 am on Mar 17, 2009
I am new to PhoneGap but wondering if PhoneGap allows me to store xml data locally programmatically? we decided not to use SQLlite and we store the xml date retrieved from the server locally so that when the phone is offline - we can use the data downloaded previously. Is this supported by PhoneGap?
Jonathan Stark said
at 4:22 pm on Mar 17, 2009
vinay - I am just seeing phonegap for the first time, but I did notice hooks for file system read/write access in the phonegap.js file. So, I'd guess that yes, it's possible.
tim said
at 5:18 pm on Mar 22, 2009
i can't get it to load any images, css, or js. i followed all the steps and everything is where it should be. should i be relatively linking (img src="image.png")?
tim said
at 11:56 pm on Mar 22, 2009
well i got it to load the JS and CSS, but only by replacing the contents of "master.css" and "phonegap.js". now all i need is for it to load my images. any help would be appreciated.
k00k said
at 11:32 am on Apr 17, 2009
I was able to get the image to load by pathing back one folder to the phonegap/iphone/ folder. eg: src="../myimage.png" - Not sure that this is how it should be as I just started with this tutorial. I saw that the image I added was copied there. Would love an official word on this.
Jonathan Lister said
at 7:10 am on Apr 28, 2009
This is an out-of-date tutorial - Settings.plist doesn't have an 'offline' setting.
It would be helpful to have more detail about what "Update your index.html with the www folder." means.
iPodTouchGuy said
at 3:49 am on May 16, 2009
Before I commit to buying a MacBook and getting stuck into this - can anyone confirm whether Phonegap can or cannot produce self-contained apps? Reading this page got me very excited, but until I got to Jonathan Lister's comment above. Without the abilty to create self-contained apps, I'm stuck. Thanks!
AndyJ said
at 1:09 pm on May 22, 2009
I just cloned the git repository and had a look around. It seems that the 'Offline' setting has been moved to PhoneGap.plist, and still works fine.
London iPhone Developer said
at 11:21 am on Aug 23, 2009
Can someone tell me if I am being incredibly stupid or not?
"Change the offline value to 1. (This turns on offline mode and makes the 'www' folder the default offline folder for all your offline resources)."
Where is this offline value? I have downloaded PhoneGap onto 4 different macs to open the Xcode project and its nowhere...
Some help would be much appreciated.
Many Thanks,
Ross
hello@urbanviolet.co.uk
Syed Arsalan Pervez said
at 12:06 am on Oct 15, 2009
I have used phonegap with jquery and it works perfectly, i have even mixed them in functions, still they perform up to the expectations.
Gregory Whiteside said
at 8:11 am on Nov 3, 2009
@PVA, Ryan, Ross: Don't know if you guys got the app to find the .js files you were referencing - I got it to work using Kook's method, which is to add ../ before the file, so <script src="../xui-min.0.9.0.js"></script>
Gregory Whiteside said
at 8:15 am on Nov 3, 2009
.. which somewhat makes sense since index.html is in the www folder. I tried putting the .js files in the www folder - no such luck.
Anyone have any ideas on how to structure referenced files (i.e: add them to folders / subfolders)?
You don't have permission to comment on this page.