yyx990803 / register-service-worker

A script to simplify service worker registration with hooks for common events.
MIT License
638 stars 58 forks source link

Using fetch causes reload error in chrome only (with devtools closed), not FF or Safari #48

Open ssuess opened 3 years ago

ssuess commented 3 years ago

I have discovered a bug in chrome or possibly workbox or with register service worker package. After painstakingly dissecting the actions in my register-service-worker.js file, I have found that the error with reload in chrome (only when console is closed!) is related to making an axios (or fetch, I tried both) call in the updated hook. If I leave out that call, it updates fine, even when console is closed. Here is an always working updated hook:

updated (registration) {
    console.log('New content is available; please refresh.')
    const r = confirm('There is a new version available. Your version will be updated, alright? ')
    if (r === true) {
      localforage.clear().then(function () {
        // Run this code once the database has been entirely deleted.
        console.log('Database is now empty. so there now.')
        location.reload(true)
      }).catch(function (err) {
        // This code runs if there were any errors
        console.log(err)
      })
    } else {
      console.log('You pressed Cancel!')
    }
  },

And here is one that WONT work (in chrome with devtools closed), but works everywhere else:

updated (registration) {
    console.log('New content is available; please refresh.')
    fetch('https://pwatest.mydomain.com/av.json?t=' + Date.now())
      .then(response => {
        response.json().then(function (data) {
          const r = confirm('There is a new version (' + data.version + ') available. Your version will be updated, alright? ' + data.message)
          if (r === true) {
            if (data.clearStorage === true) {
              localforage.clear().then(function () {
                // Run this code once the database has been entirely deleted.
                console.log('Database is now empty. so there now.')
                location.reload(true)
              }).catch(function (err) {
                // This code runs if there were any errors
                console.log(err)
              })
            }
          } else {
            console.log('You pressed Cancel!')
          }
        })
        console.log('response:', response)
      })
      .catch(error => {
        console.error(error)
      })
  }

And just so we are crystal clear: the fetch works fine, and the alert contains the data from the fetch. But whenever using fetch (or axios) in ANY way in the service worker file in the updated hook, it causes a reload failure (in chrome only with devtools window closed).

The reload failure is a white screen of death btw, and when the console is opened at that point, there is always a Uncaught SyntaxError: Unexpected token '<' error. Reloading after that recovers the site, but obviously this is terrible UI.