try pwa

Author: glitchboyl

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+dev-dist
 *.local
 
 # Editor directories and files

src/index.jsx

@@ -10,7 +10,7 @@ const NotFound = lazy(() => import("./NotFound"));
 
 render(
   () => (
-    <div className="max-w-700px m-auto mt-8rem mb-8rem pl-1rem pr-1rem">
+    <div className="max-w-42rem m-auto mt-6.75rem mb-8rem pl-1.25rem pr-1.25rem">
       <Router source={hashIntegration()}>
         <Routes>
           <Route path="/" component={App} />

vite.config.js

@@ -1,12 +1,65 @@
 import { defineConfig, splitVendorChunkPlugin } from "vite";
 import solid from "vite-plugin-solid";
 import UnoCSS from "unocss/vite";
+import { VitePWA } from "vite-plugin-pwa";
 import getPostsPlugin from "./get-posts-plugin";
 
+import meta from "./src/meta.data";
+
 const cdn = (path) => `https://cdn.jsdelivr.net/npm/${path}`;
 
 export default defineConfig({
-  plugins: [solid(), UnoCSS(), getPostsPlugin(), splitVendorChunkPlugin()],
+  plugins: [
+    solid(),
+    UnoCSS(),
+    VitePWA({
+      manifest: {
+        name: meta.title,
+        short_name: meta.title,
+        description: meta.description,
+        theme_color: "#ffffff",
+        // icons: [
+        //   {
+        //     src: "icon-192x192.png",
+        //     sizes: "192x192",
+        //     type: "image/png",
+        //   },
+        //   {
+        //     src: "icon-512x512.png",
+        //     sizes: "512x512",
+        //     type: "image/png",
+        //   },
+        // ],
+      },
+      registerType: "autoUpdate",
+      workbox: {
+        globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/\//i,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "jsdelivr-cdn",
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
+      devOptions: {
+        enabled: true,
+        type: "module",
+        navigateFallback: "index.html",
+      },
+    }),
+    getPostsPlugin(),
+    splitVendorChunkPlugin(),
+  ],
   esbuild: {
     pure: ["console.log"],
   },