Local storage - Offline Mode

[shiffman]

Some students alerted me that they lost work when they had internet connectivity issues. This is likely something we have to tackle later if/when we discuss offline versions of the editor, but perhaps there is a clever way to use local storage to help mitigate the problem.

[JobLeonard]

Hey, just my two cents, having struggled a lot with trying to make an existing React App offline-first (spoiler: I failed, but I did manage to make the state persistent, and improve caching behavior a lot).

I think there's two separate but related pieces of functionality that one might want:

1. using a service worker to make the app offline-first, meaning you can open the website even if you have no internet.
2. storing the state of the webapp off-line, to be retrieved when a website reloads, and to be synced with the server when a network connection is present. This is necessary for the previous point, but can also work without it.

Now, I am probably stupid but I never managed to get the former working in combination with react-router's "fake" URLs. Somehow I always ended up with multiple adjacent service workers and cached assets.

The second part was not that bad though!

I used localForage, which combines the simplicity of the localStorage API with IndexedDB for more storage. There are plugins for easily setting/getting/removing multiple items at once:

https://github.com/localForage/localForage-setItems
https://github.com/localForage/localForage-getItems
https://github.com/localForage/localForage-removeItems

Also, while I've never used it (because it didn't exist at the time), the redux-offline library might make it even easier to save the state of the editor: https://github.com/redux-offline/redux-offline

[catarak]

@JobLeonard thank you for all of these extremely helpful resources!

[JobLeonard]

No problem! Hope it will be useful! :)

Here is the link to the offline-plugin for WebPack: https://github.com/NekR/offline-plugin - we can safely assume that the problem was my own lack of understanding of WebPack, so I'm sure you'll have more success with it than me :)

Also, the redux-offline documentation links to this article, which explains quite a bit and has a lot more links to other resources: https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c

[devashish1099]

@catarak i would like to work on the issue if it still is a priority

[hydrosquall]

Coming here from #1258 - it's interesting to think about how the development experience / feature-set would change if offline mode wasn't just an option, but the first-class / primary mode design target. Related reading: https://www.inkandswitch.com/local-first.html

If it turns out that people somehow create projects that are too big to live in localStorage, another option that might help people could be to bundle the editor in a native desktop application. Electron works but is a bit heavy (10s of MBs at minimum), perhaps Tauri could be an option: https://github.com/tauri-apps/tauri

[JobLeonard]

IndexedDB can handle bigger amounts of data, and blobs as well, and is fairly well-supported across browsers. The localForage library I linked to earlier makes it quite easy to use for simple use cases (I don't know if this qualifies though)

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

https://caniuse.com/?search=indexeddb