Google Launches background Sync API

Background Sync is Google's new web API that can delay user behavior until the user's network connection is stable. This helps to ensure that the data that the user wants to send is the actual data sent.

The problems that exist today

Network is the most time to kill users, time wasted on the network waiting for page loading, Web page rendering and other loading data aspects.

But there are a lot of times when you don't want to waste time and more expect to reach the following experience: 1. Take out the phone; 2. achieve user goals; 3. Put it back on the phone; 4. Enjoy life

However, a smooth user experience can often be affected by a bad network, often giving users a blank screen or a stalled progress bar, with up to 10 seconds of user tolerance. Although Service workers can resolve page problems by loading the cache, problems arise when the client sends multiple data.

At this point, if the user clicks to send the Hankyu, they must stare at the screen until the information is submitted, and if the user tries to navigate or close the page, use the dialog box to prompt the user, the progress is not complete, and you need to wait patiently. If the user cancels the connection, you need to tell the user "Sorry, you need to re-perform the operation." "With background Sync all the problems are solved.

Solution Solutions

Before, when the user uses Instant chat record, sends the expression, if has no network connection, once has the network connection, the information will send immediately. Background Async is not released with the new version of Chrome, you need to set: "//flags/#enable-experimental-web-platform-features" and restart the browser.

1. Open the App

2. Turn off the network connection

3. Enter information

4. Back to Home screen

5. Open the network connection

6. The background will send the message

Sending messages in the background can improve performance. The app does not need to handle the issue of sending messages, so the app joins the message directly to the output stream.

How to implement background synchronization

A truly extensible web Style that enables any desired functionality. The event is triggered immediately when the user has a network connection.

such as push message, use service worker as the event target, when the page cannot open, can help you to open, below is the code that registers for the page to register:

//Register your service worker:navigator.serviceWorker.register ('/sw.js '); //Then later, request a one-off sync:navigator.serviceWorker.ready.then (function (swregistration) {   Return swRegistration.sync.register (' myfirstsync 'forevent in/sw.js: Self.addeventlistener (' sync ', function (event) {  if (event') Myfirstsync ') {    event. Waituntil (DoSomeStuff ());  });

DoSomeStuff () Returns a success token indicating that the operation succeeded or failed and that, once it was executed, the synchronization worked. If it fails, another synchronization operation is attempted to reconnect.

The sync tag name must be uniquely identified.

What happens when I use background sync?

You can use schedules, chats, messages, emails, document updates, settings changes, and any data that you want to send to the server when you upload a photo when the data is sent. Even if the page is closed or the user jumps to another page, the page will save the data to indexed DB, and the service worker will retrieve the information and send it.

Progressive enhancement

Not all browsers support background Sync, especially safari and edge do not support servcie workers. Progressive enhancement can help with this feature:

if (' serviceworker 'in' SyncManager ' in window) {  Navgiator.serviceWorker.ready.then (function (reg) {    return reg.sync.register (' tag-name ') );  }). Catch (function () {    //system is unable to register for a sync,    //This could is an os-level restrict Ion    postdatafromthepage ();  Else {  //Serviceworker/sync not supported  postdatafromthepage ();}

Service workers or background Sync browser is not supported, take the old method implementation.

Whether the user's network connection is good or bad, using background Sync is the best solution to prevent users from jumping or closing pages while sending data.

Background Sync Future development

Google expects background Sync to be embedded in chrome in 2016. Feature is being researched on "Periodic background sync", which supports periodicsync requests within a time period, subject to time, battery status and network status.

Google Launches background Sync API