Hit that cache!

Workbox + Vite

Vite

Development environment for React and Vue

Workbox

Service worker library

Progressive Web Application

Determine caching strategies

Why?

Faster first paint

Intercept requests before they hit that expensive API

Enable offline experience

Better handling of spotty connectivity

// 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();