Running javascript-enabled html documents as smart phone apps

Mobile version of this page

I have been asked numerous times if two of my javascript applications (Optical Print Centering and The Virtual Yarrow Stalks I Ching) could be made into smart phone apps.  I figured that it would only be a matter of time before mobile phones and browsers acquired the ability to open and run these documents offline, and I kept telling myself that when that day arrived, I would break down and get a smart phone.  Well, it has finally happened, and I am now the proud owner of a Pantech Crossover running Android 2.2.1.  (To repeat what has already been said online:  pros, the slide-out keyboard; cons, everything else.)  I have found two fairly easy ways to open and run the above scripts using free Android apps; here they are.


Method 1:  use Dolphin Browser (I used Mini) together with ASTRO File Manager.  If you use Dolphin to save an online html document (web page) to the phone, you can reopen it, and even bookmark it, for offline use.  But if you copy a document to your phone by some other means, there is no way that I could find to use Dolphin to open it by itself; this is where ASTRO comes in.  You can use ASTRO to browse the directories on your phone and SD card; and when you select a file, you are presented with a list of what ASTRO considers appropriate apps with which to open it.  Dolphin integrates readily with ASTRO, and can be set as the default application for the file.  See the screenshots below.  I had used Dolphin to download Optical Print Centering from the web; the file was in Dolphin’s download folder.  When the folder is opened with ASTRO, and the file selected, simply choose Dolphin to complete the action, and the page opens.  The script is fully functional; one simply has to get used to the tiny screen.

     


Method 2:  use xScope Browser - Web & File.  This web browser is also its own file browser, so no second application is needed.  I ran into one glitch:  the Viewport setting in the Settings menu must be changed from the default “normal” to “wide” for the javascript to function properly with non-mobile-optimized pages; if the page is single-column and designed for mobile, this does not appear to be an issue.  Having done this, one simply chooses the Files menu and navigates to the desired file.  I had copied Virtual Yarrow Stalks directly to Dolphin’s download folder; Dolphin did not find it in its own download menu (hence the need to use ASTRO as above), but xScope navigated to either document without difficulty.  Once again, the script was fully functional.

     


Issues with the above

One advantage to method 1 is that ASTRO will open zipped files, including the Virtual Yarrow Stalks zipped download; the free version of xScope will not.  Plus, ASTRO is a handy app to have anyway.  Another utility app with a file browser is Android Assistant; it functions similarly, and opens zipped files.

One problem with the above methods is that, while both browsers (as well as Dolphin Browser HD) can save online web pages to the phone, they only save the html document, not the associated files such as images and css.  Apps such as Save This Page and Offline Browser can act as plugins for each of the browsers, and are intended to save the complete page; but in my case neither of them saved the background image, and neither of them saved the page in its original form.  (Opera does a better job, but has its own problems as described below.)  The scripts referenced above are text-only and were intended from the start to be downloaded and used offline; but other pages may not be.  So, for this reason, and possibly to save bandwidth with large files, one may need to save online pages with a conventional computer and desktop browser, and then transfer them to the phone or SD card to be opened with ASTRO/Dolphin or xScope.

Tip:  you can add a Dolphin HD (apparently not Dolphin Mini) or an ASTRO shortcut to the desktop for easy access; these can be shortcuts to offline files stored on the phone.

Issues with other browsers

Boat Browser Mini can be used with ASTRO like Dolphin can, and would be a suitable alternative.  But I don’t like the appearance as much; and, as there is no “save file” option, Save This Page or Offline Browser may have to be used along with it.

I tried five other browsers:  Miren, Angel, Opera Mobile, Opera Mini, and Skyfire, in addition to the phone’s default browser (“Web”); none of them is currently suitable as a general-purpose offline javascript platform, each for its own reasons:

Miren and Angel work with ASTRO like Dolphin does; but they do not display the non-ASCII characters in the text (such as smart quotes and em dash) unless the character set is either UTF-8 or iso-8859-1 (windows-1252, which is very common, does not work); so I consider them to be “close, but no cigar.”  Also, Miren has no “save file” option.  Angel can be used to save files via the Read Later menu, but it corrupted my files in the process.

Opera Mobile has one major advantage over Dolphin and xScope:  it can save a complete page, including images and other associated files, as an .mhtml archive in the SD card’s Download folder.  But, sadly, it cannot handle all of the javascript; it seems to do o.k. with Optical Print Centering, but not Virtual Yarrow Stalks.  (Opera Mini cannot handle either one.)  Additionally, only Opera will open its .mhtml archives; when using ASTRO, the file opens with Opera automatically, Dolphin is not a choice; and xScope navigates to it but is unable to open it.  (Opera is not fully integrated into ASTRO, as it is not presented as a choice to open ordinary html files.)

Skyfire and Web work fine online; but like xScope and both Operas, they are not integrated into ASTRO, and so cannot be used to open pages saved to the phone or SD card.  As with Miren, there is no “save file” option.

Conspicuous by its absence is Firefox Mobile; it hasn't caught up with the Pantech Crossover yet.  There are a handful of other browsers out there; I will leave them for others to test.

Programming the Mobile Web
5

Beginning Smartphone Web Development
5

Mobile Web Design for Dummies
5

Building Android Apps with HTML, CSS, and JavaScript
5

Wish list

Someday, maybe there will be a mobile browser with all of the following features:

• a fully-functional javascript engine and html/css rendering capability
• file-browsing and file-opening capability
• the ability to open archives such as .zip and .mht
• the ability to save complete pages, including supporting files
• the ability to create desktop shortcuts to saved files

Those other phones

Not that I am biased against a crassly commercial and overly-restrictive product like the iPhone, but . . . I see that there are some alternative web and file browsers for that illustrious instrument as well, and I am sure that owners of these and other smart phones will find ways to use offline html documents as I have on my Android.  After all, the main advantage of javascript applications is that they are cross-platform.  logos

Some observations on fonts and CSS

None of the browsers above, with the exception of Opera, is able to read a CSS font stack.  Android comes with three installed fonts:  Droid Sans, Droid Serif, and Droid Monospace; but the only font-family declarations that these browsers can read are the generic font families serif, sans-serif, and monospace.  They will not read the name “Droid Serif” or variations of it (Droid Serif Regular, DroidSerif, Droid-Serif), and they will not even read a generic font family name if it comes at the end of a stack.  So none of the following will change the font from the default sans-serif, unless you are using Opera:

style="font-family: 'Book Antiqua', 'Palatino Linotype', 'Georgia', serif"

style="font-family: 'Droid Serif', serif"

style="font-family: 'Droid Serif'"

The only choices:

style="font-family: serif"

style="font-family: sans-serif"

style="font-family: monospace"

View the declarations on this page above in an Android browser to see if you get the same results.  The ability to read a font stack should definitely be on the wish list.


The Virtual Yarrow Stalks I Ching | Optical Print Centering
The Mobile Zone Calculator | The Mayan Long Count Calendar | The Lithium Calculator

www.russellcottrell.com | Mobile version of this page