Photo by Clément H on Unsplash
Ive been developing a HTML5 game using the LimeJS framework. As I am targetting iPhone and iPod Touches I asked my lovely girlfriend fiance to design me an app icon and hopefully In the near future she will also have give startup images too.
As I dont want to load the icon and startup images via the network every time the app loads, I thought I would cache it “offline”. To do this you need to create a manifest file which your web server needs to set a specific content-type header which is just text/cache.manifest.
To load a manifest file you need to add an attribute called manifest that points to your manifest file. It can be a relative path.
1<!DOCTYPE HTML>2<html manifest="mysite.manifest">3...
Here is how the rest of my HTML file looks like
1...2<head>3 <title>site</title>4 <meta name="apple-mobile-web-app-capable" content="yes"/>5 <link rel="apple-touch-icon" href="/assets/icon.png"/>6 <script type="text/javascript" src="site.js"/>7</head>8 <body></body>9</html>
The manifest file tells the browser which files to store locally, the syntax for it kind of reminds me of INI files, but not quite. My manifest file looks like following;
1CACHE MANIFEST2/assets/icon.png34NETWORK:5site.js
This tells the site to cache/store the png image for the app icon. The file listing following the NETWORK: section tells the browser to always load the files from the network. More info is available in this link
If you are using Nginx like I am, then you need to change the file mime.types and add the following
1text/cache.manifest manifest;
Which just tells Nginx to serve up file resources ending with manifest with the content-type header of test/cache.manifest.
Hope this helps.
