Hit that cache!

Workbox + Vite

Progressive Web Application

// vite.config.ts

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({

  plugins: [

    react(),

    VitePWA({

      strategies: "injectManifest",

      srcDir: "src",

      filename: "serviceWorker.ts",

      registerType: "autoUpdate",

      devOptions: {

        enabled: true,

      },

    }),

  ],

  build: {

    outDir: "../dist",

  },

});  

It Just Works™

// serviceWorker.ts

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Precache your build

// serviceWorker.ts

import { googleFontsCache } from "workbox-recipes";

googleFontsCache();

Precache Google Fonts