5 ms·

How to make a web app work offline

149 points by adlrocha 7y ago

zeroxfe 7y ago
Nice writeup! I did a bunch of work to make one of my hobby projects (https://pitchy.ninja https://pitchy.ninja) work off-line. The trickiest part was data synchronization between IndexedDB and the database on the server, managing and resolving conflicts if the app was used on multiple devices offline at the same time (then went online again.) Although IndexedDB worked pretty well in the end, it is a very finicky database, with a really convoluted API. There's a whole bunch of corner cases that you need to handle, and some of these are non-obvious.
- arendtio 7y ago
  I wish there was some easy to use library to solve this problem as this seems to be a problem many people come across when building a PWA.
  - feistypharit 7y ago
    Checkout workbox. https://developers.google.com/web/tools/workbox https://developers.google.com/web/tools/workbox
    - arendtio 7y ago
      Workbox is about service workers. So for very simple stuff like caching assets, it is quite helpful, but I was referring to the more transactional actions like multiple clients writing to the same backend, requiring to resolve conflicts. To my knowledge workbox doesn't help with that.
- rakoo 7y ago
  There are DBs for that: CouchDB (https://couchdb.apache.org/ https://couchdb.apache.org/) (with its browser counterpart, PouchDB), Gun (https://github.com/amark/gun https://github.com/amark/gun) and probably others.
- gkfasdfasdf 7y ago
  Google's Firestore API allows data to be persisted locally and synced.
- Raed667 7y ago
  Why does your app hijack the back button? (Firefox macOS)
  - zeroxfe 7y ago
    It's a single-page-app, so it uses the history API to route between paths. Unfortunately, there's a bug in my implementation (which I haven't been able to nail down yet), which causes the back button not to work consistently on all paths.
Gravyness 7y ago
Felt a little lacking some research on options, and manifest configuration is quite a topic on its on, but otherwise an informative post about all the steps required to build an offline app in todays technology. There are a few options for the frontend such as Angular/React or even webpack with other libraries to help with the offline caching, dealing with or programming service workers is pointless as they don't really provide any other benefit besides caching. I ended up implementing a syncronization layer myself, which was challenging in a fun way, but I wouldn't use IndexedDB API, it feels much like WebGL interface: overly verbose, stateful, and the specification does not mind web developers at all. For those and other reasons I recommend [Dexie.js](https://dexie.org/ https://dexie.org/) to handle the local DB.
- Pigo 7y ago
  Dexie is great, but it's a good idea to understand the lower level before you start leveraging the wrapper for it. I jumped into Tone.js before understanding the Web Audio API, and I eventually regretted it.
lecarore 7y ago
"it will be easier for you to generate a native mobile-app from your PWA source code using technologies such as Ionic, React Native or Apache Cordova." I believe react native doesn't belong here, it's not browser powered like ionic and Cordova.
- mcdonnellb 7y ago
  Genuine question, can you explain this a little more?
  - behindsight 7y ago
    Ionic and Cordova generally are "webview" apps. Essentially a headless mobile web site with access to device APIs. In modern Android and iOS, you could also just install a PWA directly without wrapping it in Ionic/Cordova with the caveat of losing access to some device level APIs. React Native utilizes actual native components that are declared via a JS bridge. It's not a webview. However in the author's defense, with the current work on react-native-web, you could share a lot of your react-native code that would swap device components with their equivalent web based components.
lecarore 7y ago
I appreciate the fact that this article about JavaScript is still perfectly readable without JavaScript activated.
depressedpanda 7y ago
This is a good overview that I wish I had access to when I started working on web apps. Unless you have a good conceptual model of the tech, it seems more difficult than it actually is.
pdimitar 7y ago
The fact that the younger devs expect this to be a baseline functionality, intuitively, should once and for all solve the age-old discussion about if event sourcing is a good idea or not.
LarryMade2 7y ago
I went a different route. - I installed a LAMP service on my tablet and setup the database to be distributed so I can sync and take the tablet offline.
thingification 7y ago
An interesting approach: https://github.com/automerge/automerge https://github.com/automerge/automerge Academic project, but from an experienced implementer. Though there are things missing, I suspect for some applications this might be usable already. The "Caveats" section seems like it may be needlessly scary: > No integrity checking: if a buggy (or malicious) device makes corrupted edits, it can cause the application state on other devices to become corrupted or go out of sync. I wonder if this can be addressed for now at the application level, on top of automerge? > No security: there is currently no encryption, authentication, or access control. This puzzles me: why would a data structure have encryption, authentication, or access control? Perhaps this refers specifically to Automerge.Connection? But I assume any gossip protocol could be substituted fairly straightforwardly? Otherwise I can only presume that by this he's just saying that the TRVE research program is incomplete -- but as far as I know, almost no software meets that sort of high standard! Also, it doesn't mention in that section that currently automerge never truncates data. That's a constraint I believe Kleppmann would like to relax in the future.
- thingification 7y ago
  > I wonder if this can be addressed for now at the application level, on top of automerge? On reflection, I think the answer to this is very likely "no". I had in mind storing the deltas in a log-structured database -- which I believe is what hypermerge does -- and detecting invalidity at application level and then rolling back to old log records in case of trouble -- but of course that doesn't help with losing sync, or effective loss of data from rolling back or corruption that leaves the data valid, and it's just not very practical. So, even though I suspect the problems in practice are rare (Martin's clearly a very able programmer), I guess that until he gets around to the integrity work he has in mind, it's limited to apps where the data is very transient for now. Those do exist: say, off the top of my head, a tool for collaborating on sketching simple diagrams -- in fact their pixelpusher demo is quite similar to that idea! I think he's currently focusing on performance improvements. Hope to see it grow into that!
SkyMarshal 7y ago
For folks interested in this topic here’s another group working on it, Offline Camp: https://medium.com/offline-camp/ https://medium.com/offline-camp/

149 points by adlrocha 7y ago

Nice writeup! I did a bunch of work to make one of my hobby projects (https://pitchy.ninja https://pitchy.ninja) work off-line. The trickiest part was data synchronization between IndexedDB and the database on the server, managing and resolving conflicts if the app was used on multiple devices offline at the same time (then went online again.) Although IndexedDB worked pretty well in the end, it is a very finicky database, with a really convoluted API. There's a whole bunch of corner cases that you need to handle, and some of these are non-obvious.

arendtio 7y ago
I wish there was some easy to use library to solve this problem as this seems to be a problem many people come across when building a PWA.
- feistypharit 7y ago
  Checkout workbox. https://developers.google.com/web/tools/workbox https://developers.google.com/web/tools/workbox
  - arendtio 7y ago
    Workbox is about service workers. So for very simple stuff like caching assets, it is quite helpful, but I was referring to the more transactional actions like multiple clients writing to the same backend, requiring to resolve conflicts. To my knowledge workbox doesn't help with that.
rakoo 7y ago
There are DBs for that: CouchDB (https://couchdb.apache.org/ https://couchdb.apache.org/) (with its browser counterpart, PouchDB), Gun (https://github.com/amark/gun https://github.com/amark/gun) and probably others.
gkfasdfasdf 7y ago
Google's Firestore API allows data to be persisted locally and synced.
Raed667 7y ago
Why does your app hijack the back button? (Firefox macOS)
- zeroxfe 7y ago
  It's a single-page-app, so it uses the history API to route between paths. Unfortunately, there's a bug in my implementation (which I haven't been able to nail down yet), which causes the back button not to work consistently on all paths.

Gravyness 7y ago

Felt a little lacking some research on options, and manifest configuration is quite a topic on its on, but otherwise an informative post about all the steps required to build an offline app in todays technology. There are a few options for the frontend such as Angular/React or even webpack with other libraries to help with the offline caching, dealing with or programming service workers is pointless as they don't really provide any other benefit besides caching. I ended up implementing a syncronization layer myself, which was challenging in a fun way, but I wouldn't use IndexedDB API, it feels much like WebGL interface: overly verbose, stateful, and the specification does not mind web developers at all. For those and other reasons I recommend [Dexie.js](https://dexie.org/ https://dexie.org/) to handle the local DB.

Pigo 7y ago
Dexie is great, but it's a good idea to understand the lower level before you start leveraging the wrapper for it. I jumped into Tone.js before understanding the Web Audio API, and I eventually regretted it.

lecarore 7y ago

"it will be easier for you to generate a native mobile-app from your PWA source code using technologies such as Ionic, React Native or Apache Cordova." I believe react native doesn't belong here, it's not browser powered like ionic and Cordova.

mcdonnellb 7y ago
Genuine question, can you explain this a little more?
- behindsight 7y ago
  Ionic and Cordova generally are "webview" apps. Essentially a headless mobile web site with access to device APIs. In modern Android and iOS, you could also just install a PWA directly without wrapping it in Ionic/Cordova with the caveat of losing access to some device level APIs. React Native utilizes actual native components that are declared via a JS bridge. It's not a webview. However in the author's defense, with the current work on react-native-web, you could share a lot of your react-native code that would swap device components with their equivalent web based components.

lecarore 7y ago

I appreciate the fact that this article about JavaScript is still perfectly readable without JavaScript activated.

depressedpanda 7y ago

This is a good overview that I wish I had access to when I started working on web apps. Unless you have a good conceptual model of the tech, it seems more difficult than it actually is.

pdimitar 7y ago

The fact that the younger devs expect this to be a baseline functionality, intuitively, should once and for all solve the age-old discussion about if event sourcing is a good idea or not.

LarryMade2 7y ago

I went a different route. - I installed a LAMP service on my tablet and setup the database to be distributed so I can sync and take the tablet offline.

thingification 7y ago

An interesting approach: https://github.com/automerge/automerge https://github.com/automerge/automerge Academic project, but from an experienced implementer. Though there are things missing, I suspect for some applications this might be usable already. The "Caveats" section seems like it may be needlessly scary: > No integrity checking: if a buggy (or malicious) device makes corrupted edits, it can cause the application state on other devices to become corrupted or go out of sync. I wonder if this can be addressed for now at the application level, on top of automerge? > No security: there is currently no encryption, authentication, or access control. This puzzles me: why would a data structure have encryption, authentication, or access control? Perhaps this refers specifically to Automerge.Connection? But I assume any gossip protocol could be substituted fairly straightforwardly? Otherwise I can only presume that by this he's just saying that the TRVE research program is incomplete -- but as far as I know, almost no software meets that sort of high standard! Also, it doesn't mention in that section that currently automerge never truncates data. That's a constraint I believe Kleppmann would like to relax in the future.

thingification 7y ago
> I wonder if this can be addressed for now at the application level, on top of automerge? On reflection, I think the answer to this is very likely "no". I had in mind storing the deltas in a log-structured database -- which I believe is what hypermerge does -- and detecting invalidity at application level and then rolling back to old log records in case of trouble -- but of course that doesn't help with losing sync, or effective loss of data from rolling back or corruption that leaves the data valid, and it's just not very practical. So, even though I suspect the problems in practice are rare (Martin's clearly a very able programmer), I guess that until he gets around to the integrity work he has in mind, it's limited to apps where the data is very transient for now. Those do exist: say, off the top of my head, a tool for collaborating on sketching simple diagrams -- in fact their pixelpusher demo is quite similar to that idea! I think he's currently focusing on performance improvements. Hope to see it grow into that!

SkyMarshal 7y ago

For folks interested in this topic here’s another group working on it, Offline Camp: https://medium.com/offline-camp/ https://medium.com/offline-camp/