Skip to content

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

@aldomeza-dev

Description

@aldomeza-dev

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 (?)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions