Javascript Background Sync Stops Working If Page Is Loaded/refreshed While Offline

I'm currently learning how to use Background Sync as to allow users to PUT/POST changes while using a web app offline. I followed the instructions given by Jake Archibald in Intr

Solution 1:

Ok, I feel stupid. The browser is indeed the one that decides when to do the background sync.

The behavior I expected is wrong:

1. Access app while offline.
2. POST/PUT changes with Background Sync
3. Go back online, refresh page see changes right away

Behavior the browser actually implemented:

Accessing app while online:

1. Access app online.
2. app goes offline (manually or not)
3. POST/PUT changes with Background Sync
4. app goes online, and refresh
5. Changes are instant, since Sync happens as soon as app goes online. Browser is able to detect the change from online, to offline back to online?

Accessing app while offline

1. Access app while offline.
2. POST/PUT changes with Background Sync.
3. app goes online, and refresh
4. Changes aren't instant. Somehow the browser decides not to make the sync yet.
5. Close browser completely, and come back to page
6. The Browser syncs.

So is hard to know when the Browser will perform the sync, and only when accessing app while online, does the browser syncs if it detects a change from offline then online in same session (no refresh?)