In a web project we recently had the use case that user will need access to some important info on the website when they are offline.
HTML5 cache manifest
My first thought was to do this with a HTML5 cache manifest. Unfortunately, you can’t use the FALLBACK section of the manifest without the caching part As I also did not want to open the Pandora’s box caching, I had to look for another option.
Online- / Offline Events
offline we can display the information when the internet connection fails.
As soon as there is an internet connection, we can return.
As we are using Turbolinks in our project, it became quite easy to handle this.
This small example just fetches the page
/offline via AJAX. If this is successful, it adds another two hooks
to replace the page content and reloading the page.
As the internet connection has to settle down, there is a timeout before reloading the page.
As this solution calls
/offline on every request, we add a lot of request which aren’t necessary often.
I am sure you could use
localStorage to cache the content and fetch it again once in a while.