Background Sync & Push Notifications

Goals:

  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
<h3>Background Sync</h3>

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

<h3>Push Notifications</h3>

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

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

<pre>`npm install`</pre>

<pre>`webpack --watch`</pre>

<pre>`node server.js`</pre>

<pre>`http://localhost:3000`</pre>

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