CODEWITHSUNDEEP
vue.jsprogressive-web-appsvite
nad
nad

Reputation: 49

How to enable pwa with vite-plugin-pwa

what do I need to prescribe in order to enable pwa?

when i do "Analyze page load", I get information that pwa is disabled.

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      injectRegister: 'auto',
    }),
  ],
})

Upvotes: 4

Views: 4189

Answers (2)

Dvalin99
Dvalin99

Reputation: 67

Typically the configuration I use in my projects is always more or less this:

VitePWA({
  includeAssets: ["favicon.ico", "apple-touch-icon.png", "logo.svg"],
  manifest: {
    name: "Name App",
    short_name: "Short Name",
    description: "Description",
    theme_color: "#ffffff",
    icons: [
      {
        src: "pwa-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "pwa-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  },
})

Upvotes: 0

John Zwarthoed
John Zwarthoed

Reputation: 1277

Are you running in dev by any chance?

If you want to check it in dev, add the devOptions option to the plugin configuration

import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true
      }
    })
  ]
})

Upvotes: 2

Related Questions