Sign up for Hasura Newsletter

Offline mode for the webapp

Offline mode for the webapp

To make our app work offline, we need to get the web assets to work offline. Create React App already has the required boilerplate for making an app offline using service workers.

Open src/index.js and change the line that says serviceWorker.unregister() to serviceWorker.register().

Once you do this, refresh the page, go offline and refresh again. You will see that the page loads despite there being no network connection!

Authentication in offline mode

We are using JWTs issued by Auth0 for authentication. While refreshing these tokens, we need to make sure that the user is online, otherwise the user will see a network error from Auth0. This is done in renewSession method in AppWrapper.js:

renewSession() {
const interval = setInterval(() => {
const shouldRenewSession = this.isLoggedIn &&
(!this.idToken || this.isExpired());
if (window.navigator.onLine && shouldRenewSession) {
this.auth0.checkSession({}, (err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
} else if (err) {
this.logout();
console.log(err);
alert(`Could not get token (${err.error}: ${err.error_description}).`);
}
});
}
}, 5000);
}
Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2021 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin