Merge pull request #11 from opensource254/ft/full-pwa

chore: update the manifest and theme color.

Author: StanleyMasinde

index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PWA generator</title>
   <meta name="description" content="Generate your PWA minifest easily.">
+  <meta name="theme-color" content="#ffe324" />
   <link rel="manifest" href="/manifest.json">
 </head>
 

public/manifest.json

@@ -1,6 +1,8 @@
 {
   "name": "PWA Generator",
   "short_name": "PWA Generator",
+  "lang": "en",
+  "description": "This tool helps you quickly generate code for your PWA",
   "icons": [
     {
       "src": "icons/icon-48x48.png",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <nav class="bg-cyan-900 text-white px-1 sm:px-28 py-4 px-2">
-    <h1 class="font-bold shadow">PWA generator</h1>
+  <nav class="bg-primary text-white px-1 sm:px-28 py-4 px-2">
+    <h1 class="font-bold">PWA generator</h1>
   </nav>
 
   <section class="px-2 sm:px-28">

src/index.css

@@ -4,6 +4,6 @@
 
 @layer components {
   .form_input {
-    @apply w-full focus:border-cyan-900 focus:ring-1 border-2 focus:outline-none rounded-md mb-3 last-of-type:mb-5;
+    @apply w-full focus:border-primary focus:ring-1 border-2 focus:outline-none rounded-md mb-3 last-of-type:mb-5;
   }
 }

src/service-worker.js

@@ -1,14 +1,28 @@
-// const CACHE_NAME = `pwa-cache-${process.env.BUILD_HASH}`
+// eslint-disable-next-line no-undef
+const CACHE_NAME = `cache-${process.env.BUILD_HASH}`
 // Install event - Cache static assets
-self.addEventListener('install', () => {
-  self.skipWaiting()
-  console.log('The install event will be here')
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        cache.addAll([
+          '/',
+        ])
+      }),
+  )
 })
 
 // Activate event - Clean up old caches
 self.addEventListener('activate', (event) => {
+  const cacheAllowList = [CACHE_NAME]
   event.waitUntil(
-    self.clients.claim(),
+    caches.keys().then((allCaches) => {
+      allCaches.forEach(async (cache) => {
+        if (!cacheAllowList.includes(cache)) {
+          await caches.delete(cache)
+        }
+      })
+    }),
   )
 })
 

tailwind.config.js

@@ -6,7 +6,11 @@ module.exports = {
     './src/**/*.{vue,js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#ffe324',
+      },
+    },
   },
   plugins: [
     require('@tailwindcss/forms'),