1# Atomic Service 2 3## Pre-loading by HAP Type 4 5### HAP File Implementation 6 7To speed up the initial startup of an atomic service, you can configure it to load on demand with the use of HAP files. HAP files of an atomic service are classified as entry-type or feature-type. The entry-type HAP file contains the page code and related resources required for starting up the atomic service. The feature-type HAP files contain the rest of the code and resources. To start the atomic service, the user only needs to download and install the entry-type HAP file, which minimizes the time for downloading the atomic service. 8 9#### How to Use 10 11You create HAP files of an atomic service by creating an atomic service project in DevEco Studio. The basic project directory structure is as follows: 12 13``` 14├── AppScope 15| ├── resources 16| └── app.json5 17├── entry 18| └── src/main 19| ├── ets 20| ├── resources 21| └── module.json5 22├── feature 23| └── src/main 24| ├── ets 25| ├── resources 26| └── module.json5 27├── library 28| └── src/main 29| ├── ets 30| ├── resources 31| └── module.json5 32├── node_modules 33``` 34 35Note that you must set the **bundleType** field to **atomicService** in the [app.json5](app-configuration-file.md) file, which is located in the **AppScope** folder. The following is an example of the file content: 36 37```json 38{ 39 "app": { 40 "bundleName": "com.example.hmservice", 41 "bundleType":"atomicService", 42 "vendor": "example", 43 "versionCode": 1000000, 44 "versionName": "1.0.0", 45 "icon": "$media:app_icon", 46 "label": "$string:app_name", 47 "targetAPIVersion": 9 48 } 49} 50``` 51 52For details about HAP files, see [Multi-HAP Design Objectives](multi-hap-objective.md). 53 54#### Restrictions 55 561. The **installationFree** field must be set to **true** in each module-specific configuration file [module.json5](module-configuration-file.md) file. 57 582. When packaging an atomic service, comply with the following size rules: 59 60- The total size of HAP files cannot exceed 10 MB. 61 62- The size of a HAP file itself and all its dependent [HSP](in-app-hsp.md) cannot exceed 2 MB. 63 64 65### Pre-loading Implementation 66 67You can configure the system to automatically pre-download required modules when the atomic service enters a module, thereby speeding up module access. 68 69Currently, pre-loading can be implemented only through configuration, not by invoking APIs. 70 71#### How to Use 72 73Pre-loading is triggered after the first frame of the newly accessed module is rendered. You can configure what to pre-load for a module, by setting the **preloads** field under **atomicService** in the [module.json5](module-configuration-file.md) file of the module. The following is an example of the **module.json5** file of the **entry** module, saved in **entry/src/main**: 74 75```json 76{ 77 "module": { 78 "name": "entry", 79 "type": "entry", 80 "srcEntry": "./ets/Application/MyAbilityStage.ts", 81 "description": "$string:entry_desc", 82 "mainElement": "MainAbility", 83 "deviceTypes": [ 84 "default", 85 "tablet" 86 ], 87 "deliveryWithInstall": true, 88 "installationFree": true, 89 "pages": "$profile:main_pages", 90 "atomicService": { 91 "preloads": [ 92 { 93 "moduleName": "feature" 94 } 95 ] 96 }, 97 "abilities": [ 98 { 99 "name": "MainAbility", 100 "srcEntry": "./ets/MainAbility/MainAbility.ts", 101 "description": "$string:MainAbility_desc", 102 "icon": "$media:icon", 103 "label": "$string:MainAbility_label", 104 "startWindowIcon": "$media:icon", 105 "startWindowBackground": "$color:white", 106 "exported": true, 107 "skills": [ 108 { 109 "entities": [ 110 "entity.system.home" 111 ], 112 "actions": [ 113 "action.system.home" 114 ] 115 } 116 ] 117 } 118 ] 119 } 120} 121``` 122 123In this example, the system automatically pre-loads the **feature** module after the first frame of the **entry** module is rendered. 124 125#### Restrictions 126 127[moduleType](../reference/apis/js-apis-bundleManager.md#moduletype) corresponding to moduleName in the **preloads** list cannot be entry. 128 129## Using Dynamic Shared Packages in Atomic Services 130 131A [Harmony Shared Package (HSP)](shared-guide.md) is a dynamic shared package for sharing code, C++ libraries, resources, and configuration files among modules. 132For details about how to use the HSP within an atomic service, see [In-Application HSP Development](in-app-hsp.md). 133 134#### How to Use 135 136Assume that the project directory structure is as follows: 137``` 138├── AppScope 139| ├── resources 140| └── app.json5 141├── entry 142| └── src/main 143| ├── ets 144| ├── entryAbility 145| └── pages 146| └── Index.ets 147| ├── resources 148| └── module.json5 149├── feature 150| └── src/main 151| ├── ets 152| ├── resources 153| └── module.json5 154├── library 155| └── src/main 156| ├── ets 157| └── pages 158| └── menu.ets 159| ├── resources 160| └── module.json5 161├── node_modules 162``` 163 164If you want to add a button in the **entry** module to jump to the menu page (**library/src/main/ets/pages/menu.ets**) in the **library** module, you can write the following code in the **entry/src/main/ets/MainAbility/Index.ets** file of the **entry** module: 165 166```ts 167import router from '@ohos.router'; 168 169@Entry 170@Component 171struct Index { 172 @State message: string = 'Hello World'; 173 174 build() { 175 Row() { 176 Column() { 177 Text(this.message) 178 .fontSize(50) 179 .fontWeight(FontWeight.Bold) 180 // Add a button to respond to user clicks. 181 Button() { 182 Text('click to menu') 183 .fontSize(30) 184 .fontWeight(FontWeight.Bold) 185 } 186 .type(ButtonType.Capsule) 187 .margin({ 188 top: 20 189 }) 190 .backgroundColor('#0D9FFB') 191 .width('40%') 192 .height('5%') 193 // Bind click events. 194 .onClick(() => { 195 router.pushUrl({ 196 url: '@bundle:com.example.hmservice/library/ets/pages/menu' 197 }).then(() => { 198 console.log("push page success"); 199 }).catch(err => { 200 console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); 201 }) 202 }) 203 .width('100%') 204 } 205 .height('100%') 206 } 207 } 208} 209``` 210 211The input parameter **url** of the **router.pushUrl** API is as follows: 212```ts 213'@bundle:com.example.hmservice/library/ets/pages/menu' 214``` 215The **url** content template is as follows: 216```ts 217'@bundle:bundle name/module name/path/page file name (without the extension .ets)' 218``` 219