Talk about packaging and incremental updating of hybrid App Web resources

Review

Mobile app operating environment with bandwidth instability, traffic charges, startup speed is more important features, so hybrid App how to load Web resources is not a new problem. The purpose of this paper is to summarize the idea and scheme of resource packaging and download, and to provide a packaging tool. This article refers to the idea is only opinion, basically no reference to the existing program, you have different views welcome message. In addition, this article does not relate to the internal application of how to load resources, this Part I will write a special article discussion.

Demand Grooming

In general, Hybrid-app has the following requirements for WEB resource downloads:

• The page is opened faster, so the download and use of the resources is not done at the same time, there is a "pre-download" process.

• Resources cannot be downloaded repeatedly, so there should be a cache, but updates must be updated in a timely manner. Since the WebView cache is not very controllable, there is a set of custom caching mechanisms.

• To save traffic speed, if the resource is downloaded as a whole in a compressed package, the resource updates are supported for incremental updates. At the same time, a full-scale update is provided for devices that have more than one version separated from the latest version.

• To maintain a certain robustness, WEB resources should be deployed locally and online on a device, and can be switched at any time. In particular, when the device local cache is deleted, you can temporarily switch to online.

Resource Packaging Solutions

In order to facilitate development and deployment, the author has designed the following packaging solutions:

The release package is divided into four parts:

The first is to make the entire WEB resource directory into a compressed package (Bundle.zip).

Second, build a latest version of the incremental compression package (Update.zip) based on the previous version. To simplify development, I used a file-level diff algorithm-that is, comparing the two versions of the program directory, the new and changed files with the directory structure into a compressed package. For files that are deleted in the new version, this scenario is ignored because there is no effect on more than one file in the Web front-end program.

Thirdly, the entire Web resource directory exists as a directory in the publishing package, the directory name is/web, and when the device-side local resources are unavailable, you can use the online resources in the Web directory directly. In addition, to facilitate single-step debugging, the debug version of the APP also uses online resources.

Finally, the version information file Update.json, the version number of this release, the previous version number, and the release time are present in this file for the App to download the check periodically. The Update.json format is as follows:

{"releaseTime":"160530161454","version":9601,"lastVersion":9596}

The above is the entire publishing directory structure, the directory is uploaded to the back-end cloud storage, provide download links, the App can download updates and other functions. For the time being, in order to facilitate app development, the author uses a constant URL, for example, without considering the app version and the Web version.

http://www.url_prefix.com/some_folder/webapp/app_name/update.jsonhttp://www.url_prefix.com/some_folder/webapp/app_name/bundle.ziphttp://www.url_prefix.com/some_folder/webapp/app_name/update.ziphttp://www.url_prefix.com/some_folder/webapp/app_name/web/

The advantage of this is to design the app when the URL is agreed, these URLs will not change, the app as long as the time to pull the Update.json check version, the update can be, the Web resources released as long as the replacement of the corresponding file, the process is more simplified. Such a scenario leads to only one version on the line, so you won't be able to use it if different versions of the APP in your project require different versions of the Web resources to match.

Resource Packaging Tools

Once the scenario is identified, we also need a packaging tool that allows developers to publish resources. Obviously, this tool does not require developers to keep the old version of the directory themselves, so we need to rely on version control tools. The author uses node. js to develop an SVN-based command-line packaging tool, Packr:

Https://github.com/yusangeng/packr

The Packr principle is simple: by the publisher to determine the SVN address of the published project, the SVN version number of this minor release, and the SVN version number that was last released, Packr will make the resource a release package according to the above scenario. If you use Git, you can simply change the underlying version control component. This tool itself is irrelevant to front-end development, and you can use it to send packets for any project.

Instructions for use of Packr are as follows:

Overview of the Static Resource packaging tool (Packr) usage notes

Packr is a web-static resource packaging tool designed for hybrid development of mobile apps.

Packr by comparing the two SVN versions (not currently supported
git), packages a static resource project into a full-volume update package, an incremental update package, and an on-line resource directory, generating version information Update.json.

Operating Environment

• Packr based on NODEJS implementation, please install NODEJS before use.

• Packr dependent NPM modules require networked installation, make sure to connect to the Internet.

• Packr relies on the SVN command-line tool, install SVN before use and ensure that the environment variable has a relevant directory in Path.

• Packr does not have an SVN account Setup portal, please make sure that SVN has saved the available account name before use.

• Packr is the command-line tool, make sure that the environment variable Path has the Packr root directory before use.

Pre-run preparation

Suppose the Packr root directory is/usr/local/packr

cd /usr/local/packr npm install

Command parameters

The PACKR command format is as follows:

packr -p=${prefix} -c=${currentVersion} -l=${lastVersion} -r=${repositoryURL}

which

• Prefix is the output directory, and if not set, the output is in the current directory.

• CurrentVersion is the SVN version number for the current release version.

• Lastversion is the SVN version number for the previous version.

• Repositoryurl is the SVN repository address.

Output

The Packr output is a ZIP archive containing the following files or directories:

• Bundle.zip the full-volume update package for the newly released version.

• Patch.zip Incremental update package with new and changed files.

• A resource directory on a Web line that is accessed directly by clients or browsers when they are not using the cache.

• Update.json version information file, where the new version and version number of the previous version are recorded in JSON format.

Talk about packaging and incremental updating of hybrid App Web resources