[SOLVED] Chrome (but not FF nor Safari) randomly fails PWA update
-
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.jsfile, 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.
-
Did you solve this / any progress?
-
I have been playing around with a few different versions of axios and fetch, with various options. Also have tried moving this to the
updatefoundhook (over theupdated), which MAY have worked, but I am still testing. Will report back soon. -
I am cautiously optimistic that moving my fetch and update dialog and reload code to the
updatefoundhook has fixed it! But I still need more testing -
I really think moving it to
updatefoundfixes it!!! -
Sounds promising! The code/flow stays the same if using
updatefoundinstead ofupdated? -
yes everything else is the same. Since the service worker itself is updating the code regardless of what I am doing (updating local version string and clearing localstorage) I can do what I need earlier in the process and reload which works great! So happy to have found this solution it was really a vexing problem (that only showed up in Chrome for some reason)
-
Hope this ‘workaround’ won’t be trashed in the next Chrome update
-
UGH, I REALLY hate to have to revisit this, but wouldn’t you know it, this fix made all the OTHER browsers break! I ended up having to do this in the end, which really sucks:
updatefound (registration) { // registration -> a ServiceWorkerRegistration instance console.log('New content is downloading.') /* eslint-disable no-extra-boolean-cast */ if (!!window.chrome) { // all my checking and clearing localstorage stuff here for stupid chrome browsers (Chrome, Edge, etc) } }, updated (registration) { // registration -> a ServiceWorkerRegistration instance console.log('New content is available; please refresh.') if (!window.chrome) { // all my checking and clearing localstorage stuff here for non chrome browsers (FF, Safari) } } }, -
-
@dobbel no they were not very helpful at all, other than to say they didn’t know: https://github.com/GoogleChrome/workbox/issues/2652
-
Here’s someone that unregisters the service worker before reload:
-
@dobbel thanks I took a look, but for now my workaround seems to be working so I think I will leave it. Still, this is good info and I might try it later, thanks for the heads up!
-
I’ve suddenly started to get this after upgrading Quasar to latest - wondered if anyone had come up with a reliable solution since the last post ?
Operating System - Windows_NT(10.0.19041) - win32/x64 NodeJs - 12.16.1 Global packages NPM - 3.10.6 yarn - 1.22.4 @quasar/cli - 1.1.3 @quasar/icongenie - Not installed cordova - Not installed Important local packages quasar - 1.15.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 2.2.4 -- Quasar Framework local CLI @quasar/extras - 1.10.2 -- 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.6.0 -- state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @babel/core - 7.13.8 -- 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 l stuff. webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 6.1.2 -- 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 - 4.2.2 -- TypeScript is a language for application scale JavaScript development @capacitor/core - Not installed @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed Quasar App Extensions @quasar/quasar-app-extension-dotenv - 1.1.0 -- Load .env variables into your quasar project ``` -
I would ask this on the new forum where the Quasar team now gives support.
