vite-pwa / docs

Documentation: PWA integrations for Vite and the ecosystem
https://vite-pwa-org.netlify.app/
MIT License
196 stars 42 forks source link

Server keeps reloading in dev-mode on GET requests #142

Open aldomeza-dev opened 4 months ago

aldomeza-dev commented 4 months ago

Problems:

The server keeps reloading when a GET request gets send to it, it seams something is triggering a change in the dev-dist\registerSW.js image

Expected behavior:

The server only reloads when I change files...

Code:

vite.config.js

// vite.config.js

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

dotenv.config({ path: 'src/config/.env' }) // Load environment variables from .env file

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    require('tailwindcss'),
    VitePWA({
      // registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
      },
    }),
  ],
})

dev-dist/registerSW.js

if ('serviceWorker' in navigator)
  navigator.serviceWorker.register('/dev-sw.js?dev-sw', {
    scope: '/',
    type: 'classic',
  })

dev-dist/sw.js

/**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// If the loader is already loaded, just stop.
if (!self.define) {
  let registry = {}

  // Used for `eval` and `importScripts` where we can't get script URL by other means.
  // In both cases, it's safe to use a global var because those functions are synchronous.
  let nextDefineUri

  const singleRequire = (uri, parentUri) => {
    uri = new URL(uri + '.js', parentUri).href
    return (
      registry[uri] ||
      new Promise((resolve) => {
        if ('document' in self) {
          const script = document.createElement('script')
          script.src = uri
          script.onload = resolve
          document.head.appendChild(script)
        } else {
          nextDefineUri = uri
          importScripts(uri)
          resolve()
        }
      }).then(() => {
        let promise = registry[uri]
        if (!promise) {
          throw new Error(`Module ${uri} didn’t register its module`)
        }
        return promise
      })
    )
  }

  self.define = (depsNames, factory) => {
    const uri =
      nextDefineUri ||
      ('document' in self ? document.currentScript.src : '') ||
      location.href
    if (registry[uri]) {
      // Module is already loading or loaded.
      return
    }
    let exports = {}
    const require = (depUri) => singleRequire(depUri, uri)
    const specialDeps = {
      module: { uri },
      exports,
      require,
    }
    registry[uri] = Promise.all(
      depsNames.map((depName) => specialDeps[depName] || require(depName))
    ).then((deps) => {
      factory(...deps)
      return exports
    })
  }
}
define(['./workbox-9637eeee'], function (workbox) {
  'use strict'

  self.addEventListener('message', (event) => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
      self.skipWaiting()
    }
  })

  /**
   * The precacheAndRoute() method efficiently caches and responds to
   * requests for URLs in the manifest.
   * See https://goo.gl/S9QRab
   */
  workbox.precacheAndRoute(
    [
      {
        url: 'registerSW.js',
        revision: '3ca0b8505b4bec776b69afdba2768812',
      },
      {
        url: 'index.html',
        revision: '0.7kniv7baauo',
      },
    ],
    {}
  )
  workbox.cleanupOutdatedCaches()
  workbox.registerRoute(
    new workbox.NavigationRoute(workbox.createHandlerBoundToURL('index.html'), {
      allowlist: [/^\/$/],
    })
  )
})

dist/manifest.webmanifest

{
  "name": "SysmaWeb",
  "short_name": "SysmaWeb",
  "start_url": "/login",
  "display": "standalone",
  "background_color": "#ffffff",
  "lang": "en",
  "theme_color": "#3176ff",
  "scope": "/"
}

Comments:

I don't know if this is the expected behavior but I feel it's not, maybe I´m missing something (?)