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

ssuess

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?

beets

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

ssuess

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.

ssuess

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?

ssuess

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)

ssuess

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?

dobbel

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

ssuess

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.

dobbel

@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?

ssuess

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

dobbel

@ssuess

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

Then the error does not occur?

ssuess

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

dobbel

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

ssuess

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.

dobbel

@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…

dobbel

@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:

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

ssuess

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*

ssuess

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

qyloxe

@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

ssuess

UGH. The problem is mysteriously back again!

No More Posting New Topics!

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