In Pepper Folio, users can view and interact with HTML5 apps. To prepare an HTML5 app for Pepper Folio, do the following:
- Make sure your HTML5 app has an index.html file as its homepage.
- Once your HTML5 app files are ready, compress them into a .zip file. Make sure the index.html file is located at the root.
- Change the file extension of your .zip file to .pepperapp.
- In Windows, right click the .zip file and select “Rename.” Change .zip to .pepperapp, then confirm the change.
- In MacOS, right click the .zip file and select “Get Info.” Under Name & Extension, change .zip to .pepperapp, then confirm the change.
- Upload your .pepperapp file into Pepper Flow and send it through your review process. Once it’s approved, it will display in Pepper Folio.
- By default, each HTML5 app displays a tablet icon as the thumbnail. To use a custom thumbnail instead, include a thumb.png file alongside your index.html. Recommended image size is 400px by 400px, but some variation is OK.
- Use public URLs to link to approved files in Pepper Flow.
- When adding links to files or websites, use target=”_blank” to open those links in a new window. This allows for easier navigation back to your HTML5 app.
- Save images, videos, and other files at smaller file sizes, the way you would for a website. This makes your HTML5 app load faster.
Issues you may run into
- If you forget to change your .zip to a .pepperapp before you upload it to Pepper Flow, make sure to make an arbitrary change (like adding an empty folder) before re-uploading the proper .pepperapp. Otherwise, Pepper Flow will continue to interpret your .pepperapp as a regular .zip file, and the HTML5 app won’t display in Pepper Folio.