Spent the last few days working on an iOS app, focusing on the iPhone. The goal was to make a simple HTML5 game that can be played offline, in Airplane Mode, etc.
Everything was working great. I got it on my phone & everything. Tested it on a bunch of other phones via willing victims (aka, family & friends). Then suddenly, the offline caching functionality broke. The app would load fine the first time, while online but then would fail to load again online or off.
On initial load Chrome’s console showed this:
Creating Application Cache with manifest http://myurlpath.com/my/app/path/sm2/simplegame2.appcache Application Cache Checking event Application Cache Downloading event Application Cache Progress event (0 of 38) http://myurlpath.com/my/app/path/sm/images/1.png Application Cache Progress event (1 of 38) http://myurlpath.com/my/app/path/sm/images/10.png Application Cache Progress event (2 of 38) http://myurlpath.com/my/app/path/sm/images/card.png Application Cache Progress event (3 of 38) http://myurlpath.com/my/app/path/sm/images/startstop3.gif Application Cache Progress event (4 of 38) http://myurlpath.com/my/app/path/sm/images/plusminus2.gif Application Cache Progress event (5 of 38) http://myurlpath.com/my/app/path/sm/images/pic3.png Application Cache Progress event (6 of 38) http://myurlpath.com/my/app/path/sm/images/plusminus4.gif Application Cache Progress event (7 of 38) http://myurlpath.com/my/app/path/sm/images/pic8.png Application Cache Progress event (8 of 38) http://myurlpath.com/my/app/path/sm/images/time.png Application Cache Progress event (9 of 38) http://myurlpath.com/my/app/path/sm/game.js Application Cache Progress event (10 of 38) http://myurlpath.com/my/app/path/sm/game.css Application Cache Progress event (11 of 38) http://myurlpath.com/my/app/path/sm/images/s.png Application Cache Progress event (12 of 38) http://myurlpath.com/my/app/path/sm/images/8.png Application Cache Progress event (13 of 38) http://myurlpath.com/my/app/path/sm/images/2.png Application Cache Progress event (14 of 38) http://myurlpath.com/my/app/path/sm/images/5.png Application Cache Progress event (15 of 38) http://myurlpath.com/my/app/path/sm/images/simplememory_icon.png Application Cache Progress event (16 of 38) http://myurlpath.com/my/app/path/sm/images/startstop4.gif Application Cache Progress event (17 of 38) http://myurlpath.com/my/app/path/sm/images/plusminus3.gif Application Cache Progress event (18 of 38) http://myurlpath.com/my/app/path/sm/images/pic4.png Application Cache Progress event (19 of 38) http://myurlpath.com/my/app/path/sm/images/startstop1.gif Application Cache Progress event (20 of 38) http://myurlpath.com/my/app/path/sm/images/level.png Application Cache Progress event (21 of 38) http://myurlpath.com/my/app/path/sm/images/found.png Application Cache Progress event (22 of 38) http://myurlpath.com/my/app/path/sm/images/pic1.png Application Cache Progress event (23 of 38) http://myurlpath.com/my/app/path/sm/images/blank.gif Application Cache Progress event (24 of 38) http://myurlpath.com/my/app/path/sm/images/pic6.png Application Cache Progress event (25 of 38) http://myurlpath.com/my/app/path/sm/images/9.png Application Cache Progress event (26 of 38) http://myurlpath.com/my/app/path/sm/images/6.png Application Cache Progress event (27 of 38) http://myurlpath.com/my/app/path/sm/images/simplememory_startup.png Application Cache Progress event (28 of 38) http://myurlpath.com/my/app/path/sm/images/attempts.png Application Cache Progress event (29 of 38) http://myurlpath.com/my/app/path/sm/images/3.png Application Cache Progress event (30 of 38) http://myurlpath.com/my/app/path/sm/images/0.png Application Cache Progress event (31 of 38) http://myurlpath.com/my/app/path/sm/images/startstop2.gif Application Cache Progress event (32 of 38) http://myurlpath.com/my/app/path/sm/images/pic5.png Application Cache Progress event (33 of 38) http://myurlpath.com/my/app/path/sm/images/plusminus1.gif Application Cache Progress event (34 of 38) http://myurlpath.com/my/app/path/sm/images/pic7.png Application Cache Progress event (35 of 38) http://myurlpath.com/my/app/path/sm/images/pic2.png Application Cache Progress event (36 of 38) http://myurlpath.com/my/app/path/sm/images/7.png Application Cache Progress event (37 of 38) http://myurlpath.com/my/app/path/sm/images/4.png Application Cache Progress event (38 of 38) Application Cache Cached event
all subsequent attempts to reload the page showed this confusing message in the console:
Document was loaded from Application Cache with manifest http://myurlpath.com/my/app/path/sm2/simplegame2.appcache Application Cache Checking event x GET http://myurlpath.com/my/app/path/sm2/game.css x GET http://myurlpath.com/my/app/path/sm2/game.js x GET http://myurlpath.com/my/app/path/sm2/images/blank.gif x GET http://myurlpath.com/my/app/path/sm2/images/card.png x GET http://myurlpath.com/my/app/path/sm2/images/startstop1.gif x GET http://myurlpath.com/my/app/path/sm2/images/startstop4.gif x GET http://myurlpath.com/my/app/path/sm2/images/level.png x GET http://myurlpath.com/my/app/path/sm2/images/10.png x GET http://myurlpath.com/my/app/path/sm2/images/plusminus3.gif x GET http://myurlpath.com/my/app/path/sm2/images/4.png x GET http://myurlpath.com/my/app/path/sm2/images/plusminus1.gif x GET http://myurlpath.com/my/app/path/sm2/images/time.png x GET http://myurlpath.com/my/app/path/sm2/images/s.png x GET http://myurlpath.com/my/app/path/sm2/images/attempts.png x GET http://myurlpath.com/my/app/path/sm2/images/found.png Application Cache NoUpdate event
It was a simple error. I changed my server’s directory but totally forgot to update the paths in my CACHE MANIFEST file to reflect this (duh!), so the app would load once and then fail every time after the Google Chrome’s console showing a failed “GET” request on a bunch of files at the top of my manifest. Specifically, I forgot to change this path: “http://myurlpath.com/my/app/path/sm/game.css” to this “http://myurlpath.com/my/app/path/sm2/game.css”. Manifest-Validator.com did not show me any error (naturally, it wouldn’t be able to detect human stupidity). Manifest files don’t provide anything like compiler warnings, so little things like this, even something like a hidden character for a line break can screw things up easily. A similar error, only involving case sensitivity of manifest files is described in the solution here.
timshaya 