feat: ✨ add PWA support

Author: jimmy-guzman

.github/actions/install/action.yml

@@ -7,7 +7,7 @@ runs:
     - name: 🏗 Setup bun
       uses: oven-sh/setup-bun@v1
       with:
-        bun-version: 1.1.14
+        bun-version: 1.1.16
 
     - name: 🏗 Setup bun cache
       uses: actions/cache@v4

README.md

@@ -6,6 +6,7 @@
 
 - 🍞 [bun][bun] for a fast runtime and package manager.
 - ⚡️ [vite][vite] for instant server start and lighting fast HMR.
+- ✨ [Vite PWA](https://vite-pwa-org.netlify.app) for PWAs with very little configuration.
 - 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience.
 - 🏝️ [TanStack Router][TanStack Router] for a fully type-safe React router.
 - 🏝️ [TanStack Query][TanStack Query] for asynchronous state management.

bun.lockb

@@ -24,15 +24,15 @@
   "prettier": "@jimmy.codes/prettier-config",
   "dependencies": {
     "@tanstack/react-query": "5.45.1",
-    "@tanstack/react-router": "1.39.4",
+    "@tanstack/react-router": "1.40.0",
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tailwind-merge": "2.3.0"
   },
   "devDependencies": {
     "@iconify-json/logos": "1.1.43",
-    "@iconify-json/lucide": "1.1.193",
+    "@iconify-json/lucide": "1.1.194",
     "@iconify/tailwind": "1.1.1",
     "@jimmy.codes/eslint-config": "1.9.0",
     "@jimmy.codes/prettier-config": "1.1.0",
@@ -48,34 +48,36 @@
     "@storybook/test": "8.1.10",
     "@tailwindcss/typography": "0.5.13",
     "@tanstack/react-query-devtools": "5.45.1",
-    "@tanstack/router-devtools": "1.39.4",
-    "@tanstack/router-vite-plugin": "1.39.5",
+    "@tanstack/router-devtools": "1.40.0",
+    "@tanstack/router-vite-plugin": "1.39.13",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@total-typescript/ts-reset": "0.5.1",
-    "@types/bun": "1.1.4",
+    "@types/bun": "1.1.5",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@vite-pwa/assets-generator": "0.2.4",
     "@vitejs/plugin-react-swc": "3.7.0",
     "@vitest/coverage-v8": "1.6.0",
     "@vitest/ui": "1.6.0",
     "autoprefixer": "10.4.19",
-    "daisyui": "4.12.2",
+    "daisyui": "4.12.6",
     "eslint": "8.57.0",
     "eslint-plugin-storybook": "0.8.0",
     "gitzy": "5.4.0",
-    "happy-dom": "14.12.0",
+    "happy-dom": "14.12.3",
     "is-ci": "3.0.1",
-    "lefthook": "1.6.16",
+    "lefthook": "1.6.18",
     "msw": "2.3.1",
     "postcss": "8.4.38",
     "prettier": "3.3.2",
     "storybook": "8.1.10",
     "tailwindcss": "3.4.4",
     "typescript": "5.4.5",
     "vite": "5.3.1",
+    "vite-plugin-pwa": "0.20.0",
     "vite-tsconfig-paths": "4.3.2",
     "vitest": "1.6.0"
   }

package.json

@@ -0,0 +1,12 @@
+import {
+  defineConfig,
+  minimal2023Preset as preset,
+} from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: "2023",
+  },
+  preset,
+  images: ["public/logo.svg"],
+});

public/favicon.ico

@@ -1,3 +1,5 @@
+// eslint-disable-next-line import-x/no-unresolved, import-x/no-absolute-path
+import logo from "/logo.svg";
 import { ExtLink } from "@/components/ext-link";
 
 export const Home = () => {
@@ -17,7 +19,8 @@ export const Home = () => {
               React Starter
             </h1>
             <p className="prose dsy-prose py-6">
-              🍱 Another <ExtLink to="React">React</ExtLink> Starter using{" "}
+              <img src={logo} alt="logo" className="not-prose inline max-h-6" />{" "}
+              Another <ExtLink to="React">React</ExtLink> Starter using{" "}
               <ExtLink to="Bun">Bun</ExtLink>, <ExtLink to="Vite">Vite</ExtLink>
               , <ExtLink to="TypeScript">TypeScript</ExtLink>,{" "}
               <ExtLink to="tailwindcss">tailwindcss</ExtLink> and{" "}

public/logo.svg

@@ -1,6 +1,7 @@
 import { TanStackRouterVite as tanStackRouterVite } from "@tanstack/router-vite-plugin";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig, loadEnv } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { configDefaults } from "vitest/config";
 
@@ -19,6 +20,59 @@ export default defineConfig(({ mode }) => {
         },
       }),
       tsconfigPaths(),
+      VitePWA({
+        strategies: "generateSW",
+        registerType: "prompt",
+        injectRegister: false,
+        pwaAssets: {
+          disabled: false,
+          config: true,
+          htmlPreset: "2023",
+          overrideManifestIcons: true,
+        },
+        manifest: {
+          name: "React Starter",
+          short_name: "React Starter",
+          theme_color: "#ffffff",
+          icons: [
+            {
+              src: "pwa-64x64.png",
+              sizes: "64x64",
+              type: "image/png",
+            },
+            {
+              src: "pwa-192x192.png",
+              sizes: "192x192",
+              type: "image/png",
+            },
+            {
+              src: "pwa-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+            },
+            {
+              src: "maskable-icon-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+              purpose: "maskable",
+            },
+          ],
+        },
+        workbox: {
+          globPatterns: ["**/*.{js,css,html,svg,png,svg,ico}"],
+          cleanupOutdatedCaches: true,
+          clientsClaim: true,
+        },
+        injectManifest: {
+          globPatterns: ["**/*.{js,css,html,svg,png,svg,ico}"],
+        },
+        devOptions: {
+          enabled: false,
+          navigateFallback: "index.html",
+          suppressWarnings: true,
+          type: "module",
+        },
+      }),
     ],
     server: {
       port: Number(PORT),