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]`
+ }
+ }
+ }
+})