Building Progressive Web Apps

Chapter 7. Ensuring Offline Functionality with Background Sync

There are few things more frustrating to us as users than filling out a form, clicking the Submit button, and getting a connection error in response. Filling out forms can be slow and frustrating, especially on mobile devices—having all of that work taken away from us just because we happened to step into the elevator at the wrong moment can drive many of us to tears.

A slow, flaky connection can lead to just as much frustration. What if we click a button on a site, wait for something to happen, then once we get tired of waiting, try and navigate away before the action completes? The action might complete without our knowledge, or it might not. As developers, we have had to resort to techniques such as listening to the page’s onbeforeunload event and displaying a message begging the user to wait some more (also known as OK/Cancel—I honestly can’t remember which of those means wait; see Figure 7-1).

As users, we wouldn’t accept software that just erases all of our hard work from time to time. We have grown accustomed to expecting our software and our mobile apps not to treat us this way every time a nearby cell tower is experiencing too much load. Unfortunately, this is still the reality of trying to get things done on the mobile web.

This inherent unreliability has been at the heart of the divide between the web and native apps. Now a new technology called background sync finally lets us do something about this.