ListBlog.vue

<template>
    //rest of the code
    <q-card
    class="my-card q-ma-lg"
    :class="{ 'bg-red-1': blog.offline }"
    flat
    bordered
    v-for="blog in blogList"
    :key="blog.key"
    @click="redirectToBlog(blog.id)"
  >
    <q-card-section horizontal>
      <q-badge v-if="blog.offline" class="absolute-top-right" color="red"
        >Stored offline</q-badge
      >
    
      <q-card-section class="col-5 flex flex-center">
        <q-img class="rounded-borders" :src="blog.image_url"></q-img>
      </q-card-section>
    </q-card-section>
  </q-card>
 //rest of the code
 </template>
 
  <script setup>
    import { ref, onMounted } from "vue";
    import {
      getBlogs,
      deleteBlog,
      addToFavoriteBlog,
      likeBlog,
    } from "src/services/ApiService";
    import { openDB } from "idb";
    import { useQuasar, date } from "quasar";
    import { useRouter } from "vue-router";

    const blogList = ref([]);
    const isLoading = ref(false);
    const $q = useQuasar();
    const router = useRouter();

    onMounted(async () => {
      getBlogList();
      listenForOfflinePostUploaded();
    });

    const getBlogList = async () => {
      isLoading.value = true;

      try {
        blogList.value = await getBlogs();
        isLoading.value = false;

        if (!navigator.onLine) {
          getOfflineBlogs();
        }
      } catch (error) {
        $q.notify({
          message: "Could not download blogs." + error,
          type: "negative",
          timeout: 2000,
        });
        isLoading.value = false;
      }
    };


    const getOfflineBlogs = async () => {
      let db = await openDB("workbox-background-sync");
      try {
        const failedRequests = await db.getAll("requests");
        for (const failedRequest of failedRequests) {
          if (failedRequest.queueName == "createBlogQueue") {
            let request = new Request(
              failedRequest.requestData.url,
              failedRequest.requestData
            );
            request.formData().then((formData) => {
              const offlineBlog = {
                id: formData.get("id"),
                title: formData.get("title"),
                content: formData.get("content"),
                liked: formData.get("liked"),
                favorite: formData.get("favorite"),
                created_at: formData.get("created_at"),
                updated_at: formData.get("updated_at"),
                offline: true,
              };
              blogList.value.unshift(offlineBlog);
            });
          }
        }
      } catch (error) {
        $q.notify({
          message: "Error fetching offline blogs" + error,
          type: "negative",
          timeout: 2000,
        });
      }
    };

    const listenForOfflinePostUploaded = () => {
      if ("serviceWorker" in navigator) {
        const channel = new BroadcastChannel("sw-messages");
        channel.addEventListener("message", (event) => {
          if (event.data.msg === "offline-post-uploaded") {
            const offlineBlogs = blogList.value.filter((blog) => blog.offline);
            if (offlineBlogs.length > 0) {
              const lastOfflineBlog = offlineBlogs[offlineBlogs.length - 1];
              lastOfflineBlog.offline = false;
            }
          }
        });
      }
    };
    //rest of the code
  </script>