title: VueJS service-worker.js is ignored in my PWA
body: <p>I created a progressive web app with VueJS, the files are generated by vuecli. So I have the default registerServiceWorker.js I just comment the env condition:</p>
  
  <pre><code>/* eslint-disable no-console */
  
  import { register } from 'register-service-worker'
  
  // if (process.env.NODE_ENV === 'production') {
    register(`${process.env.BASE_URL}service-worker.js`, {
      ready () {
        console.log(
          'App is being served from cache by a service worker.\n' +
          'For more details, visit https://...'
        )
      },
      registered () {
        console.log('Service worker has been registered.')
      },
      cached () {
        console.log('Content has been cached for offline use.')
      },
      updatefound () {
        console.log('New content is downloading.')
      },
      updated () {
        console.log('New content is available; please refresh.')
      },
      offline () {
        console.log('No internet connection found. App is running in offline mode.')
      },
      error (error) {
        console.error('Error during service worker registration:', error)
      }
    })
  // }
  </code></pre>
  
  <p>And here is my simple service-worker.js</p>
  
  <pre><code>const PRECACHE = 'precache-v1';
  const RUNTIME = 'runtime';
  
  // A list of local resources we always want to be cached.
  const PRECACHE_URLS = [
  
  ];
  
  // The install handler takes care of precaching the resources we always need.
  self.addEventListener('install', event =&gt; {
    event.waitUntil(
      caches.open(PRECACHE)
        .then(cache =&gt; cache.addAll(PRECACHE_URLS))
        .then(self.skipWaiting())
    );
  });
  
  // The activate handler takes care of cleaning up old caches.
  self.addEventListener('activate', event =&gt; {
    const currentCaches = [PRECACHE, RUNTIME];
    event.waitUntil(
      caches.keys().then(cacheNames =&gt; {
        return cacheNames.filter(cacheName =&gt; !currentCaches.includes(cacheName));
      }).then(cachesToDelete =&gt; {
        return Promise.all(cachesToDelete.map(cacheToDelete =&gt; {
          return caches.delete(cacheToDelete);
        }));
      }).then(() =&gt; self.clients.claim())
    );
  });
  
  // The fetch handler serves responses for same-origin resources from a cache.
  // If no response is found, it populates the runtime cache with the response
  // from the network before returning it to the page.
  self.addEventListener('fetch', event =&gt; {
    // Skip cross-origin requests, like those for Google Analytics.
    if (event.request.url.startsWith(self.location.origin)) {
      event.respondWith(
        caches.match(event.request).then(cachedResponse =&gt; {
          if (cachedResponse) {
            return cachedResponse;
          }
  
          return caches.open(RUNTIME).then(cache =&gt; {
            return fetch(event.request).then(response =&gt; {
              // Put a copy of the response in the runtime cache.
              return cache.put(event.request, response.clone()).then(() =&gt; {
                return response;
              });
            });
          });
        })
      );
    }
  });
  </code></pre>
  
  <p>And when I start my application another service-worker.js override mine if I look the chrome console. I don't understand what is this service worker I don't have if inside my project :</p>
  
  <pre><code>/* global self */
  
  // This service worker file is effectively a 'no-op' that will reset any
  // previous service worker registered for the same host:port combination.
  
  // It is read and returned by a dev server middleware that is only loaded
  // during development.
  
  // In the production build, this file is replaced with an actual service worker
  // file that will precache your site's local assets.
  
  self.addEventListener('install', () =&gt; self.skipWaiting())
  
  self.addEventListener('activate', () =&gt; {
    self.clients.matchAll({ type: 'window' }).then(windowClients =&gt; {
      for (const windowClient of windowClients) {
        // Force open pages to refresh, so that they have a chance to load the
        // fresh navigation response from the local dev server.
        windowClient.navigate(windowClient.url)
      }
    })
  })
  </code></pre>
  
  <p>How can I use my service worker ?</p>