How Hotfixes Help Improve User Experience And How You Can Build Your Own

This past month, we talked to Tencent’s ABCMouse group about some of the work they are doing with Cocos Creator. We were happy to share a tutorial on adding a video player into your app or game. But that wasn’t the only thing they were talking about in our Guangzhou meetup last year.

Talking to the developers, they also shared another big issue they have with building their app. The time it takes to update an app and get it approved by the app stores worried the developers.

Three significant issues came with having to update the app continually:

First: Downloading an entirely new app package is very long, and an update takes tens of minutes, which not only wastes the user’s time but also makes the product experience terrible.

Second: high cost. If we have to update our entire app every time we have new courseware, it will increase development costs.

Also, the scope of influence is too large. If a new course is updated or a problem is fixed every time for one specific item, everyone must update, including users who take unrelated courses. This is obviously kidnapping user’s time, and the experience is terrible.

To relieve this issue, the team started to build hot updates to help reduce the update and speed up the time it takes for courses to be sent to students.

Hot Update

The developer’s set up hot updates by comparing the version numbers of the remote and local versions. If the local version number is smaller than the remote version number, a hot update is required.

Where does the version number come from?

The answer is to get it in the manifest file. They put the manifest file with the higher version number and the latest build resources on the remote server, while the lower version and old resources are left in the local package.

When you need to check the hotfix, Cocos Creator will first initialize the local package’s manifest file and create a temporary folder and a cache folder in the specified directory. For example, the cache folder is hxy, and the temporary folder is hxy.temp.

The app will download the remote version. Manifest the file, cache it locally, and compare the obtained version number with the locally existing version. If the remote version is higher, download the project.manifest file carrying resource information to the temporary folder hxy.temp.

Then compare the local project.manifest and the project.manifest resource list downloaded from the remote to the temporary folder, that is, use an assets table, and then generate a difference list. Download the files in the difference list to the local through a background downloader.

After the file is downloaded successfully, verify the downloaded file. Then notify the download progress, save the download progress, and check whether there are failed resources. If not, all the contents of the temporary folder will be copied to the set cache directory. If the update fails, the temporary resources will not be copied to the cache directory to avoid polluting the original local cache resources.

Cocos Creator uses the manifest file marking each resource-like state (Not started / download / download is complete). If the network is interrupted during the hot update, restart the hot update.

Cocos Creator will check whether there is any unfinished update in the temporary folder. After verifying whether the version matches the remote, it will use the manifest in the temporary folder as the remote manifest to continue the update (provided that the project.manifest has been downloaded in the temporary file. The name in the temporary folder will have a .temp suffix). At this time, the download status will not be re-downloaded, and the downloading file is generally downloaded from the beginning.

After the update is completed, Cocos Creator will use the remote version file project.manifest as the current local project.manifest, and the version number of the latest manifest file will be used for the next update.

1. The downloading process is a differential download, which can reduce the download time, so what does differential download refer to?

The above figure is the file difference operation flowchart in the difference download. The left half is the part of deletion and modification. The main local and remote file lists are compared to determine whether there are files deleted and whether files have been modified.

If these operations exist, put them in a different file list and store them; the right half is mainly for judging the process of adding files. It compares the remote file list with the local file list.

If no additional file is found, it will be stored in a different file list.

After these two steps, the different file list chooses to either delete older files or modify/add new ones.

2. The actual operation of the version rollback version.

In our testing, the updated version may accidentally carry unexpected bugs. If you want to restore quickly, you need to roll back to the previous version.

In fact, the hot update of Cocos Creator defaults to hot update only if the remote version is greater than the local version, so how to implement a rollback?

Key code:

Cocos Creator main program and sub-programs

Hot updates can already be done without issuing packages, and courses can be put on the shelves at any time, and some problems can be fixed. So why do you want to do add sub-programs?

Benefits of the sub-programs:

In this way, large courses won’t become larger and larger, resulting in larger and larger packages. The results allow for a few things:

  1. Each courseware can be independent without any connection between the courseware. If you need to use the class, you can use it directly without further development, which improves development efficiency.
  2. The volume of a single package becomes small, the download speed is very fast, and users can experience the course in a short time;
  3. Do on-demand download, update content for the user only needs to update, the update does not affect other users not using that course so that the user experience will be very good.

Here is an example of the structure in our project:

Thanks to Wu Yuda from Tencent for sharing their experience and their examples to our worldwide community.

Pin It on Pinterest