Implementing sync only on Wi-Fi option on mobile (Issue #720)

I'm thinking how to best implement this and I'd like to ask laurent22's advice. I can see two main ways of doing it:

  • Checking network type each time in app-mobile/root before calling setupRecurrentSync and aslo before starting initial sync on app launch.

  • Adding an optional callback function to lib/registry (eg canSync) which is called before each scheduled sync. Then this function is defined in app-mobile/root to check the network type. This would require less new code and it's resilient to all future changes in how setupRecurrentSync is called. On the other hand extra logic is necessary to allow for manual syncs. (which, I assume, should still always be usable)

Thanks!

How do you check if the wifi is on or off? I guess you shouldn't poll for this as it's a native call, which would be slow. Instead there should be some event you can listen to, is that correct?

For this you should keep things as low level as possible so that any place that use the sync feature will go through your wifi check, so your second approach I think is best. In registry.ts somewhere there's a call to sync.start() and I think that's just before this function that you should add your checks.

Keep in mind that registry.ts is used on all platforms (including desktop and cli) so make sure your check is active only for mobile.

Also be careful when you make the native call to check the wifi state, make sure you handle errors. If there's an error, it should default to have the wifi enabled as we can't risk having sync disabled due to some error. But the error of course should be logged.

The spec on that issue is not well detailed, so if you could describe what you're going to do before implementing it that would be great. We need to know:

  • How the UI will look (any new options, UI element, etc.). No need for a mockup, just a description in text is enough.
  • An overall idea of how you're going to implement it.

There was a lib for this, think it was a part of react-native earlier but got split out into a separate package.

Thanks for the quick reply!

I'm planning to use this library: react-native-netinfo.

It supports both polling and subscribing to changes in network state. I think initially I'll just poll it each time from registry.ts as you suggested and then see if it impacts performance. If it does I'll add an event listener and keep track of the network state in a member field.

As for UI I'd like to keep it minimal, I'd just add a mobile-only toggle option (like "Synchronize only over WiFi connection") to Settings.ts, and also some indication above the sync button if automatic syncing is disabled because of mobile data. "Using mobile data, automatic synchronization is disabled. You can still press Synchronize to start a manual sync." for example.

As I mentioned, manual sync should still be possible so I think for that I'd pass an argument to scheduleSync to ignore network check

Please use British spelling for the source translation in the code. No worries, I'll add the US spelling right after. :wink:

(I'm using the US spelling myself, even though I'm in Canada.)

Alright, sure thing! Sorry, didn't notice the app is using synchronise.

No worries, all good. Just wanted to make sure it is consistent.

hi ,
implemented similar with -react-native/netInfo


I am testing it Right now to make compatible without disturbing other apps, and it create many errors while you import it.
but i didn't found netInfo good library , finding other option to do that!

you can quickly learn working of this library from here - see

I haven't seen any errors while integrating netinfo. What kind of errors did you get?

that's great!!

it got this-
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

You have to recompile the android app when adding a new native module.

Ok that makes sense. I guess you could simply check how long the call takes to confirm this.

Let's not add text over the sync button because that won't leave much space anymore for the notebook list. It would be good if there was some indications but I'm not sure what. What do other apps do?

Once everything is clear about the feature, please add a post to the original issue with your spec. For some examples of spec, see the spec label

yes already resolve it!

what I did to make sync over wifi

  1. created a metadata in Settings.js as a boolean value
  2. Added a listener in root that detects the connection type and automatically save the settings wifi is enabled or not.
  3. added a check before sync target, get the value of connection type from settings and if type is wifi then it proceeds other wise it returns null

From the ones I use, that support this feature:

  • Flym RSS reader - no indication, just does nothing
  • Podcast Addict - throws an error when attempting to sync
  • Google Drive - files pending upload are grey and have a short message under their filename "Waiting for WiFi"

This is what I could come up with for Joplin:

  • A short text, as in my original proposal
  • An icon + an extra short text

As you can, see both of them take about as much height as the "Completed: ..." message shown after a successful sync.

Simple text:

Icon + explaining message:

Icon + completed sync report:

Current behavior:

Also I've noticed while testing that on the dev branch this report under the sync button doesn't show up after sync, and the animation doesn't play while syncing either. I've traced it back to lib/Synchronizer.ts, where it seems, the dispatch method is not correctly set, but I can't figure out why. I've tested it on abe0013 so it's not caused by my changes. (the last screenshot comes from my phone running 1.7.5)

1 Like

same here , this is why I use log book to see sync status!

Which branch is this?

It's the dev branch. On the 3rd screenshot I just typed in "Completed:..." by hand for testing.

You need to consider that the UI can be in a different language for which this is not necessarily true.

I wonder if it possible to maybe use the sync icon itself, modify it slightly if only manual sync is allowed? I'm not a designer so not sure how that could look like.

:fearful: okay!!

Idea #1
2021-03-18T11:24:21 2021-03-18T11:36:09

Idea #2
2021-03-18T11:37:49 2021-03-18T11:36:44

Idea #3
2021-03-18T11:33:52 2021-03-18T11:34:13

Idea #4
2021-03-18T11:39:34 2021-03-18T11:40:28

1 Like