All HTML content which works in a browser on a mobile device can also be used with Purple DS for these devices. To check HTML content for compatibility for use in Purple DS apps, consider using a local web server.
- Create or save some HTML content on your computer
- Install and activate the local web server
- Save the HTML to the specified folder of the local web server. This allows you to test the content without loading it to a public web page. This local website it only accessible within your W-Lan
- Test the content in a browser on your MAC or a mobile device
NOTE : HTML can be shown differently depending on the Android or iOS version of a mobile device. Therefore we recommend to test on different mobile devices so you can be sure that the content shows as expected.
SPRYLAB recommends "XAMPP" as local web server software in order to test HTML files locally.
Installation of the Web Server:
- Please download XAMPP here . This package contains the Apache web server
- After downloading the DMG package please open it, double click on the icon and follow the installation instructions as explained here
After these two steps XAMPP is installed in the Applications folder
Start of web server
- Click on the XAMPP app icon to start XAMPP. You will see the following window:
- By clicking on "Start" the XAMPP service now assigns an internal IP address and if successful, the program window should look like this:
- In the "Network" menu click "Add" to create a new entry for port forwarding.
Enter 8080 in LocalPort and 80 in RemotePort in order to guarantee accessibility of XAMPP.
Mark the new entry and click "Enable" (green light next to entry).
- Click on the "Volumes" button in the XAMPP main menu, click the "Explore" button to check your web content. Finder will open the folder for all data of the local web server.
- Go to the folder "htdocs" and create a new folder, for example "mobile". All HTML data you want to test should be copied into this folder.
TEST on MACHINE
- You can access it from your Mac with a browser. Enter the following URL matrix in the address bar of the browser:
<IP address of XAMMP> / <folder name> / <name of html content>
Let's say your IP address for XAMPP is 192.168.64.2 (see above) and you created the folder " mobile " and copied a file called "test.html" into it. Now you can open that file by entering the following URL within your browser.
192.168.64.2 / mobile / test.html
Test on mobile devices
- Please ensure you're mobile device and your MAC are in the same WIFI network
- You need the WIFI IP address of the machine that runs the web server to test the HTML content on your mobile device. You can find it in the system preferences under "Network". Check the blue marked IP address
Adopt the URL matrix as follows:
<IP-address of machine>: <port> / <folder name> / <name of html content>
So if your machine's IP address in your WIFI is 10.42.18.57 and the port is set to : 8080 you have to put two parts in the URL. Next you add the folder " mobile " and add the HTML file.
- Open your project in your mobile browser by opening 10.42.18.57 : 8080 / mobile / test.html
So if all content is displayed correctly in your mobile browser than this content will work in Purple DS apps.
If the HTML content should also work offline, so that no external data is loaded (images, videos, css). You can test offline functionality by deactivating all network connections of your MAC and open the url in a browser on your machine again: 192.168.64.2/mobile/test.html.