DEV Community

陈杨
陈杨

Posted on

HarmonyOS5-App-Preloading-Guide-EN

A Step-by-Step Guide to Optimizing App Startup Speed with Preloading

Hi, developers! Today, let's talk about how to make your app start faster using preloading technology. In an era where user experience is paramount, the initial screen loading speed directly impacts user retention. Let's master this powerful tool to boost performance!

I. Why Use Preloading?

Imagine this: after a user installs and opens your app for the first time, the homepage data is already quietly stored in the local cache, ready to be rendered directly without waiting for network requests. This is the magic of preloading! It effectively reduces white screen time, minimizes stuttering caused by network fluctuations, and gives users an "instant open" experience.

II. Prerequisites

Environment Requirements:

  • Huawei AGC Preloading service is enabled.
  • DevEco Studio NEXT Developer Beta1+ is installed.
  • Debugging certificate and profile file (for on-device debugging).

III. Complete Guide to Cloud Configuration

▶ Plan A: End-to-End Cloud-Integrated Development (Recommended)

  1. Create a Cloud Project
    • In DevEco Studio, create a CloudProgram/cloudfunctions directory.
    • Right-click to create a new cloud function named txy-test.
  2. Write Sample Code 
let myHandler = async (event, context, callback, logger) => {
  logger.info(event);
  // Add resource preloading logic here
  callback({ code:0, desc:"Success." });
};
export { myHandler };
Enter fullscreen mode Exit fullscreen mode
  1. Deploy the Function
    • Right-click the function directory and select "Deploy 'txy-test'".
    • Bind the preloading function in the AGC console.

▶ Plan B: Traditional Development Method 

public CanonicalHttpTriggerResponse handleRequest(...) {
  // Sample HTTP request handling
  HttpRequest h = new HttpRequest();
  FunRsp res = h.get();
  resp.setBody(JSONObject.toJSONString(res));
  return resp;
}
Enter fullscreen mode Exit fullscreen mode

Note: The function also needs to be bound in the AGC console.

IV. Client-side Integration Guide

Key Configuration Steps:

  1. Permission Request 
"requestPermissions": [{
  "name": "ohos.permission.INTERNET",
  "reason": "Required for preloading network requests",
  "usedScene": {
    "abilities": ["MainAbility"],
    "when": "always"
  }
}]
Enter fullscreen mode Exit fullscreen mode
  1. Call Preload 
try {
  const res = await cloudFunction.call({
    name: "txy-test",
    loadMode: cloudFunction.LoadMode.PRELOAD
  });
  // Process the preloading result
} catch (e) {
  console.error("Preloading exception:", e);
  // Handle with a fallback solution
}
Enter fullscreen mode Exit fullscreen mode

V. Debugging and Verification Tips

Log Observation Guide:

  • Filter Process: clouddevelopproxy
  • Successful Log Characteristics: 
[Preloading Process] Resource preloading completed. Time taken: 320ms
[Network Module] Cache hit rate 98%
Enter fullscreen mode Exit fullscreen mode

Common Issues Troubleshooting:

  1. Signature verification failure due to incorrectly configured certificates.
  2. Cloud function response timeout (recommended to keep it within 500ms).
  3. Network permissions not declared correctly.

VI. Best Practice Recommendations

  1. Resource Selection Strategy
    • Prioritize preloading core resources for the first screen (images/configuration data).
    • The recommended size for a single resource is <500KB.
    • Set a reasonable cache expiration policy.
  2. Data Update Strategy
    • Use version numbers to control cache updates.
    • Use incremental updates instead of full loads.

Finally

Through preloading technology, we measured that a certain e-commerce app's initial screen loading speed was optimized from 1.8s to 0.4s, and the click-through rate increased by 27%. Get started now!

If you encounter any issues, feel free to leave a message for discussion in the Huawei Developer Community, or follow our official account for the latest technical updates. We wish every developer's app a silky-smooth startup experience!

🚀 Head over to the AGC console to start your optimization journey → [Go to Console]

Hope this down-to-earth technical guide helps you! If you have new discoveries during your practice, you are welcome to come back and share your optimization tips~ 😊

Top comments (0)