TokenBB: Workbox, Service Workers and Vue.
Repository
https://github.com/BuildTeamDev/tokenbb-web-client
New Feature
This is part feature, part bug fix, and part mini tutorial, and involves Progressive Web Apps, Workbox, and Service Workers, integrating into the TokenBB project, which uses the Vue.js framework.
The issue initially as stated was as follows. Before this change, there was code in place that used the cli-plugin-pwa package to generate a workbox service worker responsible for handling precaching of assets, as documented here. In our case, every time a production build is complete, it generates a different service worker. Then on the client side, when the page is loaded, it detects a new version of the service worker is available, installs the service worker in the background. The intent is then that it can prompt the user to refresh to apply the new version of the website.
However, this wasn't happening. We use register-service-worker npm package that manages the life-cycle of the service worker. In our code here you'll see a callback detecting when a service worker is found, applied, and updated in updated, and output the log New content is available; please refresh., but refreshing the page did not apply the new content.
Turns out that is because of details concerning the Service Worker Lifecycle. Essentially, when a new service update worker is available, it gets installed in the background, but it does not apply until the old service worker is cleaned up. This requires all tabs containing that service worker to be closed down. Specifically, refreshing did not actually accomplish that task, as it does not count as a full close of the tab.
The Workbox Guides have a recipe for it, but it is very verbose. Thankfully the register-service-worker npm condenses a lot of this work. As you'll see in the next section, the task was managed in very few lines, but understanding how all the pieces worked together took me quite a long time.
Anyway, now we have a nice little refresh button
where pressing it actually updates to the new service worker and new version of the website. Yay.
The upshot here is that it gets rid of the confusion when a new update has gone out but people refreshing the page do not see the update (which was happening up until now :) ). Definitely of interest to @reggaemuffin and @thecryptodrive.
Code Details
You can find the merged pull request with the highlighted changes here: https://github.com/BuildTeamDev/tokenbb-web-client/pull/28/files
The solution has the following ingredients:
- Notification with user 'refresh' link to trigger the force install of the new service worker.
- Addition to service worker to detect the trigger and activate.
- Set up trigger to reload the page once the new service worker is applied.
This file has the changes for step (3), the reload signal, and step (1), the trigger. Note that it is done via a postMessage to the waiting service worker. The nice part about the register-service-worker package is that it encapsulates everything we need to detect the event that the new service worker is ready and waiting, and get access to the waiting service worker to send the message.
The 'skipWaiting' message gets picked up in this file and simply calls "skipWaiting" on the service worker. This allows the waiting service worker to activate immediately and kick out the old service worker. This extra JS is passed in as an option to workbox, which we added as a static JS asset to be fetched by the service worker code (For Vue, the build preserves all files in the public directory into its bundle).
This issue gave a hint for how to augment the service worker generated by workbox and cli-plugin-pwa.
And that's it! It took a long while at first because while chasing around the documentation I didn't realize that I needed to augment the service worker to catch the postMessage (thought it was in the generated service worker). Seems like there's some discussion about that in that referenced issue above.
As usual, let me know if you have any feedback/questions below.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Chat with us on Discord.
[utopian-moderator]
Thanks for the feedback! I'll work on adding more images and code samples for presentation for the future.
Thank you for your review, @helo! Keep up the good work!
That is awesome work @eonwarped, that was a particular bug bear for me, not knowing I needed to refresh to see new features.
Excellent work @eonwarped, the life cycle of service workers can be very tricky.
This is one of those development problems that definitely takes some digging and astuteness to get right. In addition, it will have significant impact on the project's smoothness of delivery going forward.
You're quite right how this piece of development work is also a sort of mini-tutorial. In fact, you just helped me find some information about workers that I needed in a different context.
Thanks, and well done!
Thanks! Yeah, and you really wouldn't have been able to tell it from looking at the code either :). It looks much simple than I recall.
I didn't realize you were working on tokenbb!
Was about to say the same thing. :)
Hey yes, it's also a reason I post with lower frequency now. Splitting spare time and such. But it's fun too!
Awesome. I did actually see you had a fair amount of BT tokens when i staked some more today. Should have guessed you were part of the team.
Hope TokenBB does well. 😉
Yup!
Hi @eonwarped!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 4.980 which ranks you at #1153 across all Steem accounts.
Your rank has not changed in the last three days.
In our last Algorithmic Curation Round, consisting of 202 contributions, your post is ranked at #3. Congratulations!
Evaluation of your UA score:
Feel free to join our @steem-ua Discord server
This post has been included in the latest edition of SoS Daily News - a digest of all you need to know about the State of Steem.
Hey, @eonwarped!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Thank you so much for participating in the Partiko Delegation Plan Round 1! We really appreciate your support! As part of the delegation benefits, we just gave you a 3.00% upvote! Together, let’s change the world!