3分钟搞定vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用

npm i vite-plugin-pwa -D 
# yarn 
yarn add vite-plugin-pwa -D
# pnpm 
pnpm add vite-plugin-pwa -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { VitePWA } from 'vite-plugin-pwa'
// 生产还是开发
const mode = 'production'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        VitePWA({
            mode: 'development',
            base: '/',
            manifest: {
                name: '应用名称',
                short_name: '应用名称',
                description: '应用描述',
                icons: [
                    //添加图标， 注意路径和图像像素正确
                    {
                        src: './public/app.png',
                        sizes: '1024x1024',
                        type: 'image/png',
                    },
                ],
            },
            registerType: 'autoUpdate',
            workbox: {
                globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'], //缓存相关静态资源
                runtimeCaching: [
                    // 配置自定义运行时缓存
                    mode !== 'production'
                        ? {
                              urlPattern: ({ url }) =>
                                  url.origin === 'https://app-api-0.com',
                              handler: 'NetworkFirst',
                              options: {
                                  cacheName: 'wisbayar-api',
                                  cacheableResponse: {
                                      statuses: [200],
                                  },
                              },
                          }
                        : {
                              urlPattern: ({ url }) =>
                                  url.origin === 'https://app-api.id',
                              handler: 'NetworkFirst',
                              options: {
                                  cacheName: 'wisbayar-api',
                                  cacheableResponse: {
                                      statuses: [200],
                                  },
                              },
                          },
                    {
                        urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
                        handler: 'CacheFirst',
                        options: {
                            cacheName: 'wisbayar-images',
                            expiration: {
                                // 最多30个图
                                maxEntries: 30,
                            },
                        },
                    },
                    {
                        urlPattern: /.*\.js.*/,
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'wisbayar-js',
                            expiration: {
                                maxEntries: 30, // 最多缓存30个，超过的按照LRU原则删除
                                maxAgeSeconds: 30 * 24 * 60 * 60,
                            },
                            cacheableResponse: {
                                statuses: [200],
                            },
                        },
                    },
                    {
                        urlPattern: /.*\.css.*/,
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'wisbayar-css',
                            expiration: {
                                maxEntries: 20,
                                maxAgeSeconds: 30 * 24 * 60 * 60,
                            },
                            cacheableResponse: {
                                statuses: [200],
                            },
                        },
                    },
                    {
                        urlPattern: /.*\.html.*/,
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'wisbayar-html',
                            expiration: {
                                maxEntries: 20,
                                maxAgeSeconds: 30 * 24 * 60 * 60,
                            },
                            cacheableResponse: {
                                statuses: [200],
                            },
                        },
                    },
                ],
            },
            devOptions: {
                enabled: true,
            },
        }),
    ],
    server: {
        host: '0.0.0.0',
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
})

    const isInStandaloneMode = () =>
        (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');
    if (isInStandaloneMode()) {
        document.body.innerHTML = "是在pwa中打开的"
    }else {
        document.body.innerHTML = "请在pwa中打开"
    }