我正在尝试缓存一些网址,以便让我的应用程序离线工作。
我正在使用 vite
5.0.5
vite-plugin-pwa 0.17.3
这是我的 vite.config.js
import react from '@vitejs/plugin-react';
import postcssNested from 'postcss-nested';
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
build: {
sourcemap: true, //@todo false in prod
},
plugins: [
react(),
svgrPlugin(),
VitePWA({
strategies: 'generateSW',
registerType: 'autoUpdate',
mode: 'development',
workbox: {
globPatterns: ['**/*.{js,jsx,css,html,png,svg,woff2,json}'],
runtimeCaching: [
{
urlPattern: /\/api\//,
handler: 'StaleWhileRevalidate',
method: 'GET',
options: {
cacheName: 'api-cache',
cacheableResponse: {
statuses: [0, 200],
},
},
},
],
},
devOptions: {
enabled: true,
},
manifest: {
name: 'AppName',
short_name: 'AppName',
description: 'App description',
theme_color: '#ffffff',
icons: [
{
src: '/manifestIcons/maskable_icon_x1024.png',
sizes: '1024x1024',
type: 'image/png',
purpose: 'any maskable',
},
],
},
}),
],
css: {
postcss: {
plugins: [postcssNested],
},
},
server: {
port: 3000,
open: true,
host: true,
},
});
为什么我的“api-cache”不显示?
我有一个状态 200 请求,包括
/api/
:
我可以在 sw.js 中看到这一点: