Tag: jQTouch

  • Offline HTML Mobile Apps

    Picking up iOS is quite a bit of work plus you need to buy a Mac to get Xcode running.

    Yes I know you Hackintosh folks are going to start making some noise but let’s keep this legal.

    So I’ve decided to build quick apps using jQTouch.

    To get an App icon on your home screen, simply… add the page to your home screen! Duh. It’s like adding a bookmark. Try it – it works!

    But here’s the next problem – how do we get the apps to work without network connectivity?

    HTML5 introduced something called the offline cache manifest. Here’s how to use it…

    Step 1 – Create a file called yourfilename.manifest with the following content

    CACHE MAINFEST
    demos/main/ajax.html
    demos/main/ajax_post.php
    demos/main/index.html
    demos/main/jqt_startup.png
    demos/main/jqtouch.png
    jqtouch/jqtouch.min.css
    jqtouch/jqtouch.min.js
    jqtouch/jquery.1.3.2.min.js
    themes/jqt/img/back_button.png
    themes/jqt/img/back_button_clicked.png
    themes/jqt/img/button.png
    themes/jqt/img/button_clicked.png
    themes/jqt/img/chevron.png
    themes/jqt/img/chevron_circle.png
    themes/jqt/img/grayButton.png
    themes/jqt/img/loading.gif
    themes/jqt/img/on_off.png
    themes/jqt/img/rowhead.png
    themes/jqt/img/toggle.png
    themes/jqt/img/toggleOn.png
    themes/jqt/img/toolbar.png
    themes/jqt/img/whiteButton.png
    themes/jqt/theme.min.css
    some/other/file.name

    Step 2 – Make sure your web server reports the MIME type correctly by adding the following config to Apache. You might need to contact your hosting provider to get this done.

    AddType text/cache-manifest .manifest

    Step 3 – Add the following tag to your HTML page so the browser knows where to find the manifest.

    <html manifest="yourfilename.manifest">

    That’s it!

    Original reference material here.