DEV Community

陈杨
陈杨

Posted on

HarmonyOS5-Cloud-Service-Tech-Share-App-Preloading-Speed-Up-Guide

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

Hi, developer friends! Today, let's talk about how to use preloading technology to make your app start one step faster. In an era where user experience is paramount, the loading speed of the first screen is directly related to user retention. Come and master this powerful tool for performance improvement!

1. Why Use Preloading?

Imagine this: when a user opens an app for the first time after installation, the home page data is already quietly stored in the local cache, ready to be rendered directly without waiting for a network request. This is the magic of preloading! It can effectively reduce white screen time, minimize stuttering caused by network fluctuations, and give users an "instant open" experience.

2. Prerequisites

Environment Requirements:

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

3. Complete Guide to Cloud Configuration

▶ Option A: Integrated Device-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. 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 preload result
} catch (e) {
  console.error("Preload 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 failed due to incorrect certificate configuration
  2. Cloud function response timeout (recommended to keep it within 500ms)
  3. Network permission not declared correctly

6. Best Practice Recommendations

  1. Resource Selection Strategy
    • Prioritize preloading core resources for the first screen (images/configuration data)
    • 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

In Conclusion

Through preloading technology, we measured that the first screen loading speed of an e-commerce app was optimized from 1.8s to 0.4s, and the click-through rate increased by 27%. Start practicing now!

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

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

We hope this practical technical guide is helpful to you! If you have new discoveries during your practice, welcome back to share your optimization experience~ 😊

Top comments (0)