feat: pwa enhancements

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "build": "run-s format type:check build:vite build:postoptimize",
     "preview": "vite preview",
+    "https-preview": "vite build && serve dist",
     "dev": "vite",
     "build:vite": "vite build",
     "build:postoptimize": "node ./postoptimize.mjs",
@@ -49,6 +50,7 @@
     "globby": "^12.0.2",
     "got": "^11.8.2",
     "htmlnano": "^1.1.1",
+    "https-localhost": "^4.7.0",
     "jiti": "^1.12.9",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.4.7",

vite.config.ts

@@ -5,8 +5,56 @@ import manifest from './src/assets/manifest.json';
 
 const pwaOptions: Partial<VitePWAOptions> = {
   registerType: 'autoUpdate',
+  // DON'T add sitemap.xml yet:
+  // - we should check if we can include it or not
+  // - if you ping crawlers it should not be on sw precache
+  // review images to include from public/img subdirectories: bios and blog
+  includeAssets: [
+    'robots.txt',
+    'og.png',
+    'img/icons/*.svg',
+    'img/favicons/*.{png,ico}',
+    'examples/*.json',
+    'img/logo/**/logo.svg'
+  ],
   manifest,
-  workbox: {},
+  workbox: {
+    // be careful, DON'T add sw.js and workbox-xxxx.js
+    globPatterns: ['*.html', 'manifest.webmanifest', 'assets/*', '*.{svg,png,jpg}'],
+    // we need to increase the workbox size, all assets with size > 2MIB will
+    // be excluded and then will not work on offline when used
+    maximumFileSizeToCacheInBytes: 5000000,
+    runtimeCaching: [
+      {
+        urlPattern: /^https:\/\/unpkg\.com\/\//i,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'unpkg-com',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200]
+          }
+        }
+      },
+      {
+        urlPattern: /^https:\/\/cdn\.skypack\.dev\//i,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'cdn-skypack-dev',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200]
+          }
+        }
+      }
+    ]
+  },
 };
 
 export default defineConfig({