Revert "feat(PWA): ✨ Blogs Service Worker Test"

This reverts commit f0195d5.

nuxt.config.ts

@@ -147,22 +147,13 @@ export default defineNuxtConfig({
     }
   },
   pwa: {
-    strategies: 'injectManifest',
-    srcDir: 'service-worker',
-    filename: 'sw.ts',
     mode: 'production',
     manifest: {
       name: 'Konkamon Sion - Portfolio & Blogs',
       theme_color: '#379777',
       categories: ['portfolio', 'blogs'],
       description: 'เว็บไซต์ Portfolio & Blogs ของนาย กรกมล ศรีอ่อน - สร้างด้วย Nuxt 3 + TailwindCSS.',
       lang: 'th',
-    },
-    workbox: {
-      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
-    },
-    injectManifest: {
-      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
-    },
+    }
   }
 })

pages/blog/[slug].vue

@@ -29,47 +29,42 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import type { StrapiBlogSlug } from '~/types/StrapiBlogSlug'
 
+
 const { findOne } = useStrapi()
 const route: RouteLocationNormalized = useRoute()
 const nuxt = useNuxtApp()
 const { data: blogSlug } = useNuxtData('blogSlug')
-const fetchBlogSlug = async () => {
-  const cache = await caches.open('api-cache')
-  const cachedResponse = await cache.match(`/api/blogs/${route.params.slug}`)
-  if (cachedResponse) {
-    return cachedResponse.json()
-  }
-  const response = await findOne<StrapiBlogSlug>('blogs', route.params.slug as string, {
-    fields: ['title', 'subtitle', 'publishedAt', 'slug', 'content', 'updatedAt', 'createdAt'],
-    populate: {
-      mainImage: {
-        fields: ['url']
-      },
-      categories: {
-        fields: ['name']
+const { data } = await useAsyncData(
+  'blogSlug',
+  () =>
+    findOne<StrapiBlogSlug>('blogs', route.params.slug as string, {
+      fields: ['title', 'subtitle', 'publishedAt', 'slug', 'content', 'updatedAt', 'createdAt'],
+      populate: {
+        mainImage: {
+          fields: ['url']
+        },
+        categories: {
+          fields: ['name']
+        }
       }
-    }
-  })
-  cache.put(`/api/blogs/${route.params.slug}`, new Response(JSON.stringify(response.data.attributes)))
-  return response.data.attributes
-}
-
-const { data } = await useAsyncData('blogSlug', fetchBlogSlug, {
-  default() {
-    return blogSlug.value
-  },
-  watch: false,
-  deep: false,
-  getCachedData: (key) => {
+    }).then((data) => data.data.attributes),
+  {
+    default(){
+      return blogSlug.value
+    },
+    watch: false,
+    deep: false,
+    getCachedData: (key) => {
     if (nuxt.isHydrating && nuxt.payload.data[key]) {
       return nuxt.payload.data[key]
     }
     if (nuxt.static.data[key]) {
       return nuxt.static.data[key]
     }
     return null
+  },
   }
-})
+)
 
 useSeoMeta({
   title: blogSlug.value?.title,
@@ -84,24 +79,8 @@ useSeoMeta({
 definePageMeta({
   middleware: ['check-blog-post']
 })
-
 const { data: ast } = useNuxtData('markdown')
-const fetchMarkdown = async () => {
-  const mdCache = await caches.open('markdown-cache')
-  const cachedMdResponse = await mdCache.match(`/api/markdown/${route.params.slug}`)
-  if (cachedMdResponse) {
-    return cachedMdResponse.json()
-  }
-  const response = await parseMarkdown(blogSlug.value?.content as string)
-  mdCache.put(`/api/markdown/${route.params.slug}`, new Response(JSON.stringify(response)))
-  return response
-}
-const { status } = await useAsyncData('markdown', fetchMarkdown, {
-  default() {
-    return ast.value
-  },
-  watch: false,
-  deep: false,
+const { status } = await useAsyncData('markdown', () => parseMarkdown(blogSlug.value?.content as string), {
   getCachedData: (key) => {
     if (nuxt.isHydrating && nuxt.payload.data[key]) {
       return nuxt.payload.data[key]
@@ -110,6 +89,12 @@ const { status } = await useAsyncData('markdown', fetchMarkdown, {
       return nuxt.static.data[key]
     }
     return null
-  }
+  },
+  default(){
+    return ast.value
+  },
+  watch: false,
+  deep: false,
+  lazy: true
 })
 </script>