custom-service-worker.js

import { Queue } from "workbox-background-sync";

let backgroundSync = "sync" in self.registration ? true : false;

/*
   queue- create post
 */
let createBlogQueue = null;
if (backgroundSync) {
  createBlogQueue = new Queue("createBlogQueue", {
    onSync: async ({ queue }) => {
      console.log("queue", queue);
      let entry;
      while ((entry = await queue.shiftRequest())) {
        try {
          await fetch(entry.request);
          console.log("Replay successful for request", entry.request);
          const channel = new BroadcastChannel("sw-messages");
          channel.postMessage({ msg: "offline-post-uploaded" });
        } catch (error) {
          console.error("Replay failed for request", entry.request, error);

          // Put the entry back in the queue and re-throw the error:
          await queue.unshiftRequest(entry);
          throw error;
        }
      }
    },
  });
}

/*
  events - fetch
*/

if (backgroundSync) {
  self.addEventListener("fetch", (event) => {
    if (event.request.method == "POST") {
      // Clone the request to ensure it's safe to read when
      // adding to the Queue.
      if (!self.navigator.onLine) {
        const promiseChain = fetch(event.request.clone()).catch((err) => {
          return createBlogQueue.pushRequest({ request: event.request });
        });

        event.waitUntil(promiseChain);
      }
    }
  });
}