The following guidelines should be followed for optimal use of HTML content in Showpad.
Note that only HTML5 web apps (using Javascript, CSS, HTML, images, ...) are supported.
Dynamic programming languages like Ruby, PHP, .NET, etc require specific server software and will not run in the Showpad app.
Flash is not fully supported since it's an older technology and that may result in the pages not displaying as expected.
Upload
To prepare your web app for Showpad, compress all the files of the app into a .zip file and make sure there is an index.html file in the root or root folder. So the "main" HTML file should be called "index.html". Showpad will unpack the zip and process the web app to generate a thumbnail and make it ready for our apps. We advise you to include all files used by the app (Javascript, CSS, images, ... ) in the .zip file so that the app will run properly whether there is an internet connection or not. Using the extension "index.htm" does not work and you should use .html instead.
Offline
It is possible to run web apps inside Showpad even when there is no internet connection. The requirement for this is that all resources are available in the zip archive.
Script source & Google Analytics
Showpad web app
On the Showpad web app, HTML content is requested over https, so be sure not to use HTTP as source script, since this will keep the app from loading correctly on most browsers. Best practice is to use "//ajax.Googleapi" as source script. This way the browser will decide which protocol to load the source from the base on the parent website.
Showpad Mobile devices
On mobile devices, HTML content is run locally (using file:// protocol). Cookies don't work there, you can use local storage instead.
- As a consequence, Google Analytics does not work by default for mobile. For a workaround, please see this link
- Mobile devices can run HTML content offline. Google Analytics doesn't support offline tracking by default, for a workaround, please find this link
Cross-platform
- Showpad can be accessed on iOS, Android, browser and Windows (8.1+). This means the web app should fit multiple screen sizes, so using a responsive design is a good idea. The technologies used should fit these devices. On iOS/Android we use the standard web kit (Safari/Chrome). Showpad Web supports IE11, Edge, Chrome, Safari and Firefox. For specific Windows guidelines, click here.
- Cross-domain Javascript loading might cause problems. Check Workaround.
Showpad navigation & js functions
On iOS there is an icon top left to enable the Showpad navigation to quit the web app. This means that this space should be reserved for that button and no action objects of the web app itself.
Please see this article for the full report on js functions we offer in HTML content.
Local storage
It is possible to use local storage to save the state of a web app, so you can leave the app and come back to that state. Think of a filled in form, a language selection, etc.
iFrames
When developing your HTML5 file, you should keep in mind that you cannot use iFrames for internal links since they will not work on the iPad.
HTML development for Windows
In this article, we explain how HTML content development should be used on Windows devices.
Asset Linking
For utilization in the Showpad web app, please use the <a href=“”> tag method for asset links.
Hyperlinking
For use in the Showpad web app, please use the <a href=“”> tag method for hyperlinks.
Also keep in mind that Showpad loads content over the https protocol and hyperlinks will also need to be loaded over https.
Also keep in mind section 2 about script source when you're linking to external pages.
Keep in mind the following developer's best practices:
- Know your hardware limits, it's not a spaceship you're running the code on.
- Know your external libraries, they provide you with easy to use APIs, but they might come with the cost of performance when not used correctly -> jQuery: `$()` is expensive, cache your selectors, chain your action/methods.
- Don't use JS animations and setTimeout, either use CSS animations (preferable 3d, so the GPU takes over the calculations, not the CPU) or use requestAnimationFrame.
- Keep your DOM as clean as possible. Hide/remove elements you are not using.
- Preloading assets are only interesting when they are coming from the network, not when they are stored on the device, also don't keep them in your DOM and make sure they have the right cache headers (or you won't be doing any preloading at all)
- Test inside Showpad.
- Don’t develop for a fixed viewport, not all devices are 1024*768 and devices can be rotated. If the app you're developing needs to be user landscape or portrait, be sure to add a message when used incorrectly.
- When sharing HTML content to a client (collection viewer), the HTML content will be shown in an iframe, make sure your viewport dimensions and overflow is set up correctly
- When implementing a button that does a location.reload(), using a click handler in JS, this will not work on the Web App. From inside the iframe try setting 'document.location.href = ' instead of window.location.reload()
- We recommend using HTTPS for HTML apps communicating externally on iOS. If you have issues with adapting to this, we recommend you to update to iOS version 10.1 or later. To make sure these URLs and HTML Apps work on iOS, we added an exception to allow HTTP communication in our web views. This exception only works from iOS version 10.1.
On iOS 9 and iOS 10.0, HTTP URLs or HTML apps that use HTTP for loading external resources will result in blank or half-loaded pages.
For more information please contact our support team.