PWA + SPA not workting together in `npm run dev`

[mlem]

Version

v3.0.0-beta.16

Reproduction link

http://i-dont-have-an-url-yet.com

Steps to reproduce

Generate a new nuxtJS app: npx create-nuxt-app
Add PWA support: npm i @nuxtjs/pwa and ['@nuxtjs/pwa'], to the config file as outline in https://pwa.nuxtjs.org/setup.html
The config nuxt.config.js looks like this in the end:

module.exports = {
  mode: 'spa',
  modules: [
    '@nuxtjs/pwa',
  ],
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  icon: {
    // Icon options
  },
  manifest: {
    lang: 'de',
    name: "adsf",
    short_name: "adsf",
  },
  workbox: {
    // Workbox options
  }

Add a /static/icon.png with some logo
Start app: npm run dev
Visit web hosting endpoint and open Chrome developer tools
Navigate to the "Application" tab to see favicons missing

What is expected ?

I would expect to see my logo as favicon. I would also expect running an audit on the "Audits" tab to return a identification of the app as a PWA.

What is actually happening?

Chrome doesn't display the favicons, because they are not loaded with the site.

Additional comments?

When I generate the sources and run it locally, it works correctly.

npm run generate 
cd dist && python -m http.server 8080

It seems, it's just an npm run dev issue.

_{This bug report is available on Nuxt community (#c160)}

[connecteev]

+1

I've been struggling with this myself..except I'm seeing an even more serious issue with npm run dev for my app in universal mode. NONE of the pages load from the server anymore, it just spins forever. See nuxt/nuxt#6202 and it looks like it's related to this one. Can someone from the Nuxt core time please prioritize this as a hotfix? Seems to me that this would be categorized as a serious blocker. @pi0

[sts-ryan-holton]

I get the same problem @connecteev

[sts-ryan-holton]

A temporary fix I found is to downgrade to version 2.6.0 of the PWA module, I guess version 3.0.0 is still in Beta so is justified having bugs and inconsistencies, but still, version 3 likely offers some great new features, so still would be ideal to look at fixing this ASAP 🔧

[lagcamgc]

Hello same issue here, any update?Solved using 2.6.0

[Pijuli]

Same here

[ShaggyTech]

Tested with:
Nuxt Version 2.10.0
@nuxt/pwa Version 3.0.0-beta.19

I've managed to get the workbox to function correctly in run dev by adding the following to my nuxt.config.js file:

  pwa: {
    manifest: {
      lang: 'en',
      name: "PWATestApp",
      short_name: "PWA/Nuxt - Test App",
      display: 'standalone',
      theme_color: '#F11010'
    },
    workbox: {
      dev: true // or use a global variable to track the current NODE_ENV, etc to determine dev mode
    }
  }

Pay attention to the warnings about clearing your cache and removing old service workers. If using Google Chrome, in the Application tab of the Chrome Dev Tools, in the Service Wokers section, you should see a checkbox for update on reload option, make sure that is checked. Also make sure you go to the Clear Cache section and clear the browser cache. This should theoretically clear the service worker at the same time, but sometimes you still have to manually stop the sw.js, under the Service Workers section.

I haven't been able to make the icons generate or work with run dev, but at least this should get the workbox portion operating correctly for those who want to test that portion of this module.

NOTE that I also upgraded to the latest Nuxt version by running npm install nuxt@latest. The current version of create-nuxt-app uses Nuxt version 2.0.0 . I tested the above solution using Nuxt version 2.10.1

[ShaggyTech]

I've managed to get icons and workbox modules working correctly in development mode.

I've created a starter template based off of create-nuxt-app, also set up to deploy to Google App Engine.

https://github.com/ShaggyTech/create-nuxt-app-pwa-spa

---

The key changes to making this work in SPA + development mode are the following:

  // < nuxt.config.js >

  // Node enviroment check so 'dev' options are turned to false during production build
  const isDev = process.env.NODE_ENV !== 'production'

  export default {
    // Will build as an SPA but allow @nuxtjs/pwa to function correctly in dev mode
    mode: 'universal',
    render: {
      ssr: false
    },

    ....

    /*
    ** @nuxtjs/pwa module options
    */
    pwa: {
      manifest: {
        lang: 'en',
        name: "PWATestApp",
        short_name: "PWA/Nuxt - Test App",
        display: 'standalone',
        theme_color: '#F11010',
      },
      workbox: {
        dev: isDev // Put workbox module into development mode based on current NODE_ENV variable
      }
    }
  }

I haven't thoroughly tested this so let me know if you find any further bugs/issues with the template. Hopefully this works for everyone!

[XanderLuciano]

This is by design as to prevent some issues that will occur by default when attempting to use offline caching with dev + HMR. If you read the documentation here: https://pwa.nuxtjs.org/modules/workbox.html#dev

Dev
(Boolean) Enable workbox in dev mode of nuxt. (Disabled by default - Not recommended)
IMPORTANT NOTE: Remember to clean application data and unregister service workers in your browser or you will experience infinity loop!
It is recommended to test workbox using nuxt build / nuxt start.

[Hxmic]

how to set cacheNames?
I use cacheNames, but error "Uncaught TypeError: Cannot use 'in' operator to search for 'precache' in yike".

how to reolve it ?

[MrToxy]

Having the same issue, however this solution seems to be working well:

// nuxt.config.js

pwa: {
      manifest: {
        lang: 'en',
        name: "PWATestApp",
        short_name: "PWA/Nuxt - Test App",
        display: 'standalone',
        theme_color: '#F11010',
      },
      workbox: {
        dev: process.env.NODE_ENV !== 'production'
      }
    }

After that, running npm run dev yields the following warning WARN Workbox running in dev mode. Please clear browser cache and prevent using this option for production! and if you go to inspect element -> application -> clear site data and then refresh the page, everything works properly.

I think that this process is required when you're in dev because in production this issue never arises and everything works smoothly.

@nuxtjs/pwa: ^3.0.0-0,
nuxt": ^2.12.2,

[jesusalive]

Set PWA -> workbox -> dev = true works for me