0

I have a single page web app that use HTML5 history. I recently added a cache manifest to make it works offline.

The URL of the app is domain.com/app and when it load the cache manifest make this URL able to go offline. But once the app is ready, the state of the app change, and the URL become domain.com/app/page (thanks to history.pushState()).

But if I go offline and reload the page (with this URL domain.com/app/page), the browser tell me that there is no internet connexion instead of loading the app. If I ask for this URL: domain.com/app, the app load and the URL become domain.com/app/page once the app is ready.

So basically, is there a way to tell the browser that domain.com/app and domain.com/app/page are the same app ?

Nicolas BADIA
  • 5,612
  • 7
  • 43
  • 46
  • There are lots of ways ... you can [redirect](https://www.google.com.br/search?q=redirect+html) or fix your pushState code. If you post the code I might help you more. – rafaelcastrocouto May 27 '14 at 14:17
  • I'm not sure you quite understand the question. When an app is offline, there is no way to do redirect. And my pushState code do exactly what I want when my app is loaded... – Nicolas BADIA Jun 02 '14 at 06:58
  • Ok ... you are 100% right ... still need that code to help you. – rafaelcastrocouto Jun 02 '14 at 11:57

1 Answers1

2

Yes, it's actually quite simple, add a fallback section to your manifest.appcache file, so it looks something like this

CACHE MANIFEST
# 2014-06-26T12:11:34.216Z

CACHE:
/app
/app/script.js
/app/style.css

NETWORK:
*

FALLBACK:
/app /app

/app /app means that all requests to paths that start with /app shall fallback to /app.

There is a gotcha with HTML5 apps using history.pushState(): All paths you open your app initially with will be stored as extra entries in localStorage. If you have paths like app/document/<id> this can quickly become a lot. The biggest problem here is that when applicatioCache checks for an update, it will go trough all these entries and you can't do much about it.

Best practice is to use an iframe to load the /manifest.appcache file instead and remove the manifest property from your app's index.html file. You can find out more about it at http://labs.ft.com/category/tutorial/

I've made a small library that provides a nice JS API to cache your app with the iframe hack (and also provides lots of other goodies): https://github.com/gr2m/appcache-nanny

Gregor
  • 2,325
  • 17
  • 27
  • Damn, the answer was so easy. `/app /app` solved my problem. I tried `/app/* /app` (before seeing wildcard wasn't supported in the fallback section) but didn't thought to use `/app /app`. Thanks a lot. – Nicolas BADIA Jul 01 '14 at 22:30
  • Yeah I tapped into the same trap myself. A single * is supported, but not as part of a path. – Gregor Jul 04 '14 at 13:37