Chrome (but not FF nor Safari) randomly fails PWA update



  • So to try to eliminate variables, I created a new stripped down blank quasar app with just the minimal packages necessary to carry out my updates (localforage, axios) and it works fine, updates as expected, and does not cause chrome errors.

    Then I ran quasar info command and noticed two small differences from above:

    @quasar/extras - 1.9.9
    @babel/core - 7.12.0
    

    So I updated Quasar again (these must have been released in the last day) and now I can’t reproduce the update bug!. So either something in one of those packages was causing the error, or Chrome updated and fixed it, or some unseen other variable (although I have not changed update code since yesterday). Anyway, I will be watching closely to see if this returns or is influenced by something else entirely



  • @ssuess

    So I updated Quasar again (these must have been released in the last day) and now I can’t reproduce the update bug!. So either something in one of those packages was causing the error, or Chrome updated and fixed it, or some unseen other variable (although I have not changed update code since yesterday).

    Unfortunately this is a typical life of a developer, last years 😞



  • UGH. The problem is mysteriously back again!



  • This is a bit of a hunch, but it seems if I already have the site open in a window, it will update fine. But if I open a new window/tab and enter the address and there is an update, it will fail.



  • That is IT! I just tried in my stripped down app, open a new tab and entering my address. It showed the update popup and then BAM blank page, just like in my full app. So it is something in either quasar, chrome, localforage, or axios. And it only triggers in a new window. Ok, that is fewer things to troubleshoot, I will start with localforage and report back…



  • I really feel like I am losing my mind here. Upon further investigation, it seems like some kind of heisenburg uncertainty nonsense. If I have Chrome webpage AND dev tools window open at same time, it will ALWAYS UPDATE CORRECTLY. If I have the devtools window closed, upon reload I get the white screen of death. IS there something about having devtools window open that changes how the page operates? JUST BECAUSE IT IS OPEN??



  • I think i just found my own answer. I assumed that any settings in dev tools once set applied whether dev tools was open or not. However, a tooltip over “Disable Cache” says “Disable Cache (while DevTools is open)” so I would guess this is the culprit (of my irreproducibility anyway).

    UPDATE: it does not matter if that is checked or unchecked. Same odd thing: if devtools is open, everything updates wonderfully all the time. If not, white screen of death.



  • @ssuess

    In my successful pwa update test I did not have devtools open…

    Did you try It with workbox 4 instead of 5?

    Just an idea. Maybe if you send a message from the serviceworker.updated event to the dom(the quasar app) you could let the quasar app do a refresh/reload instead of the service worker. It could make a difference.



  • I am not sure how I would replace the version of workbox I am using, it is out of the box quasar with the whatever version quasar uses. And I have thought about sending a message to the app to complete my localforage clear (which is where it seems to be getting hung up), I will try that next and report back.



  • @ssuess

    The migrate to 2.x doc says you can install workbox v4.x also for quasar 2.x

    https://quasar.dev/quasar-cli/app-upgrade-guide#Upgrade-Guide

    if you are using PWA (or SSR+PWA) mode, you’ll also need to install workbox-webpack-plugin@^5.0.0 (or ^4.0.0 – v4 came with @quasar/app v1) – this package is no longer supplied by “@quasar/app”: yarn add --dev workbox-webpack-plugin@^5.0.0 (or npm install --save-dev workbox-webpack-plugin@^5.0.0)



  • I seriously think I have discovered a bug in chrome or possibly workbox (but that only happens in chrome) or possibly even 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 (again 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):

    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).



  • well, I reported this as a bug to both the workbox team and the register service worker team, hoping to hear something back.


Log in to reply