Parallel Upgrade Problem

Problem

Assume a user is using our web app in a tab, “TAB_1,” with version 1 of the database. Meanwhile, we roll out a new version of the app with database version 2. When the user visits our app in a new tab, “TAB_2,” the browser will open the database in version 2. In this scenario, “TAB_2” tries to update the version of the database. But there’s another connection to the version 1 database open in “TAB_1.” As a result, the blocked event will be triggered for the open request in “TAB_2” because a database can’t have a different version in a different tab.

Solution: Use the versionchange event

When the “TAB_2” tries to update the version of the database, the versionchange event will be triggered to all the open database connections. We should listen to the event and close the database connection. In addition, we must inform the user about the version update and ask to reload the page.

In the below code, we’ll listen for the versionchange event once a database connection is opened, so that when a user visits our latest app in a new tab, we’ll know that the database present in the current tab is outdated.