An idea of offline optimization of small programs with weak network

Author: Sun Ran (cooked shrimp)

When I encounter weak nets...

• Check the details of Dingding’s schedule in the elevator, but it cannot be opened. You have to go into the office to connect to WiFi, and open the schedule again.
• After walking out of the office building for a while, I still connected to the company's WiFi, but the signal is very weak, and I can't switch to 4G automatically. The workbench in Dingding can't be opened, and I have to manually set the network to 4G before using it again.
• ……

Three-level user experience under weak network

It is true that it is extremely difficult to make mobile apps have the same experience as the strong network even under the weak network, but users actually have reasonable expectations for the availability under the weak network. If there is no Internet connection, users will not expect to be able to pull the latest content; but if a function only depends on local data and does not depend on the network, the user hopes to at least be able to open it under a weak network.

The weak network performance of different business pages will bring different experience to users. Here, we divide the good and bad experiences of weak network offline into three levels, which can be opened, viewed, and submitted. The user experience increases step by step:

Three-layer Weak Network Offline Optimization Model for Small Programs

Under the current situation that small programs have been widely used by various businesses, we propose three levels of offline optimization ideas for weak networks for small programs.

resource

The offline availability of resources mainly includes two aspects: the offline package of the applet and the picture. They are the most basic elements of applet interface rendering. After making their resources available offline, you can achieve this level of offline experience.

applet offline package

Whether the applet offline package is available directly determines whether the applet can be opened. In fact, the package management system of the applet has already provided some offline loading capabilities. For example, if it is opened within 48 hours, the existing offline package will be used first, and the applet can be opened during this time period.

But once more than 48 hours, the forced update mechanism of the applet package management will be triggered, that is, you must wait for the network to download the latest version of the applet package before opening it. In this case, when encountering a weak network scenario, it may cause the applet to be unable to open for a long time. Under the weak network, the forced update strategy should be avoided as much as possible.

picture

The image resources used in the applet may come from two places:

• Network: Similar to the H5 image, the H5 image optimization strategy can be unified
• Offline package: The image resources are listed in the offline package and optimized together with the offline package

data

On the basis of making the resources available offline, if the data required by the applet can also be available offline, then an offline experience of this level can be achieved.

But the data here needs to be differentiated. For some data with high real-time and consistency requirements, it cannot be blindly available offline, or consider a more elegant way to prompt users.

Most of the data sources in the applet come from network requests, which are obtained through the few JSAPIs such as httpRequest. Therefore, you can consider a unified offline cache optimization for this kind of JSAPI. For more customized requirements, you can consider providing your own local data JSAPI for optimization.

affairs

For some network-dependent data submission transactions that need to be done in the applet, if the "false submission" under the weak network can be realized, the user experience of this level of submission can be achieved.

For these three levels, we can refer to the principle of "local first" for optimization: at the data level, after the requested data is cached locally, the next request uses the local data first, and refreshes after the network returns; at the transaction level , the user's data submission operation is first submitted to the local queue, and then the real submission is performed after the network is ready.

For weak network offline experience, the priority of the above three aspects is: resources ≥ data ≥ transactions. First ensure that the page is visible, then ensure that data is available, and then ensure that the transaction can be submitted offline.

For example, for a schedule applet, we can design the following weak network offline optimization scheme:

Summarize

Based on the user's expectations under the weak network, we have graded the user's weak network experience in three levels. For these three levels of experience, we propose a three-layer weak network offline optimization model for small programs, which provides an idea for the subsequent optimization of the weak network offline experience of small programs.

Follow [Alibaba Mobile Technology] WeChat public account, 3 mobile technology practice & dry goods every week for you to think about!