DEV Community

Cover image for Handling Service Worker updates in your Vue PWA

Handling Service Worker updates in your Vue PWA

Drew Bragg on May 14, 2020

Table Of Contents Updating the Service Worker registration Making an update mixin Updating our UI Skipping Service Working waiting Upda...
Collapse
 
drbragg profile image
Drew Bragg • Edited

I just found out that this article is being included in the Vue.js Developer Newsletter which is pretty exciting!

If you found this article via the newsletter let me know.

Collapse
 
pimhooghiemstra profile image
Pim Hooghiemstra

I am not totally sure, but I think it would be fair to add a reference to this article on medium medium.com/@dougallrich/give-users... where the author explains this whole concept. I coded my version of a PWA with updated SW last year based on this article and I found that your code samples are more or less identical to what is described in this article.

Collapse
 
drbragg profile image
Drew Bragg

Wow, that is super similar in code examples. I read a bunch of different articles and docs while I was working on my solution. Somehow, I didn't see this one.

Thanks for this link and the idea. Maybe I can add a list of different articles that take a similar approach to this problem.

Collapse
 
frynt profile image
frynt • Edited

YOU saved my life.

To automatically show the update banner, add this in service worker :

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
fotiecodes profile image
fotiecodes • Edited

Hi man, thanks again for this amazing article. i just stumbled into an issue, i'm not sure how to explain this though. but when i deploy a version of my code to production it still uses the reference to the old fines generated by the build. for example. The newly generate build files in my index.html are /js/chunk-vendors.3c199704.js however my webapp tries to reference an old generate file which isn't existing.

Note that when i clear the catch everything starts working properly. I don't really know what is going on at this point. Please anyone knows how i can fix this?

Collapse
 
fotiecodes profile image
fotiecodes

Anyone has any idea on how to fix this issue? again it was working pretty well but started bugging in production lately!

Collapse
 
fotiecodes profile image
fotiecodes • Edited

Thanks for this awesome article man... really helped!

Collapse
 
fsboehme profile image
fsboehme

Thank you, Lord! You just saved my sanity – or what's left of it after struggling with this for 2 days! Amazing! Thank you so much for this! 🙌 🙌 🙌

tiny fix: there seems to be a comma missing between updateAvailable and refreshApp in methods.

Collapse
 
drbragg profile image
Drew Bragg

Great! The whole reason I wrote this up was to help someone dealing with the same issue. I'm super happy I could help.

Thanks for the heads up on the comma 🤦‍♂️

Collapse
 
milindsingh profile image
Milind Singh

In my blog this updated(registration) method is called on every page reload and it show in console that 'New content is available; please refresh.'

Is this usual for PWA or I missed something ?

updated(registration) {
  console.log('New content is available; please refresh.')
  document.dispatchEvent(
    new CustomEvent('swUpdated', { detail: registration })
  )
}
Enter fullscreen mode Exit fullscreen mode

dev.adapttive.com

Collapse
 
drbragg profile image
Drew Bragg

Hey Milind, that doesn't sound right to me. Did you follow the above example exactly?

Collapse
 
milindsingh profile image
Milind Singh

Yes, I found the issue.

I had add the onesignal sdk for notifications, which has a service worker causing conflit with default website service worker. 🙂

Collapse
 
dharmendradavid profile image
dharmendradavid

Thank you for this wonderful article. This is working fine if we refresh the page and showing an update prompt. But this not working without a refreshing page. Especially in the case of SPA. Please help me to show update prompt without refresh page

Collapse
 
ajlozier profile image
Aaron Lozier

I had the same question. Turns out you can create an interval to poll for updates in registerServiceWorker.js:

 registered(registration) {
      console.log(
        'Service worker has been registered and now polling for updates.'
      )
      setInterval(() => {
        registration.update()
      }, 5000) // every 5 seconds
    }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
frynt profile image
frynt

This works perfectly ! thanks !

Collapse
 
positivethinking639 profile image
positivethinking639

Hi. I want to ask. I had try your code and it works. I don't want to show the snackbar message. So I deleted this code : <v-snackbar bottom right :value="updateExists" :timeout="0" color="primary">
An update is available
<v-btn text @click="refreshApp">
Update
</v-btn>
</v-snackbar>
. It worked and there were no problems. Changes are automatically updated without clicking the update button. How do you think?

Collapse
 
positivethinking639 profile image
positivethinking639 • Edited

I try another option like this : methods: {
updateAvailable (event) {
this.registration = event.detail
this.updateExists = true
this.refreshApp()
}
. So if detect new version, it immediately called refreshApp method. So user don't need to click the update button

Collapse
 
rdj profile image
RDJ

Snackbar with UPDATE button never goes away on Chrome/Firefox even after reloading, works as expected on Safari. Any help is appreciated @drbragg

Collapse
 
drbragg profile image
Drew Bragg

Could be a change in a newer of Vue or Vuetify. Or heck, could be a change in how register-service-wroker works (judging by some of the other comments). It's been a while since I worked with this. If it helps these were my dependency versions at the time:

"dependencies": {
  "register-service-worker": "^1.7.1",
  "vue": "^2.6.11",
  "vuetify": "^2.2.31"
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rdj profile image
RDJ

@drbragg figured out, it was problem with using firebase serviceWorker being loaded at the same time. Thanks for this article, highly appreciate that

Thread Thread
 
drbragg profile image
Drew Bragg

Awesome! Glad you were able to figure it out!

Collapse
 
rdj profile image
RDJ

@drbragg thanks for responding. I’ll check it out

Thread Thread
 
emmanueled profile image
Emmanuele D

Hi @rdj

I'm trying to use this system and at the same time i have FCM on my project.
How did you solve that situation?

thankyou

Collapse
 
omoyabraham profile image
Temi

Awesome bro. Thank you.

Collapse
 
thealoneprogrammer profile image
Sujith D

This saved my day!...It works flawless. Great! sollution.

Collapse
 
hdenizd profile image
HDenizD

awesome bro, like a charm <3 . thank you

Collapse
 
disjfa profile image
disjfa

Was searching for this exact code. Awesome! Thanks a bunch of headache!

Collapse
 
ravih profile image
Ravi Hasija

Thank you! This was very helpful!

Collapse
 
modex profile image
Abia Emmanuel

Thanks a million.

Collapse
 
drbragg profile image
Drew Bragg

Thank you for the kind words! I hope it helped you.

Collapse
 
alenarmona profile image
Alejandro Narmona

Excelent! Thanks!!

Collapse
 
roronoa profile image
roronoa

I don't get where exactly to add the self.addEventListener code

Collapse
 
nathandj91 profile image
Nathan DJ

Anyone thought of doing a composition api variation?

Great article

Collapse
 
drbragg profile image
Drew Bragg

Not doing much with Vue any more unfortunately. Maybe someday