How to access a registered workbox queue in my React application - reactjs

Question

I'm using the create-react-app built in service worker for my PWA. I'm using the Queue class from workbox to add failed api calls to the queue. All the registration of the service worker is done in my service-worker.ts file.
My question: How can I access an already registered queue in my React component? I want to display a counter stating the amount of unsycned api calls. It is not clear to me how I can achieve this.
service-worker.ts
// add failed fetch requests to queue
const queue = new Queue('fetch-requests');
self.addEventListener('fetch', (event) => {
if (!self.navigator.onLine) {
const promiseChain = fetch(event.request.clone()).catch(() => {
if (event.request.method === 'POST' || event.request.method === 'PATCH') {
return queue.pushRequest({ request: event.request });
}
});
event.waitUntil(promiseChain);
}
});
App.tsx
const App: React.FC = () => {
// how can I access the queue from here and do some stuff with it?
return <Router />;
};
export default App;

Answer 1

Your queues are stored in indexedDB as "workbox-background-sync".
So, it's just a matter of querying the store. See example below
function getQueuesMeta() {
return new Promise(resolve => {
const connection = indexedDB.open("workbox-background-sync")
const res = []
connection.onsuccess = (event) => {
const db = event.target.result
try{
const tx = db.transaction(["requests"])
const reqIndex = tx.objectStore('requests').index('queueName')
reqIndex.openCursor().onsuccess = (e) => {
const cursor = e.target.result
let meta = {}
if (cursor) {
meta = {
// if you got meta, time to get it
timestamp: cursor.value.timestamp
}
if ('undefined' == typeof res[cursor.key]) {
res[cursor.key] = [meta]
} else {
res[cursor.key].push(meta)
}
cursor.continue()
} else {
resolve(res)
}
}
} catch (error){
console.log('no ‘request’ objectStore')
resolve(null)
}
}
})
}