Working with Service Workers

We're using service workers for two main purposes:

  1. To cache out static and dynamic data feeds - to make them available offline
  2. To run offline data sync using service workers

To achieve the first point, we're using sw-precache from Google and for the second - Vanilla JS with a little help from sw-toolbox

Making things happen

The service-worker source code for vue-storefront is pre-compiled with Babel presets and all is stored in an additional theme-specific Service Worker in src/{themename}/service-worker/index.js. This file is attached to service-worker.js generated by sw-toolbox.

After changing anything in {themename}/service-worker/index.js, despite you're in yarn dev auto reloading mode, you need to do two things:

  1. Recompile app (which regenerates service-worker): yarn build

  2. Reload Service worker in Dev Tools (in Chrome - just click "Unregister" and reload the page, new SW will be installed).

How to work with service-workers in Chrome

Communication with the app

The application can speak to the service worker using the event bus - and only doing so. Please take a look at /core/lib/sw.js where we have the following method:

export function postMessage(payload) {
  if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
    // check if it's properly installed
    navigator.serviceWorker.controller.postMessage(payload);
    return false;
  } else {
    // no service workers supported push the queue manualy
    return true;
  }
}

It allows you to send data to the service worker. For example, when the order is placed (/core/store/modules/checkout):

  /**
   * Add order to sync. queue
   * @param {Object} product data format for products is described in /doc/ElasticSearch data formats.md
   */
  [types.CHECKOUT_PLACE_ORDER] (state, order) {
    const ordersCollection = Vue.prototype.$db.ordersCollection
    const orderId = entities.uniqueEntityId(order) // timestamp as a order id is not the best we can do but it's enough
    order.id = orderId.toString()
    order.transmited = false
    order.created_at = new Date()
    order.updated_at = new Date()

    ordersCollection.setItem(orderId.toString(), order).catch((reason) => {
      console.error(reason) // it doesn't work on SSR
      sw.postMessage({ config: config, command: types.CHECKOUT_PROCESS_QUEUE }) // process checkout queue
      console.info('Order placed, orderId = ' + orderId)
    }) // populate cache
  },