0

I'm currently toying around with Sencha Touch 2.2.1 and am trying to get it to run offline using an HTML5 cache.manifest. Anyone know how to get this to work? I can only find old guides from the last version which no longer seem to work. After some fiddling I have my manifest as follows:

CACHE MANIFEST
index.html
app.js
touch/microloader/development.js

But this seems to throw errors in the development.js script when it attempts to send fetch the app.json file. Are there some Sencha settings I have to adjust for offline mode? Thank you for your help.

Primus202
  • 648
  • 7
  • 24

2 Answers2

2

After some hunting around it seems this feature is present in Sencha Touch 2.0 but still a bit incomplete. To get it to work, do as follows:

  1. You must have the Sencha command line installed (which you probably already have since it's required to make a Sencha project in the first place).

  2. Navigate to your project's parent directory in command line

  3. Use the sencha app build production command to "compile" your project into a single file

  4. Navigate to your production directory in YourApp/build/YourApp/production

  5. Chane the extension of cache.appcache to cache.manifest

  6. Edit the index.html file's html tag so that manifest="cache.manifest"

  7. Ensure your server is configured to serve .manifest files correctly

Now your production code should have a working cache manifest. Note you only need to change the extension so that the app works on iOS, it seems to work in browser (or at least Chrome where I tested this) with the .appcache extension.

Compiling to production appears to be the only way to generate a cache manifest file but you can use this same file in a testing build if you don't want all the code minified for debugging. Of course you'll have to copy your manifest over and ensure it's referenced in your testing build's html tag.

All in all Sencha clearly needs to update their documentation here but I'm glad I found this out. I only tested this with a super basic, static, two page application. Hoping it scales decently.

Primus202
  • 648
  • 7
  • 24
0

Instead of changing manually your production package, you should change in app.json lines after 'appCache'. Here is what will be generated by Sencha CMD and will work just fine after running sencha app build production.

You can see a live example here https://github.com/flrent/ConfMate/blob/master/app.json#L79

Florent Lamoureux
  • 21
  • 3
  • The problem isn't the content of the manifest, it's its file name which doesn't seem like it would change. – Primus202 Aug 06 '13 at 19:37
  • Why would you need to change to manifest? http://www.html5rocks.com/en/tutorials/appcache/beginner/ It works for me in all mobile browser and desktop browsers with the appcache file standard extension. That's why generates a .appcache and not a .manifest. – Florent Lamoureux Aug 07 '13 at 19:17
  • I'll give it another go. I also ran into an issue where Sencha fails to put my JSON files in the production build directory so I had to copy them in myself. Moreover it then fails to read them in correctly using AJAX since it's offline. Frustrating! I need to figure out how to load local JSON files and store them in localstorage I believe but it's tricky. – Primus202 Aug 09 '13 at 15:44
  • 1
    Yeah I understand. You should look at the app I sent you, i am doing exactly this. To have your files copied to the ouput build directory you need to tell Sencha who are they. (https://github.com/flrent/ConfMate/blob/master/app.json#L110) Then to make this file available offline you need to add it to the appCache statement (https://github.com/flrent/ConfMate/blob/master/app.json#L83) You can see that I have a schedule.json file to be cached. Good luck! – Florent Lamoureux Aug 09 '13 at 18:08
  • O I see. So you can alter that to automagically include the JSON files in there. Still uses the .appcache extension which was causing the main problems for me. – Primus202 Aug 22 '13 at 21:24
  • Moreover, I edited the automatically generated appcache to include the JSON as this solution does and it still wasn't able to read them in. I might have to store them in localStorage within the app itself instead of as separate files. – Primus202 Aug 23 '13 at 14:31
  • On a related note, I found that caching the JSON files offline wasn't working on iOS. Perhaps it was just my server settings but any luck getting those to work? I'm now going with a `localStorage` solution regardless since I need to update the data but I'm still curious. – Primus202 Sep 10 '13 at 15:37
  • I think it might be from your server, because for every app I worked with I had no issue and the data is actually bootstrapped from a json file that is html5 cached on the browser. – Florent Lamoureux Sep 20 '13 at 00:25