Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Javascript on tablets and smartphones ... question

    Using HTML, JS and CSS combinations we all have been able to create
    files that run on the server as well as from local directories.

    Also, JS has a bunch of limitations that do not allow changes
    to our computers because of its security/domain features.

    Can anyone explain the rational as to why the tablet makers
    (both ipad and android) do not allow scripts to be executed locally?

    I have 'googled' and 'binged' searched but have not come upon
    any explanation as to why we cannot store and execute local files
    on a tablet using the available browsers.

    Also, does this situation look like it would change in the near future? HTML5?

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You can use frameworks like Apache Cordova to create HTML/Javascript apps that run locally. If that's what you're looking for.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts
    @Airblader: Thank you for tolerating my rant.

    I had not come across that resource.

    Seems a bit complicated at initial glance, but I'll look further into it.

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    It isn't really complicated at all, but yes, it looks like it at first. Ultimatively, you just have to setup the build environment once -- after that you just write your HTML5/CSS/Javascript app, put it in the folder, hit a button and there you go.

    A big benefit is that your app can run on many systems (Android, iOS, …) and the framework offers you hardware interaction (camera, GPS, …). Writing native apps means that you need to write an app for each system you want to support.

    On the downside, Javascript isn't as fast as native apps. But for many purposes it's more than enough. I wrote my app with Cordova, too. The biggest decision is what Javascript library to use (if any). If you want to target Android, I'd not recommend jQuery Mobile too much. If your layout is going to be simple, qooxdoo is an excellent framework (not just a library). Of course you can also start from scratch. Other libraries mentioned in this context would be jqTouch, jqMobi, pure jQuery and ExtJS. For Android, I found none of those to be very good.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    Quote Originally Posted by jmrker View Post
    Can anyone explain the rational as to why the tablet makers
    (both ipad and android) do not allow scripts to be executed locally?

    Also, does this situation look like it would change in the near future?
    1. IOS has no files, so there's no way to execute a raw script file on the device. android is different and you can browse HTML files on the sd card. not sure is it applies restrictions to the HTML in that mode, I haven't used it much.


    2. you can simply use a manifest file to persist your server-based app on both ios and droid. this means that you visit the site once in the browser, save a shortcut to the desktop (which also let's you assign a nice big icon and remove the URL bar when launched), and you can then run the app in airplane mode anytime anywhere.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by rnd me View Post
    1. IOS has no files, so there's no way to execute a raw script file on the device. android is different and you can browse HTML files on the sd card. not sure is it applies restrictions to the HTML in that mode, I haven't used it much.


    2. you can simply use a manifest file to persist your server-based app on both ios and droid. this means that you visit the site once in the browser, save a shortcut to the desktop (which also let's you assign a nice big icon and remove the URL bar when launched), and you can then run the app in airplane mode anytime anywhere.
    Thanks for the information.

    I'm a little intrigued by your option #2 above. That is a bit closer to my goal.

    Do you have a brief example of:
    1. What is the 'manifest file'? Is that the HTML with JS and CSS enclosed?
    2. Where is the "save a shortcut" action on the tablet browsers?
    When I saved as a bookmark, it still needed to access the server if I closed the browser.
    3. I would like to execute the app "anytime anywhere", which was what my initial complaint was about.
    I can provide a small script if you need to look at <!DOCTYPE ...>, <META ...> and other such tags (if they are needed)
    4. Other than the speed, which is not a great concern as I don't write computation intensive scripts,
    are there any other pitfalls I should be aware of?

    Note: I teach at a university, so the idea that the app could be applied to IOS and Android devices is of great interest to me.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    Quote Originally Posted by jmrker View Post
    1. What is the 'manifest file'? Is that the HTML with JS and CSS enclosed?
    Code:
    <html manifest="/manifests/appname1/" >
    one must-use (especially at first): http://manifest-validator.com/

    learn more:
    http://diveintohtml5.info/offline.html

    http://www.w3schools.com/html/html5_app_cache.asp

    http://www.html5rocks.com/en/tutoria...ache/beginner/

    http://blogs.msdn.com/b/fiddler/arch...er-export.aspx



    Quote Originally Posted by jmrker View Post
    2. Where is the "save a shortcut" action on the tablet browsers?
    When I saved as a bookmark, it still needed to access the server if I closed the browser.
    that depends on the os and browser.
    on droid 2.3, it's two-step:
    1. bookmark the page
    2. add "shortcut" to home screen (hold touch on empty space), chose the bookmark.

    on droid 4.x, Create a bookmark via the menu, find it in the bookmark list, long-press on it, and tap "Add to home screen".


    in ios, it's an advanced menu option:




    you use meta tags to add a bigger icon than your favicon.ico file to the app's thumbnail. IOSw/retina can take up to 64X64 png icons, others use 32X32, which is still a big gain.



    Code:
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    or if you don't want rounded corners and "gleam":

    Code:
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>

    you can also hide the url bar:
    Code:
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    for details: https://developer.apple.com/library/...lications.html



    Quote Originally Posted by jmrker View Post
    3. I would like to execute the app "anytime anywhere", which was what my initial complaint was about.
    I can provide a small script if you need to look at <!DOCTYPE ...>, <META ...> and other such tags (if they are needed)
    all you need is a working http web app and a hosted manifest text file served under the mime type "text/cache-manifest". on my site, danml.com. i have to use a small asp wrapper at the top of the text file to add the right content-type header, but other than that, it's a normal text file.



    Quote Originally Posted by jmrker View Post
    4. Other than the speed, which is not a great concern as I don't write computation intensive scripts,
    are there any other pitfalls I should be aware of?
    speed goes WAY up. I have an rss aggregator that took an avg of 5-15 seconds to fully boot on a spotty wifi. now, it;s ready to use within 1500ms from touching the desktop icon.

    there is one major drawback to manifest that i've encountered: updates.
    At worst, a bad manifest file can seal-in bad code, and if done wrongly, you can wall-off any and all updates to the page's files. This means that no matter how many times you clear the cache the old version remains.

    luckily, that's a problem ONLY if your manifest is invalid. always validate it before you tell anyone the url. always always always. i cannot say it enough.

    related to that major problem, is the minor problem that you need to edit the manifest to realize a change in a resource like a css or js file. If you edit the js file but not the manifest, the browser just uses the old one it already downloaded.

    you don't have to change the script's url in the manifest, just change anything about the manifest at all.
    it's not enough to change a comment in the manifest, firefox ignores that.
    my solution is to host an empty file, "/blank.txt?123" so i can edit the querystring of that in the manifest without harm, but triggering a manifest change detection and refreshing the memorized resources.

    finally, one last catch is that if ANY of the files in the manifest return a 404, the entire manifest is ignored, and you don't get any benefits.

    in short, manifest is an extremely precise way of managing cache. with that come a bit more leg-work to publish.

    Think of it as manual vs automatic transmission; manual is more work but gives better performance in the real-world.

    once you learn the ropes and get it working, it really not that big of a deal to maintain and the benefits are sky-high.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jmrker (04-12-2013)

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Thank you very much 'rnd me'

    You've given me a lot of information to digest.

    Might be taxing my 'little grey cells', even after April 15 here in the USA.

    Appreciate you time and information.

  • #9
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    [...], so the idea that the app could be [...]
    If you use a shortcut launcher, it's not an app. It's a locally downloaded website/web application. But to be fair, a cordova app is somewhat of a pseudo-app, too, as it is a web application wrapped inside a native container.

    4. Other than the speed, which is not a great concern as I don't write computation intensive scripts, are there any other pitfalls I should be aware of?
    The one thing I'd recommend for mobile design: Use a library. With all the different resolutions, pixel ratios, system versions and browsers, there are too many workarounds that need to be done.
    I'd also strongly recommend using a fastclick script. The click delay of 300ms might not sound like much, but the more you use your app, the more you will notice it.

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    Quote Originally Posted by Airblader View Post
    I'd also strongly recommend using a fastclick script. The click delay of 300ms might not sound like much, but the more you use your app, the more you will notice it.
    wow. yesssssssssssssssssss!

    i just want to give you a big ole' kiss for that one!
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #11
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I see, we both suffered the same pain before.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    Quote Originally Posted by Airblader View Post
    I'd also strongly recommend using a fastclick script. The click delay of 300ms might not sound like much, but the more you use your app, the more you will notice it.

    i added it to a simple web app, my cheeky calculator @ danml.com/calc , and wow, what a difference!
    compare to the one without fastclick: danml.com/calc/calcold.html, and you can REALLY appreciate the difference on two side-by-side tablets or phones.

    that was THE biggest UX backseat to native apps. we have storage, gps, touch, device angles/motion, camera control, gpu hardware acceleration, etc, so the phonegap-type solutions, and really even native apps, are losing their advantage quite rapidly.


    now if only we could reliably prevent sleep and/or run in the background, we would be unstoppable.
    Last edited by rnd me; 04-13-2013 at 12:55 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •