Progressive enhancement Background Sync example

It’ll be a while before all browsers support background sync, especially as Safari and Edge don’t yet support service workers. But progressive enhancement helps here:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready
    .then(function (reg) {
      return reg.sync.register('tag-name')
    })
    .catch(function () {
      // system was unable to register for a sync,
      // this could be an OS-level restriction
      postDataFromThePage()
    })
} else {
  // serviceworker/sync not supported
  postDataFromThePage()
}

Canonical Links

Avoid split brain, also non-trivial:

<link rel=”canonical” href=”http://themindfulbit.com/blog/noble-absence">

Auto Refresh

Delay is in seconds, zero is valid.

So, this is once a day.

<meta http-equiv="refresh" content="3600" />

Compatability

Check via caniuse.com

Webworkers

<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
      // This script won't be parsed by JS engines because its type is javascript/worker.
      self.onmessage = function(e) {
          self.postMessage('msg from worker');
      };
  // Rest of your worker code goes here.
</script>
<script>
  var blob = new Blob([document.querySelector('#worker1').textContent], {
    type: 'text/javascript',
  })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob))
  worker.onmessage = function (e) {
    console.log('Received: ' + e.data)
  }
  worker.postMessage('hello') // Start the worker.
</script>