0

I konw I can build webapp to Apple apps by using phonegap, but if I want use it on iPad, I must become Apple Developer($99 or $299/year). but I just want use it small-scale.

So I wonder if there is any browser apps can copy all webapp's file to iPad's document folder, and viewing them in an embedded browser like phonegap? I know I can add webapp to the Home Screen and interact with them like standard apps, but I want it offline, as the webapp is 2GB and no need internet.

The browser app should be fullscreen, no status bar, no Bonuce effect, and load index.html auto.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Jove
  • 247
  • 1
  • 3
  • 12

2 Answers2

1

If you want your application to be offline, you have two choices:

  • you jailbreak the phone you want to deploy the app at;
  • you pay Apple for a developer certificate which will allow you to deploy on your own device, and submit through AppStore for deployment to other user devices.

Alternatively, if your webpages are static content, you could look into using iBook Author to package them as an electronic book and load it to your device using iTunes. That likely will not work well with 2GB worth of data, though.

Franci Penov
  • 74,861
  • 18
  • 132
  • 169
  • Thanks Franci Penov, My webpages are static content, and I found GoodReader can do this, just copy all webapp's file to GoodReader's document fold and click index.html. but it's not free and I want one click to open webapp. – Jove Jan 09 '13 at 16:42
0

Yes, you can do this with the meta tag apple-mobile-web-app-capable and with HTML5 Application Cache. As you discovered, you can add an app to the Home Screen. With this technique, the app will also run offline and full screen.

Add this to your HTML <head>:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

Set up your cache:

Add manifest="cache.manifest" to <html>. cache.manifest is the name of the file you'll use to define what to cache. It can be named anything, but I actually call mine cache.manifest.

<html lang="en" manifest="cache.manifest">

Then make sure your web server has the MIME type for .manifest set to:

text/cache-manifest

Then create a file named cache.manifest, put it in your app root. Under the CACHE section, put the files you want cached (in your case, all files). You can also use * to mean 'all files'.

Every time you push a release, change the version number in your cache manifest. Any change in the file will work, but the version number is a perfect mechanism for this.

CACHE MANIFEST
#ver 1.0.0

CACHE:
app.html
app.css
app.js

Then put this at the top of your script inside your onload or equivalent. 

function updateVersion( event ) {

    window.applicationCache.removeEventListener( 'updateready', updateVersion, false );

    if ( window.applicationCache.status == window.applicationCache.UPDATEREADY ) {
        //perhaps notify user here
        window.applicationCache.swapCache();
        window.location.reload();
    };

};

if ( window.applicationCache ) { 
    window.applicationCache.addEventListener( 'updateready', updateVersion, false ); 
};
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239