Fixed PWA Offline mode

package.json

@@ -8,8 +8,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^2.9.2",
-    "vite-plugin-pwa": "^0.11.13"
+    "vite": "^2.9.2"
   },
   "author": "Siddharth Roy",
   "license": "MIT"

public/registerSW.js

@@ -1,15 +1,15 @@
 if ('serviceWorker' in navigator) {
-    window.addEventListener('load', function() {
-    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
-    // Registration was successful
-    console.log('Registered!');
+  window.addEventListener('load', function() {
+    navigator.serviceWorker.register('service-worker.js').then(function() {
+      // Registration was successful
+      console.log('Registered!');
     }, function(err) {
-    // registration failed :(
-    console.log('ServiceWorker registration failed: ', err);
+      // registration failed :(
+      console.log('ServiceWorker registration failed: ', err);
     }).catch(function(err) {
-    console.log(err);
+      console.log(err);
     });
-    });
-    } else {
-    console.log('service worker is not supported');
-    }
+  });
+} else {
+  console.log('service worker is not supported');
+}

public/service-worker.js

@@ -1,9 +1,42 @@
-self.addEventListener('install', function() {
-    console.log('Install!');
-  });
-  self.addEventListener("activate", event => {
-    console.log('Activate!');
-  });
-  self.addEventListener('fetch', function(event) {
-    console.log('Fetch!', event.request);
-  });
+const version = '1.0.0';
+
+const contentToCache = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/robot.txt',
+  '/registerSW.js',
+  '/apple-touch-icon.png',
+  '/service-worker.js',
+  '/android-chrome-192x192.png',
+  '/android-chrome-512x512.png',
+  '/assets/favicon.ico',
+  '/assets/index.js',
+  '/assets/index.css',
+];
+
+self.addEventListener('install', function(e) {
+  e.waitUntil((async () => {
+    const cache = await caches.open(version);
+    console.log('[Service Worker] Caching all: app shell and content');
+    await cache.addAll(contentToCache);
+  })());
+});
+
+self.addEventListener("activate", event => {
+  console.log('Activate!');
+});
+
+self.addEventListener('fetch', function(e) {
+  console.log('Fetch!', e.request);
+  e.respondWith((async () => {
+    const r = await caches.match(e.request);
+    console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
+    if (r) { return r; }
+    const response = await fetch(e.request);
+    const cache = await caches.open(version);
+    console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
+    cache.put(e.request, response.clone());
+    return response;
+  })());
+});

vite.config.js

@@ -1,6 +1,12 @@
-import { VitePWA } from 'vite-plugin-pwa'
 import { defineConfig } from 'vite'
 export default defineConfig({
-  plugins: [
-  ]    
-})
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`
+      }
+    }
+  }
+})