JAIPHO and PIPHO
JAIPHO is a very nice javascript web application for showing slides on the iPhone or iPod Touch available from jaipho.com.
PIPHO is a handy php script which allows you to automatically generate a slide show based on a folder containing the images you want to show. PIPHO is also available from jaipho.com.
JAIPHO Offline allows you to run the slide show as an iPhone application from the desktop without connecting to the internet. Although it is actually running on the Safari web browser, it looks and acts like a normal iPhone application. The icon for the home screen desktop will be created from the photo in the slide show on the screen when you press the + sign. The app will run in "full screen" mode with no navigation bars at the top or bottom.
JAIPHO Offline
JAIPHO Offline is a small php script which generates the same slide show as PIPHO, but allows it to be saved to the Home Screen of the iPhone and run with no internet connection. To use PIPHO and this script, you must have a webserver available that you can put photos on and be able to connect to it from your iPhone. The webserver can be any ISP, or a local server running on your own computer such is Windows Server or Apache. It must support PHP Version 5.
Installation
Download pipho from jaipho.com.
Install it on your server and make sure you can generate a slide show and view it on your iPhone. There will be no point continuing if you haven't got PIPHO working properly.
Download jaipho_offline.zip.
Unzip the downloaded file and copy build_app.php and html.template to the same folder as the PIPHO index.php.
NOTE: Your server must be configured to correctly tag .manifest files as mime-type: text/cache-manifest. Check the mime types configuration file on your server which should contain text/cache-manifest manifest or add AddType text/cache-manifest .manifest to your .htaccess file. The iPhone will not create an offline web application if the manifest file does not have the correct header.
The usual reason for the application to not be cached is that the header is incorrect. You can use a tool like Web-Sniffer to check that the Content-Type is correct.
Operation
Create a new folder for your photos or use the test folder provided. This folder will be in pipho/photos.
Run build_app.php from your web browser or iPhone. Enter the name of the folder (just the name not the path).
If all goes well, two new files will be created. An html file with the same name as your photo folder, such as test.html and a manifest file such as test.manifest. For your convenience, build_app will show a clickable link to the slide show.
Access the link from your iPhone (just click on it if you ran build_app.php) from the phone.
You can try it now on your phone with the already generated link: testoffline.html. Or you can download the slide show of my trip to Albania.
The slide show will appear. Make sure it looks OK. If you like what you see, choose the photo you want as an icon on your desktop, press the + key and bookmark the page to your Home Screen.
Safari will close and you will see the new icon on the desktop. It should work whether you are connected to the internet or not.
If you want to change any of the files, it will be necessary to change the manifest file and run the app online. When the app runs and there is a connection to the server, it will check for an update to the manifest file. If the file has changed, Safari will download the new images or html pages and store them for offline use. If the manifest file is empty, Safari will delete the saved files from the cache.
Note that changed files on the server will not be downloaded after they are cached unless there is a change in the manifest file. Safari will not check individual files for changes. It is necessary to reload the page TWICE to see any changes. On the first load, Safari downloads the new manifest file, but has already proceeded to show the cached files. On the second load, Safari knows that the manifest has changed and gets the new content.
After deleting the files from the cache, it will be necessary to delete the icon from the desktop manually.
You can also clear the cache using the Safari settings but this will clear all other cached files as well.
How Does it Work?
HTML 5, supported by Safari on the iPhone, Windows and Mac OS X, and by Chrome has the capability of storing data locally to be used offline including caching web pages and images. The iPhone can store up to 5 megabytes of data associated with a web page. The details are in the Apple Safari Documentation and the Safari Client-Side Storage and Offline Applications Programming Guide. CSS Ninja has a written a short tutorial which is very useful.
Disclaimer
The author takes no responsibility for any damage caused by this program. The user accepts full responsibility for any problems which may arise from the use of this application.
Licensed under Creative Commons LGPL.
blog comments powered by Disqus