MIME types

When publishing a HTML5 game to the web, it is important the server sends certain types of file with the correct MIME type. For example, most servers are correctly set up to send a .html file with the MIME type text/html. However some server's defaults don't include every MIME type your project might need to use. Also some servers may be configured to send the wrong MIME type, which may still cause some features to work incorrectly. The list below should be used as a reference of the correct MIME types to have set.

Configuring your server's MIME types depends on your host. If you don't know how to do this, contact your host for support, or ask them to set up the list below for you.

Having the wrong MIME type set can result in the file either returning "404 Not Found" (which can result in problems like audio not playing or AJAX requests failing), or cause the server to send a corrupt file (e.g. sending an audio file as a text file, causing it to fail to load).

If you are exporting a native app such as via Cordova or NW.js, there is no need to set up any MIME types.

MIME types for HTML5 games

A server hosting a HTML5 game should have these file extensions associated with these MIME types.

Basic MIME types:
.html files: text/html
.js files: application/javascript
.png files: image/png
.jpg files: image/jpeg
.jpeg files: image/jpeg
.css files: text/css

For audio to play correctly in all browsers:
.ogg files: audio/ogg
.opus files: audio/ogg
.m4a files: audio/mp4

For video to play correctly in all browsers:
.webm files: video/webm
.ogv files: video/ogv
.mp4 files: video/mp4

For offline support to work correctly:
.appcache files: text/cache-manifest

For web fonts to load:
.woff files: application/font-woff

For Spriter animations to load:
.scml files: text/xml
.scon files: application/json

For web app manifests to load correctly (e.g. for Firefox Marketplace, or browser 'Add to homescreen' buttons):
.webapp files: application/x-web-app-manifest+json
.manifest files: application/manifest+json

Other formats to ensure AJAX requests or other external resources load correctly:
.txt files: text/plain
.xml files: text/xml
.csv files: text/csv
.json files: application/json

.svg files: image/svg+xml

.pdf files: application/pdf
.zip files: application/zip

Any other binary file that is intended for download as opposed to using in a browser (e.g. a Windows .exe): application/octet-stream

Offline caching

If you find there is a problem with your MIME types after exporting and then fix them, the problem may not appear to be immediately corrected if the browser has cached the previous server responses for offline support.

The easiest way to verify the problem is fixed after correcting a server's MIME types is to change the URL of the project, e.g. renaming the folder it was in on the server. This prevents the previous offline cache being used to load the game and it will start fresh with the new MIME type configuration taking effect.

More information

For more reading, see the Mozilla Developer Network (MDN) article on Configuring server MIME types.

Tags: