VUE | PWA | DISABLE
Recently our product went to live! We were happy and in mood of celebrating the success until we received the production issue of user’s complaining that they don’t see the latest version of the product. Initially we thought its some release / deployment issue later we discovered that it was the PWA (Progressive Web App) that caused the issue.
In this post, we are gonna talk about the approaches that were taken in order to DISABLE PWA, Yes you are reading it correct. Disable PWA feature.
To be honest, we weren’t aware that having PWA could caution serious issue if not handled properly or set of user who would not be interested in clearing browser cache. I would like to take a moment to explain the issue here.
Progressive web app (PWAs) is a web app that does somethings that a native app does. It can work offline. Sounds amazing! PWA works with the help of service workers for handling installation and adding offline capabilities.
We rolled out first version of our product with (without our knowledge of having) PWA, the service workers were registered and the version of the app is cached for offline functionality. It was also notified in browser console. We weren’t harmed by it. However, when we rolled out the second version of the product, some user’s started to complain that they only seethe first version of the product not the latest. We didn’t know what was causing the issue, we asked them to clear cache and try ! it worked!! We were happy but then we realized that we cannot ask every user to do so. Exactly the same point, a lot users said BIG NO to clear cache! Then there was not way to push the latest version of the product to their browser.
Wait! You might ask, the registered service worker would have updated the new content the moment they are available! Yes your thought it is correct but for some reason, it didn't work the way expected. When a user opens the application from a bookmark , its always servers the cached version then promotes to newer version! some users faced login failure then the newer version was never loaded, they were always stuck with the older version of the app. Enough of the story, now I would like to talk about the solutions that I tried after reading about the issue in stack over flow, blogs, series of steps that helps us to completely disable PWA in production.
HOW DID PWA WAS ENABLED AT FIRST PLACE?
There was a plugin called ‘@vue/cli-plugin-pwa’, adding it enables the PWA. In vue cli documentation , they have clearly mentioned that
Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included.
You can read more about this plug-in, if you are someone who is gonna enable PWA, https://cli.vuejs.org/core-plugins/pwa.html.
HOT-FIX1: DISABLE PWA — CREATE BUILD WITHOUT PWA FUNCTIONALITY
First step towards to disabling pwa is, generate a build of your application without this feature.
If you have the @vue/cli-plugin-pwa as a plugin or dependency in your application (package.json) , please remove it.
Also the command to skip this plugin and generate a build is also possible. You can read more about vue-cli-service here https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve
--skip-plugins comma-separated list of plugin names to skip for this run
You can serve your application with — skip-plugins pwa in our case to disable PWA.
HOT-FIX2: DELETE CACHE — WHEN NEWER CONTENT IS AVAILABLE
An alternate of deleting cached content in service worker also helped our case. You will find a file registerServiceWorker.js in your application, which is loaded in main.js The file holds all service worker file events like
here , in updated or updatefound, you can remove the older cached content from registered service worker.
Once the cached contents were deleted, we then pushed one more release with removal of service workers by deleting the file and import statement.
HOT-FIX3: DELETING EXISTING SERVICE WORKER FILE
We tried using an external library to remove the existing service worker file from browser cache. We used “webpack-remove-serviceworker-plugin”, you can find link to this library here
You can find the usage there in the link, this has to be added as dependency to your application, npm install and you can configure this plugin in vue.config.js
Finally, all these hot fixes helped us in resolving the issue of older version cached in client’s browser. We didnt request user’s to clear their cache, each hot fix did its part and the production is fixed.
Do not forget to remove these dependencies (external) library when you are done with fixing it. As a learning, we have kept our cli serve command with — skip-plugins pwa. The choice is yours! however.
Happy Coding!
