With LiveCode 8's HTML5 deployment capability, you can now run applications written in LiveCode in any web browser that supports JavaScript and HTML5.
# Demos - http://hh.on-rev.com/html5/index-large.html
# Supported browsers
Only a limited range of browsers are supported for HTML5 deployment in this release of LiveCode. - Mozilla Firefox 40.0 (or newer) - Google Chrome 44 (or newer) - Safari for Mac (latest version)
We hope to broaden the range of supported browsers in the future.
# HTML5 engine features
The HTML5 engine in this release of LiveCode has a limited range of features. You can: - deploy single or multiple stack applications with - embedded resources. Stacks other than the main stack will open in their own floating container windows. - use most of the engine's built-in controls and graphics capabilities. - read and write temporary files in a special virtual filesystem (which is erased when the user navigates away from the page) - use LiveCode Builder widgets and extensions interact with JavaScript code in the web page using do <script> as "JavaScript" - call JavaScript from LiveCode Builder widgets and extensions using the com.livecode.emscripten module implement widgets by embedding DOM elements as native layers - perform basic networking operations using the load command
Several important features are not yet supported: - some ask and answer message boxes - multimedia (the "player" control)
Two important unsupported features are unlikely to be added in the near future: - operations that need to pause the script while something happens (e.g. wait 10) - externals (including revdb)
# How to deploy an app to HTML5
Deploying an app to an HTML5 standalone is straightforward: 1. Open your stack in the LiveCode IDE 1. Select File → Standalone Application Settings... from the menu bar 1. Browse to the HTML5 tab of the standalone settings window 1.) Make sure that the Build for HTML5 checkbox is enabled 1. Close the standalone settings window 1. Select File → Save as Standalone Application... from the menu bar
Your application will be packaged up and placed in the selected output folder.
# Contents of the HTML5 standalone
The HTML5 standalone contains four files: A standalone archive, named standalone.zip by default. This file contains your application and all of the resources that it depends on. When the engine runs, the filesystem that's visible to the engine (e.g. via the open file syntax) is based on the contents of the standalone archive. The engine itself, which consists of two files. The .js file contains the engine's executable code, and the .html.mem file contains essential data that's needed for the engine to run. These files are always the same, and only change when LiveCode is upgraded. A test HTML page. This can be opened in a browser and will correctly prepare, download and start your HTML5 app in a convenient test environment. Testing your HTML5 app with a local web server Some browsers, such as Google Chrome, do not permit pages to download resources from file:// URLs. You won't be able to test your application in these browsers unless you run a local HTTP server. A quick and easy way to run a simple local HTTP server is to use Python. Open a terminal window, change directory to your standalone's directory, and run:
python -m SimpleHTTPServer 8080
This will let you access your standalone by opening your web browser and visiting http://localhost:8080.
# Reporting bugs
Please report bugs to the LiveCode Quality Centre. Make sure to select "HTML5 Standalone" when you're creating your bug report!
# Advanced: Embedding an HTML5 standalone in a web page
The default HTML5 page provided by the HTML5 standalone builder is designed for testing and debugging purposes. However, you may want to embed the standalone engine in a more visually appealing page. To do this, you require three elements:
1. a canvas, 1. a JavaScript Module object, and 1. an HTML <script> element that downloads the engine.
# Advanced: Speeding up engine download
Currently, the engine files are almost 30 MB, which is a lot to download before the engine can start. It is possible to speed up the download by enabling deflate compression in the web server configuration.
Enabling deflate compression reduces the total download size to around 6.3 MB. It's recommended to pre-compress the engine with gzip, and then configure your web server to serve the pre-compressed files.
For the Apache web server, configure mod_deflate to serve pre-compressed content For the NGINX web server, add gzip_static on; to your configuration.
# Advanced: Customizing the Module object There are a number of LiveCode-specific Module attributes that you can modify to affect how the engine behaves:
Module.livecodeStandalone: the filename of the standalone archive (default standalone.zip)
Module.livecodeStandalonePrefixURL: Prepended to the standalone archive filename to construct its full URL (default empty)
Module.livecodeStandaloneRequest: If you assign a network request to this attribute (before the engine runs), then it will use that request for the standalone archive instead of automatically starting a download for you. This means that you can, in your HTML, fire off a request for the standalone before the engine script actually arrives. For this to work, the network request should be an XMLHttpRequest with its responseType set to arraybuffer.
See also Emscripten's Module object documentation.
# See also
- Some exciting HTML5 demos... - livecode.com 
- How Do I Put My First App On... - livecode.com
- html5 Export Question -... - livecode.com
- (49) Livecode: Modern web... - youtube.com
- HTML5 | Livecode Wiki |... - wikia.com