Nuxt•3mo ago

Nuxt PWA Fails Installation on Chrome Android, Works Fine on Desktop Browser

I'm struggling with a PWA (@nuxtjs/pwa) installation issue specifically on Chrome for Android, and I'm hoping someone here has run into this before. My Nuxt app's PWA functionality works perfectly on desktop Chrome and Firefox (I get the install prompt), but I cannot get the prompt to appear on Chrome for Android. Manually pressing the "Add to Home Screen" button on chrome android just create a shortcut, no option for install this app. - I have tried using Ngrok for https, same result - In DevTools (Application > Manifest), the manifest is fully parsed with no error or warnings.

Here is my pwa config in nuxt.config.ts:

// nuxt.config.ts
pwa: {
  manifest: {
    id: "/",
    name: "My Project Name",
    short_name: "ProjectApp",
    description: "A description of my project",
    theme_color: "#648a5d",
    background_color: "#ffffff",
    lang: "id",
    orientation: "portrait",
    display: "standalone",
    start_url: "/",
    icons: [
      {
        src: "/android-chrome-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/android-chrome-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
    screenshots: [
      {
        src: "screenshots/mobile.png",
        sizes: "967x382",
        type: "image/png",
        form_factor: "narrow",
        label: "Home Page Screenshot",
      },
      {
        src: "screenshots/wide.png",
        sizes: "1449x1012",
        type: "image/png",
        form_factor: "wide",
        label: "Home Page Screenshot",
      },
    ]
  },
  workbox: {
    navigateFallback: "/",
  },
  devOptions: {
    enabled: true, // Enabled for testing, but issue persists in production build.
  },
},

// nuxt.config.ts
pwa: {
  manifest: {
    id: "/",
    name: "My Project Name",
    short_name: "ProjectApp",
    description: "A description of my project",
    theme_color: "#648a5d",
    background_color: "#ffffff",
    lang: "id",
    orientation: "portrait",
    display: "standalone",
    start_url: "/",
    icons: [
      {
        src: "/android-chrome-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/android-chrome-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
    screenshots: [
      {
        src: "screenshots/mobile.png",
        sizes: "967x382",
        type: "image/png",
        form_factor: "narrow",
        label: "Home Page Screenshot",
      },
      {
        src: "screenshots/wide.png",
        sizes: "1449x1012",
        type: "image/png",
        form_factor: "wide",
        label: "Home Page Screenshot",
      },
    ]
  },
  workbox: {
    navigateFallback: "/",
  },
  devOptions: {
    enabled: true, // Enabled for testing, but issue persists in production build.
  },
},

3 Replies

kapa.ai•3mo ago

Hi @Bleau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like your setup is close, but there are a couple of caveats from the shared sources: - Enabling @vite-pwa/nuxt in development can cause unexpected behavior (including navigation/hydration oddities). One report shows issues only in dev mode and recommends disabling PWA in development; it worked fine in production builds (see linked issue). Try testing a production build served over HTTPS and disable devOptions.enabled to verify installability on Android Chrome (Adding '@vite-pwa/nuxt'… and follow-up) ("Adding '@vite-pwa/nuxt'… Part 2").
- Ensure your icons are correctly referenced and placed in public/, with proper size syntax (e.g., 192x192, not 192*192). A similar case only worked after fixing icon sizes and serving them from public, plus setting registerType: 'autoUpdate' (PWA not enable with vite-plugin-pwa on Nuxt and continuation) ("PWA not enable… Part 3"). Minimal checklist based on the sources: - Build for production and serve over HTTPS; avoid devOptions.enabled when testing install on Android Chrome (Adding '@vite-pwa/nuxt'…).
- Move icons/screenshots to public/ and reference with leading slash; verify sizes use x (e.g., 192x192) (PWA not enable… Part 3).
- Optionally set pwa.registerType = 'autoUpdate' (PWA not enable… Part 3). If after a production HTTPS test it still won’t show the install prompt on Android, the provided knowledge sources do not contain more specific Android-only troubleshooting steps. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@573695129605373973> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

BleauOP•3mo ago

allright so the main issue is devOptions is enabled, after remove the options to build and run on ngrok the problem is solved 😅

Gaming

Programming

Nuxt PWA Fails Installation on Chrome Android, Works Fine on Desktop Browser

Did you find this page helpful?