Background Sync & Push Notifications


  1. Understand how background sync works with Service Workers to queue network requests
  2. Be able to implement push notifications when a sync event is complete

Background Sync

  • allows us to defer an action to a later point in time when a user has a more stable network connection
  • is an API dependent on Service Workers
  • allows us to run code on a separate thread that will not lock up or interfere with any other client-side javascript

Push Notifications

  • enables us to send notifications outside the context of a browser page
  • mimics the notification functionality we're familiar with on our phones and devices

When Do I Use These?

  • when a user is manipulating application data through network requests but has an unstable or intermittent connection

Let's Practice

Fetch and checkout the 'before-sync-lesson' branch of the offline news repo

`npm install`

`webpack --watch`

`node server.js`


What's New?

  • Added a tiny form so that any bozo can add their own news

What Are Our Goals?

  • Set up communication between our client-side code and our service worker
  • Service worker intercepts POST request and waits for network connectivity before completing
  • Upon completion, SW sends a message to the client to update the DOM
  • Upon completion, SW sends a push notification to notify users it is complete