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



  • I have a PWA app that until recently was always updating flawlessly. But recently has been sometimes giving a blank screen when updating in Chrome and the console comes back with a Uncaught SyntaxError: Unexpected token '<' in (previous) js file app.52759878.js:1 error, even though there is no dangling token I can find (in either this previous file or the new one that is replacing it. Firefox and Safari update fine as always. I am not sure how I can troubleshoot this since a search for this character turns up only less than evaluations throughout the file. I am not sure if this was caused by a recent Chrome update, by a quasar update, or by something I have somehow introduced into my code. This issue does not happen with every update, only sometimes, and only for chrome users. Simply refreshing the screen allows the site to then load properly, but obviously this isn’t a great experience for users. Does anyone have any idea where to look/what could be causing this?



  • @ssuess I’m not sure it’s much help, but when I see Uncaught SyntaxError: Unexpected token '<' it is usually due to that request being 404 and returning html. It’s then the <doctype> or <html> tag that is trying to be parsed as JSON.

    Perhaps it’s a caching issue then? I always set webpack generated files to max cache, since they include the hash in the filename and shouldn’t ever conflict.



  • Thanks for the reply, but I am not sure what you mean here. I am using quasar’s defaults whatever they are and until recently chrome never had any problems. Then suddenly, blank screen.



  • searching the web many people seem to have the same problem, but I have yet to find a workable solution. Some are saying to add ignoreURLParametersMatching: [/./] to the options, but it does not seem this is possible with GenerateSW, I would have to create my own Injected sw. Is no one else having this problem?



  • Well, I take it back GenerateSW DOES allow adding ignoreURLParametersMatching, but unfortunately it does not solve the problem (not surprising really since I have no parameters, but it was worth a shot)



  • one odd thing that I have noticed is that when I click on the file name(s) with the token error (app.52759878.js) it looks to google like an html file that begins with an html declaration (<!DOCTYPE html>), even though when I open that same file in the filesystem it is pure js (and begins with (function(e){)…is this correct behaviour? Is there a reason google thinks this is html? Is there some reason this only happens in chrome?



  • @ssuess

    I don’t know how to solve this particular problem. But in my PWA’s if i deploy an update I have my client’s serviceworker do a force update so it reloads automatically.



  • I do the same, but chrome still suddenly has this error. Here is my register-service-worker.js file (the same one I have been using without any issues in any browser for many months now):

    import { register } from 'register-service-worker'
    import { Dialog } from 'quasar'
    import axios from 'axios'
    import localforage from 'localforage'
    
    register(process.env.SERVICE_WORKER_FILE, {
      ready () {
        console.log('App is being served from cache by a service worker.')
      },
      registered (registration) { // registration -> a ServiceWorkerRegistration instance
        console.log('Service worker has been registered.')
        // console.log('scope: ' + registration.scope)
      },
      cached (registration) { // registration -> a ServiceWorkerRegistration instance
        console.log('Content has been cached for offline use.')
      },
      updatefound (registration) { // registration -> a ServiceWorkerRegistration instance
        console.log('New content is downloading.')
      },
      updated (registration) { // registration -> a ServiceWorkerRegistration instance
        console.log('New content is available; please refresh.')
        if (!['localhost', 'localtwo'].some(v => registration.scope.includes(v))) {
          axios.get(registration.scope + 'version.txt?t=' + Date.now())
            .then(subresponse => {
              // console.log('SUBRESP from SW:', subresponse.data.version)
              Dialog.create({
                title: 'UPDATE AVAILABLE',
                message: 'There is a new version (' + subresponse.data.version + ') available. Your version will be updated. ' + subresponse.data.message,
                ok: 'Update'
              }).onDismiss(() => {
                if (subresponse.data.clearStorage === 'true') { localforage.clear() }
                location.reload(true)
              })
            })
        }
      },
      offline () {
        console.log('No internet connection found. App is running in offline mode.')
      },
      error (err) {
        console.error('Error during service worker registration:', err)
      }
    })
    

    I have tried many mods to this file this morning, all to no avail:

    • tried setTimeout on my reload
    • tried redirecting instead of reloading
    • tried NOT reloading or redirecting (browsers then had update problems)
    • tried using localforage promise return and then reloading after that
    • tried onOK instead of onDismiss

    Nothing works to rid me of this chrome error. Every other browser is fine.



  • @ssuess

    So the update Dialog does not even show when the error occurs? Or does it happen after the onDismiss?

    tried NOT reloading or redirecting (browsers then had update problems)

    Then the error did not occur?



  • The dialogue shows normally in all browsers including chrome. But onDismiss, chrome shows blank page and error in console, while all other browsers successfully reload



  • @ssuess

    tried NOT reloading or redirecting (browsers then had update problems)

    Then the error does not occur?



  • @dobbel the error does not occur, no, but content is not always correctly updated



  • @ssuess

    and what if you just reload on updated?

    updated (/*registration*/) { 
                location.reload(true)
      }
    

    btw The PWA will eventually update on it’s own after X time… ( yes a very lame solution)



  • I will try that as a test to see if it still produces the error. But it is not a viable solution in my app as I need to warn people when we are updating and being able to clear localstorage.



  • @ssuess

    I just tested my PWA if it still updates with an updated chrome(Version 86.0.4240.75 (Official Build) (64-bit))

    It still works for me…

    I am on windows 10 btw. No idea if it makes a difference but I have seen some crazy sh*t in the past with same browser version on different OS giving different results…



  • @ssuess

    My quasar info for my working PWA self updating app

    Operating System - Windows_NT(10.0.19042) - win32/x64
    NodeJs - 12.18.3
    
    Global packages
      NPM - 6.4.1
      yarn - 1.22.5
      @quasar/cli - undefined
      cordova - 8.1.2 (cordova-lib@8.1.1)
    
    Important local packages
      quasar - 1.9.9 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 1.6.0 -- Quasar Framework local CLI
      @quasar/extras - 1.6.0 -- Quasar Framework fonts, icons and animations
      vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.1.6 -- Official router for Vue.js 2
      vuex - 3.1.2 -- state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @capacitor/core - Not installed
      @capacitor/cli - Not installed
      @capacitor/android - Not installed
      @capacitor/ios - Not installed
      @babel/core - 7.8.4 -- Babel compiler core.
      webpack - 4.41.6 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx,
     es7, css, less, ... and your custom stuff.
      webpack-dev-server - 3.10.3 -- Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
      register-service-worker - 1.6.2 -- Script for registering service worker, with hooks
    
    Quasar App Extensions
      quasar-app-extension-ide-helper - 1.0.0-alpha.3 -- Quasar framework extension which enables IDE features like autocomplete by generating helper files for IDE to index.
      @quasar/quasar-app-extension-icon-genie - 1.1.3 -- A Quasar CLI Extension for Making All Your Icons
    

    Some highlights:

    1. Still using quasar 1.X instead of 2.X
    2. workbox-webpack-plugin 4.3.1 instead of 5.X


  • I am on a mac btw, it might be worth testing on Windows, I will give that a look. Something obviously must have changed to cause this in one of the following places in the last month or so (when this began happening):

    • quasar updates
    • various npm package updates
    • something in my code
    • chrome itself

    this is my quasar info btw:

    Operating System - Darwin(19.6.0) - darwin/x64
    NodeJs - 12.18.1
    
    Global packages
      NPM - 6.14.8
      yarn - Not installed
      @quasar/cli - 1.1.2
      @quasar/icongenie - 2.3.3
      cordova - Not installed
    
    Important local packages
      quasar - 1.14.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 2.1.1 -- Quasar Framework local CLI
      @quasar/extras - 1.9.8 -- Quasar Framework fonts, icons and animations
      eslint-plugin-quasar - Not installed
      vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.2.0 -- Official router for Vue.js 2
      vuex - 3.5.1 -- state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @capacitor/core - Not installed
      @capacitor/cli - Not installed
      @capacitor/android - Not installed
      @capacitor/ios - Not installed
      @babel/core - 7.10.2 -- Babel compiler core.
      webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
      webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - 5.1.4 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
      register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
      typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
    
    Quasar App Extensions
      *None installed*
    


  • 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!


Log in to reply