uppyService.js

import { Core, Tus10 } from 'uppy';
import runtime from 'serviceworker-webpack-plugin/lib/runtime';

export const uppy = new Core({ wait: false });

function uploaderUpdatedAction(value) {
    return {
        type: 'UPLOADER_UPDATED',
        value
    };
}

export function initialise() {
  uppy
    .use(Tus10, { endpoint: 'http://localhost:9002/files/' })
    .run();

  if ('serviceWorker' in navigator) {
      runtime.register({
          scope: 'http://localhost:9001/'
      }).then(() => {
          console.log('The service worker has been registered');
          return navigator.serviceWorker.ready;
      }).then((serviceWorkerRegistration) => {
          console.log('service worker ready', serviceWorkerRegistration);
          navigator.serviceWorker.addEventListener('message', (event) => {
              switch (event.data.type) {
              case 'ALL_FILES':
                event.data.files.forEach((file) => {
                  uploadFile(file);
                });
                  break;
              }
          });
          navigator.serviceWorker.controller.postMessage({
              type: 'GET_FILES'
          });
      });
  }
}

function uploadFile(file) {
  uppy.emitter.emit('core:file-add', {
      source: 'uploadLocal',
      name: file.name,
      type: file.type,
      data: file
  });
}

export function addFile(file) {
  uploadFile(file);
  // TO IMPLEMENT: before calling the service worker, we need to check if the service worker 
  // exists or not (may not actually be supported)
  navigator.serviceWorker.controller.postMessage({ type: 'ADD_FILE', data: file });
}

uppyServiceWorker.js

const fileCache = [];

self.addEventListener('install', (event) => {
    console.log('Installing..');

    event.waitUntil(
    Promise.resolve()
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', (event) => {
    console.log('activate');
    event.waitUntil(self.clients.claim());
});

function sendMessageToAllClients(msg) {
    clients.matchAll().then((clients) => {
        clients.forEach((client) => {
            client.postMessage(msg);
        });
    });
}

function addFile(file) {
    console.log('addFile', file);
    fileCache.push(file);
}

function getFiles() {
    if(fileCache.length > 0) {
      sendMessageToAllClients({ type: 'ALL_FILES', files: fileCache });
    }
}

self.addEventListener('message', (event) => {
    switch (event.data.type) {
    case 'ADD_FILE':
        addFile(event.data.data);
        break;
    case 'GET_FILES':
        getFiles();
        break;
    }
});