feat: add offline

index.html

@@ -15,7 +15,7 @@
     <meta property="og:url" content="https://qr-generator.muathye.com">
     <meta property="og:image" content="https://qr-generator.muathye.com/icon-512x512.png">
     <title>QR Code Generator - Free QR Code Generator Online</title>
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="tailwind.min.css" rel="stylesheet">
     <link rel="manifest" href="manifest.json">
     <script type="application/ld+json">
         {
@@ -75,6 +75,18 @@
     </div>
     <script src="qrcode.min.js"></script>
     <script src="script.js"></script>
+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/sw.js')
+                .then(registration => {
+                    console.log('Service Worker registered with scope:', registration.scope);
+                })
+                .catch(error => {
+                    console.log('Service Worker registration failed:', error);
+                });
+        }
+    </script>
+    
 </body>
 
 </html>

manifest.json

@@ -1,10 +1,11 @@
 {
     "name": "QR Code Generator",
-    "short_name": "QRGen",
-    "start_url": "/",
+    "short_name": "QR Code",
+    "description": "Generate QR codes instantly with our free and easy-to-use QR code generator.",
+    "start_url": "./index.html",
     "display": "standalone",
     "background_color": "#ffffff",
-    "theme_color": "#000000",
+    "theme_color": "#ffc517",
     "icons": [
         {
             "src": "icon-192x192.png",
@@ -17,4 +18,4 @@
             "type": "image/png"
         }
     ]
-}
+}

sw.js

@@ -1,23 +1,37 @@
 const CACHE_NAME = 'qr-code-pwa-v1';
 const assetsToCache = [
-    '/',
-    '/index.html',
-    '/style.css',
-    '/script.js',
-    'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css',
-    'https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js'
+    './',
+    './index.html',
+    './style.css',
+    './script.js',
+    './tailwind.min.css',
+    './qrcode.min.js'
 ];
 
+
 self.addEventListener('install', event => {
     event.waitUntil(
-        caches.open(CACHE_NAME)
-            .then(cache => cache.addAll(assetsToCache))
+        caches.open(cacheName).then(cache => {
+            cache.addAll(assets);
+        })
     );
 });
 
 self.addEventListener('fetch', event => {
     event.respondWith(
-        caches.match(event.request)
-            .then(response => response || fetch(event.request))
+        caches.match(event.request).then(response => {
+            return response || fetch(event.request);
+        })
     );
 });
+
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches.keys().then(keys => {
+            return Promise.all(
+                keys.filter(key => key !== cacheName)
+                    .map(key => caches.delete(key))
+            );
+        })
+    );
+});