Notify users when they're working offline

[MatthewDorner]

The software has no way, as far as I have seen, for users to tell whether they're working offline or online. This could cause users to not notice if a server goes down or if a network connection is severed, potentially for a long time. Also it could lead to data loss if browser data is cleared either by mistake or if a user thinks it's synced with the server but is not, or obviously if a laptop is lost or HDD failure.

I suggest the frontend should display a bar at the top if it's working offline that says something like "OFFLINE: Unable to connect to server to save data. Erasing browser history will result in the loss of unsaved changes." or some other device to convey the same information.

[donaldwasserman]

There is an Ember addon that gets us 90% of the way there: https://github.com/BBVAEngineering/ember-network-state

To Implement this, we'd need to:

• Install the addon
• In the init method of the index controller implement something like this:

init() {
  let network = this.get('network');
  network.on('change', state => {
    if (state === "OFFLINE")  {
      //do something
    }
  })
}

We could use something like https://github.com/poteto/ember-cli-flash to implement flash messages or roll our own

[broerse]

You can also use PouchDB itself like this:

https://github.com/broerse/ember-cli-blog/blob/master/app/adapters/application.js#L39

We split sync in replicate.to and replicate.from to show the seperate upload and download indicators.

See the red and green clouds here: https://bloggr.exmer.com/

It shows that users work offline even if internet is up,

[donaldwasserman]

@broerse That's an even better approach!

[mikeelemuel]

Does this issue is all about notifying the user that they are offline?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[omkar-joshi]

I'd like to help with this

[Kgwenzi]

What of using the React detect offline library like this :

https://github.com/chrisbolin/offline/blob/master/src/App.js

For example:

import { Offline, Online } from "react-detect-offline";
 
const App = () => (
  <div>
     <Online>Only shown when you're online</Online>
     <Offline>
          //do this when offline
     </Offline>
  </div>
);

In the <offline> tag, the software can be run through in offline mode but with a notification on the top saying the text. Although the user would be offline, the data he/she inputs should be saved till they go back online. so use of the useEffect hook with local storage. This keeps any data inserted in the browser and is retrieved once reloaded.

[fox1t]

@Kgwenzi Hi, thanks to pointing out this lib. For data persistency we use pouchdb, so saving part and sync when online is covered seamlessly. We can use react-detect-offline to display an icon/text while offline, with a clarification of the implications.

[MatthewDorner]

react-detect-offline allows us to pass the database URL and poll that specifically. Using PouchDB sync callbacks as described earlier in the thread seems like it would have some benefits, but be more complex to implement.

And how should this message appear?

[jackcmeyer]

@MatthewDorner I looked into using the pause/unpause events for determining if the db is syncing or not. Apparently these events are used for when the app connects/unconnects and when it starts syncing/some syncing.

Do you have any experience with these events (or any others that might work)?

It does have a “up” endpoint we could poll https://docs.couchdb.org/en/stable/api/server/common.html#get--_up.

[MatthewDorner]

Just tested this, you get a paused event when you make CouchDB inaccessible, but you also get it when the connection is up and syncing is complete. And none of the other events ('complete', 'active', 'change', 'denied' and 'error') occur either.

There IS an options.back_off_function you can supply which runs when the connection fails and sync needs to be retried, but its real purpose is to let you customize the retry interval.

[MatthewDorner]

Also if you supply retry:false to options, when paused occurs due to lost connection you'll get an error object. But then it won't automatically retry... And with retry:true, paused doesn't supply the error object so you can't tell.

https://stackoverflow.com/questions/26892438/how-to-know-when-weve-lost-sync-with-a-remote-couchdb

EDIT: actually it's an error event you get, paused still occurs but doesn't provide any info

error (err) - This event is fired when the replication is stopped due to an unrecoverable failure. If retry is false, this will also fire when the user goes offline or another network error occurs (so you can handle retries yourself, if you want).
https://pouchdb.com/api.html#replication

[broerse]

We still use the green and red clouds I pointed out before in this issue for many customers and they understand it. See https://bloggr.exmer.com/

[MatthewDorner]

@broerse I see, the pause message works differently when you use the replicate.to and replicate.from instead of just sync. now it provides an error object when replication fails.

[Kgwenzi]

@MathewDorner Ain't it possible to use the retry:false option and if the application encouters an error, an event listener starts a counter of 30 seconds is started to then retry the app. Therefore every 30 seconds the user is told the error if there isn't a connection.

[fox1t]

The desired behavior is:

1. "User goes offline -> we write "you are working in offline mode" and make this text not removable.
2. User backs online -> we remove "you are working in offline mode", we write "you are back online" and remove this last message after some seconds.

Speaking of sync, we will address it in a separate issue as we need to work on the server side before deciding about FE.
What do you think?

[Revln9]

Hi, i used this on one of my projects, and it seems to work pretty well without the need of adding some kind of plugin

if (navigator.onLine) {
  
} else {
  
}

you can also subscribe to this event like that

document.body.addEventListener("online", function () { console.log("online") }, false);

document.body.addEventListener("offline", function () { console.log("offline") }, false);

https://caniuse.com/#feat=online-status

96 % global usage seems pretty good what do you think?

[andrew-oxenburgh]

I'm looking for a first ticket and I could pick this up based on RevIn9s' https://caniuse.com/#feat=online-status but what does it actually look like? Text was mentioned, but where would that go? Someone mentioned a cloud icon.

[hd-genius]

I'd like to work on this.

[jackcmeyer]

sounds good, @roy-stewart!

[alessioprestileo]

Hi, I can help with this issue, I've implemented the same feature at work.

[matteovivona]

Of course @alessioprestileo!