DEV Community

陈杨
陈杨

Posted on

HarmonyOS5-App-Preloading-Speed-Up-Guide-EN

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

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

1. Why Use Preloading?

Imagine this: a user opens your app for the first time after installation, and the homepage data is already quietly waiting in the local cache, ready to be rendered without waiting for a network request. That's the magic of preloading! It effectively reduces white screen time, minimizes stuttering caused by network fluctuations, and gives users an "instant-on" experience.

2. What You Need to Know Before You Start

Environment Requirements:

  • Huawei AGC Preloading service must be enabled.
  • DevEco Studio NEXT Developer Beta1+ installed.
  • Debug certificate and Profile file (for on-device debugging).

3. Complete Guide to Cloud-Side Configuration

▶ Option A: Integrated App-Cloud Development (Recommended)

  1. Create a Cloud Project
    • Create a CloudProgram/cloudfunctions directory in DevEco Studio.
    • Right-click to create a new Cloud Function <font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);">txy-test</font>
  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.

▶ Option 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: Function binding must also be completed in the AGC console.

4. Client-Side Integration Guide

Key Configuration Steps:

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

5. Debugging and Verification Tips

Log Observation Guide:

  • Filter process:<font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);">clouddevelopproxy</font>
  • Successful log characteristics: 
[Preload Process] Resource preloading complete. Time taken: 320ms
[Network Module] Cache hit rate 98%
Enter fullscreen mode Exit fullscreen mode

Common Issues Troubleshooting:

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

6. Best Practice Recommendations

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

In Conclusion

By using preloading technology, we measured a reduction in the first-screen loading time of an e-commerce app from 1.8s to 0.4s, and a 27% increase in click-through rate. Get started and try it out now!

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

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

I hope this down-to-earth technical guide has been helpful to you! If you have any new discoveries during your practice, you are welcome to come back and share your optimization experiences~ 😊

Top comments (0)