Offline Support?

…continuing a conversation originally from this GitHub Issue


Question from Chris Drackett:

Curious if any thought has been put into supporting a site working without an internet connection. Thinking about local caching, optimistic updates, change tracking for when a client comes back online.

There has been some scattered discussion of offline support (which touches on workers and PWA). The most thought has come from @phzbox who created this Google Doc in hopes of getting the conversation started:

Further discussion is welcome!

1 Like

Thanks a lot @phzbox for this document, that really covers a lot of ground to get the topic started.

I’m proposing this PR: https://github.com/redwoodjs/redwood/pull/1372

The point is to offer a setup command to create a raw manifest.json and service worker file.
The proposed files enable a “shallow PWA”, with them you can straight away install an app on device and cache an offline page to display if network is missing.

That would be level 1.5, according to the document Offline & Real-time updates, just a first step to get things started.

As for the level of support we could aim at reaching for RW, I think it’s possible to get up to level 4, partly achieved, as described in the doc. The relational DB issue would be a cliff I’d not try to jump over and leave it entirely to the developer, if we can get there it would already be awesome though.

@thedavid does the core team have a referee for this feature, the community could discuss next steps with? Anyone with experience on the matter?

On my side I’d gladly finish my PR but I’d need some community/core team feedback to see what’s needed for a first step, if the setup command is good enough to build on or not.

@phzbox may I request a review/feedback for #1372 ?

1 Like

https://hospitalrun.io.

Neste endereço tem um conceito de off-line first interessante.

Não sei se ajudo com essa informação.

Mas tenho acompanhado a evolução de redwoodjs e fico feliz por existir essa possibilidade.

@ricardofernandes Welcome to the RW community forums!

I don’t speak a word of Spanish, so I had to run your message through Google Translate, and something might have been lost in the translation. Did you make that hospitalrun site? What should I look for on the site?

Eu tenho estudado e procuro aprender e utilizar com o que tem pronto no site - hospitalrun.

This project uses pouchdb-server for development and you, as contributor, don’t need to provide your own CouchDB instance.

Fiz referencia a recursos interessantes de um software que funciona tambem offline.

Espero ter lhe ajudado.

I had never heard of https://pouchdb.com/ before. Thanks for mentioning it, it is an interesting feature!

Obrigado tambem.

The point is to offer a setup command to create a raw manifest.json and service worker file.
The proposed files enable a “shallow PWA”, with them you can straight away install an app on device and cache an offline page to display if network is missing.

2 Likes

None of the major GraphQL libraries seem to offer offline-first or Optimistic UI. As seen on this comparison page of Apollo Client, React Query, SWR, and Relay: https://react-query-git-ce4fe79195bc3c2d81a564e80473188eb00f62e8.tannerlinsley.vercel.app/docs/comparison

Maybe because they shouldn’t (size-wise)? But maybe they should? It is touted as a quantum leap in UX: twitter.com/swyx/status/1220485245742604289.

(Relay can actually enable it with a third party plugin called react-relay-offline that comes at an added cost of 16.4 kB, according to bundlephobia.)

But aws-amplify/datastore is a GraphQL client that does offer offline support. It is open-source, and the client-side part of it is vendor agnostic. Importantly: it doesn’t add clutter to the component hierarchy, like Apollo Client tends to do (amongst other problems, mentioned in redwoodjs issue #758). So what about that, as a full replacement of Apollo Client? A downside is that aws-amplify/datastore takes 127 kB, according to bundlephobia. When Apollo Client takes only 15.6 kB. However, the alternatives for NextJS next-offline or next-pwa take 787 kB and 916 kB each. I would guess that makes offline-support too costly to add to most NextJS apps. So, having offline-support in RedwoodJS could be a competitive advantage.

(PS: I had to remove all the extra links I added to back up my claims and for your convenience, since new forum users here are only allowed to add 2 links, unfortunately.)

1 Like

See also:

1 Like

Ah, interesting.

As of Redwood v0.21 the GraphQL Client is swappable. So if anyone wants to take this for a spin it’s now possible to do so.

Oh wow, looks like React Query already added Offline Mutation Support and an experimental version of Offline Caching! :open_mouth: https://react-query.tanstack.com/comparison

With its elegantly small bundle size, I think React Query is the hottest candidate for a client side GraphQL library these days. I see they have an entire section on Optimistic UI as well: https://react-query.tanstack.com/guides/optimistic-updates

Awesome that you made the GraphQL client swappable! It increases the modularity of Redwood, and heeds the wise adage of Robert C. Martin to “Date frameworks, but not marry them.”. So it will be even more future-proof for ecosystem changes/shifts.

1 Like

I like the term “Bi-directional Infinite Queries” mentioned in the feature comparison. Good album name.

2 Likes

Interesting comparison table. I wish they had included urql and graphql-hooks as well, both which have a smaller bundle size than React Query.

Yeah! It is possible to fork it and add a column for it, if you’d like.

Here is a fork/PR of the comparison table which includes Relay:

Here is a comparison of GitHub stars and NPM downloads of the respective libraries:

If you like graphql-hooks, also check out the slightly (2x) more popular graphql-request from Prisma Labs.

Found these links in relation to offline-support for Apollo, haven’t used these myself:

1 Like

Datastore is something I’ve been following because I’m interested in anything Swyx finds interesting. I’d be curious how easily it can be used independently from the larger amplify-js library.

1 Like

Great. Now all my posts in this thread were flagged by the community and removed. Did someone implement a very aggressive automatic removal system of posts with links?

Anyways, swyx has now been notified about reducing the bundle size of DataStore (so it can more easily be included in frameworks such as Redwood) for offline support. So I guess he’s already looking into it. :wink:

1 Like

Yeah, the software does that sometimes :frowning: Sorry about that. But it’s all fixed now, right?

2 Likes

yeah, fixed again! thanks.

1 Like